ASP.NET 8 MVC 项目 - 嵌入式 Stripe 支付不起作用

Question

我正在按照 Stripe 的在线文档为连接的帐户创建嵌入式付款表单。

https://docs.stripe.com/connect/direct-charges?platform=web&ui=embedded-form&client=html#mount-checkout

我的测试 API 密钥在 Program.cs 中设置正确

我的控制器中的这个端点大部分直接来自 Stripe 的 API 指南，并且它很高兴地返回客户端密钥：

[HttpGet]
[AllowAnonymous]
public ContentResult StripeCheckoutSession()
{
        var options = new Stripe.Checkout.SessionCreateOptions
        {
            LineItems = new List<Stripe.Checkout.SessionLineItemOptions>
        {
            new Stripe.Checkout.SessionLineItemOptions
            {
                PriceData = new Stripe.Checkout.SessionLineItemPriceDataOptions
                {
                    Currency = "aud",
                    ProductData = new Stripe.Checkout.SessionLineItemPriceDataProductDataOptions
                    {
                        Name = "T-shirt",
                    },
                    UnitAmount = 1000,
                },
                Quantity = 1,
            },
        },
            PaymentIntentData = new Stripe.Checkout.SessionPaymentIntentDataOptions
            {
                ApplicationFeeAmount = 123,
            },
            Mode = "payment",
            UiMode = "embedded",
            ReturnUrl = "abc={CHECKOUT_SESSION_ID}"
        };
        var requestOptions = new RequestOptions
        {
            StripeAccount = "acct_12345...";
        };
        var service = new SessionService();
        Session session = service.Create(options, requestOptions);
        return Content(JsonConvert.SerializeObject(session.ClientSecret));
}

在我的 .cshtml 视图的头部我添加了这个脚本元素：

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

在正文中我有这个标记：

<div id="checkout">
</div>

还在头部我有从 Stripe 的 API 指南复制的 JavaScript。

<script type="text/javascript">
    // initialize Stripe.js
    const stripe = Stripe('pk_test_blah...', {
       stripeAccount: {{CONNECTED_ACCOUNT_ID}},
    });

    initialize();

    // fetch checkout session and retrieve client secret
    async function initialize() {
      const fetchClientSecret = async () => {
        const response = await fetch("/StripeCheckoutSession", {
          method: "POST",
        });
        const { clientSecret } = await response.json();
        return clientSecret;
      };

      // initialize checkout
      const checkout = await stripe.initEmbeddedCheckout({
        fetchClientSecret,
      });

      // mount checkout
      checkout.mount('#checkout');
    }
</script>

注意，我已将 {{CONNECTED_ACCOUNT_ID}} 替换为对视图模型中实际值的引用，如下所示：

'@Model.StripeAccountID'

当我运行该项目时，没有任何反应 - 空白屏幕。我一半预料到了这一点，因为我没有看到初始化（）是如何被调用的。我发现它永远不会执行。

所以我写了js，我认为它应该如下工作：

    <script type="text/javascript">
        // initialize Stripe.js
        const stripe = Stripe('pk_test_blah...', {
            stripeAccount: '@Model.StripeAccountID',
        });

        $(document).ready(function () {
            initialize();
        })

        // fetch checkout session and retrieve the client secret
        async function initialize() {
            try {
                alert('Start');
                const fetchClientSecret = async () => {
                    const response = await fetch("StripeCheckoutSession", {
                        method: "GET",
                    });
                    const { clientSecret } = await response.json();
                    return clientSecret;
                };
                // initialize checkout
                alert('Init checkout');
                const checkout = await stripe.initEmbeddedCheckout({
                    fetchClientSecret,
                });
                // mount checkout
                alert('Finish mount');
                checkout.mount('#checkout');
            }
            catch (err) {
                alert(err);
            }
        }
</script>

我看到警报（'开始'），然后警报（'完成安装'），但没有看到警报（'初始化结账'）

我还尝试使用一个单独的函数，通过 AJAX 调用来获取客户端密钥。该功能本身有效，但初始化结账失败。

我做错了什么？谁能帮我解决这个问题吗？

Answer 1

他们的示例使用index.js +index.html，其工作方式与 MVC/Razor 页面略有不同。一件事是异步处理有点关闭。考虑尝试而不是包装新的异步方法：

async function initialize() {
    try {
        alert('Start');
        await fetch("StripeCheckoutSession", {
            method: "GET",
            headers: {
                'Content-Type': 'application/json'
            },
        }).then (response => {
            if (response.ok) {
                return response.json();
            } else { /* handle server exception */ }
        )}.then (data => {
            // initialize checkout
            alert('Init checkout');
            const checkout = await stripe.initEmbeddedCheckout({
                data.clientSecret
            });
            // mount checkout
            alert('Finish mount');
            checkout.mount('#checkout');
        });
    catch (err) {
        alert(err);
    }
}

除此之外，启用浏览器调试工具并检查控制台中的错误，并考虑在 JS 中设置断点以验证是否按预期调用了内容。