将 Stripe 订阅添加到 Blazor WASM答案

【问题标题】：Adding Stripe Subscription to Blazor WASM将 Stripe 订阅添加到 Blazor WASM
【发布时间】：2021-03-11 08:35:37
【问题描述】：

我正在尝试在 these instructions 之后将 Stripe 订阅添加到我的 Blazor WASM 应用程序中，因为他们使用的是 JavaScript，所以我使用的是 JavaScript interop。我将 Stripe 的脚本添加到我的 index.html 中，并使用说明中的 javascript 添加了一个自定义脚本。 <head>标签内的Index.html

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

【问题讨论】：

您没有显示用于调用方法初始化的 JsRuntime 的代码，请使用所有相关代码更新问题。
这是我的问题，因为这不在函数中 let stripe = window.Stripe('MY PUBLIC KEY');让元素=条纹.元素（）； let card = elements.create('card', { style: style }); card.mount('#card-element');我必须把它放在一个函数中并从那里调用它吗？还是会自动运行，因为它不在函数中
正确，您需要将其放入一个函数中，然后从您加载它的页面上的 C# 代码调用该函数。
如果我把它放在一个函数中，有没有办法让其他javascript函数可以使用stripe变量？基本上使它成为一个全局变量？
基本上，初始化条带卡元素的代码需要放在一个将从c#调用的方法中。其他变量可以在函数之外，因此可以全局访问。

标签： stripe-payments blazor blazor-client-side blazor-webassembly

【解决方案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");
    }

【讨论】：