Stripe payments 向Blazor WASM添加条带订阅

我正在尝试向我的Blazor WASM应用程序添加条带订阅，因为它们使用的是JavaScript，我正在使用。我将Stripe的脚本添加到index.html中，并使用说明中的javascript添加了一个自定义脚本。

标记中的Index.html

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

我的假设是，变量初始化将在加载应用程序时发生。但是，当我向Razor页面添加以下HTML时，并没有填充卡片组件

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

多亏了@Umair的评论，我意识到我犯了一些错误，其中一些错误出现在控制台中，因为我在加载DOM之前尝试初始化card元素。我能够通过首先将卡挂载更改为自己的功能来解决我的问题。以下是针对有此问题的未来用户的完整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");
    }

---

您尚未显示用于调用方法进行初始化的JsRuntime的代码，请使用所有相关代码更新问题。这是我的问题，因为这不在函数let stripe=window.stripe（“我的公钥”）中；let elements=stripe.elements（）；让card=elements.create（'card'，{style:style}）；卡。挂载（“#卡元素”）；我必须把它放在函数中并从那里调用它吗？或者它是否会自动运行，因为它不在函数中正确您需要将其放入函数中，并从加载它的页面上的C#代码调用该函数。如果我将其放入函数中，是否有方法使stripe变量可用于其他javascript函数？基本上使它成为一个全局变量？基本上，初始化stripe card元素的代码需要放在一个从c#调用的方法中。其他变量可以在函数外部，以便全局访问。

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