将 Stripe 订阅添加到 Blazor WASM

Question

我正尝试在 these instructions Since they are using JavaScript I am using the JavaScript interop 之后将 Stripe 订阅添加到我的 Blazor WASM 应用程序。我将 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 页面时，没有填充卡片组件。

<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 中是否可行。

Answer 1

感谢@Umair 的评论，我意识到我犯了一些错误，其中一些错误出现在控制台中，因为我试图在加载 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");
    }

将 Stripe 订阅添加到 Blazor WASM

Adding Stripe Subscription to Blazor WASM

stripe-payments

blazor

blazor-client-side

blazor-webassembly