Блог

Главная - Вопросы по программированию - Добавление подписки Stripe в Blazor WASM

Добавление подписки Stripe в Blazor WASM

#stripe-payments #blazor #blazor-client-side #blazor-webassembly

#stripe-платежи #blazor #blazor-на стороне клиента #blazor-webassembly

Вопрос:

Я пытаюсь добавить подписку Stripe в свое приложение Blazor WASM, следуя этим инструкциям, поскольку они используют JavaScript, я использую взаимодействие JavaScript. Я добавил скрипт Stripe в свой index.html и добавили пользовательский скрипт с javascript, который у них есть в инструкциях. Index.html внутри <head> тега

 <script src="https://js.stripe.com/v3/"></script>
<script src="stripescript.js"></script>

stripescript.js:

 let stripe = window.Stripe('MY PUBLIC KEY');
let elements = stripe.elements();

let card = elements.create('card', { style: style });
card.mount('#card-element');

card.on('change', function (event) {
    displayError(event);
});
function displayError(event) {
    changeLoadingStatePrices(false);
    let displayError = document.getElementById('card-element-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
}


function createPaymentMethod(cardElement, customerId, priceId) {
    return stripe
        .createPaymentMethod({
            type: 'card',
            card: cardElement,
        })
        .then((result) => {
            if (result.error) {
                displayError(error);
            } else {
                //change this to call .net
                createSubscription({
                    customerId: customerId,
                    paymentMethodId: result.paymentMethod.id,
                    priceId: priceId,
                });
            }
        });
}

Я предполагаю, что инициализация переменных будет происходить при загрузке приложения. Однако, когда я добавляю следующий HTML-код на свою страницу Razor, компонент card не заполняется.

 <form id="payment-form">
    <div id="card-element">
        <!-- Elements will create input elements here -->
    </div>

    <!-- We'll put the error messages in this element -->
    <div id="card-element-errors" role="alert"></div>
    <button type="submit">Subscribe</button>
</form>

Я не понимаю, как это отладить, или если это вообще возможно в Blazor.

Комментарии:

1. Вы не показали код для JsRuntime, который вы используете для вызова метода для инициализации, пожалуйста, обновите вопрос всем соответствующим кодом.

2. это мой вопрос, поскольку этого нет в функции let stripe = window . Stripe(‘МОЙ ОТКРЫТЫЙ КЛЮЧ’); пусть elements = stripe.elements(); пусть card = elements.create(‘card’, {style: style }); card.mount(‘#card-element’); должен ли я поместить это в функцию и вызвать ееоткуда? или она будет автоматически запускаться, поскольку ее нет в функции

3. Правильно, вам нужно поместить это в функцию и вызвать эту функцию из кода C # на странице, на которую вы ее загружаете.

4. если я помещу это в функцию, есть ли способ сделать переменную stripe доступной для других функций javascript? по сути, это глобальная переменная?

5. По сути, код, который инициализирует элемент stripe card, должен быть помещен в метод, который будет вызываться из c #. Другие переменные могут находиться за пределами функции, поэтому они доступны по всему миру.

Ответ №1:

Благодаря комментариям @Umair я понял, что допустил несколько ошибок, и некоторые из них отображались в консоли, поскольку я пытался инициализировать элемент card до загрузки DOM. Я смог решить свою проблему, сначала изменив крепление карты на ее собственную функцию. Вот полный stripescript.js для будущих людей, у которых есть эта проблема:

 let stripe = window.Stripe('MY KEY');
let elements = stripe.elements();
let style = {
    base: {
        fontSize: '16px',
        color: '#32325d',
        fontFamily:
            '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
        fontSmoothing: 'antialiased',
        '::placeholder': {
            color: '#a0aec0',
        },
    },
};
let card = elements.create('card', { style: style });

function mountCard() {
    card.mount('#card-element');
}

card.on('change', function (event) {
    displayError(event);
});
function displayError(event) {
    changeLoadingStatePrices(false);
    let displayError = document.getElementById('card-element-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
}


function createPaymentMethod(cardElement, customerId, priceId) {
    return stripe
        .createPaymentMethod({
            type: 'card',
            card: cardElement,
        })
        .then((result) => {
            if (result.error) {
                displayError(error);
            } else {
                //todo change this to call .net
                createSubscription({
                    customerId: customerId,
                    paymentMethodId: result.paymentMethod.id,
                    priceId: priceId,
                });
            }
        });
}

и добавил следующий код C # в мой компонент Blazor для рендеринга карты:

 [Inject] IJSRuntime js { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await js.InvokeVoidAsync("mountCard");
    }
Метки: