条纹结帐按钮在移动设备上没有任何作用答案

【问题标题】：Stripe checkout button does not do anything on mobile条纹结帐按钮在移动设备上没有任何作用
【发布时间】：2020-11-11 13:35:28
【问题描述】：

我在我的 ASP.NET MVC 应用程序中集成了 Stripe 支付。结帐按钮适用于桌面并将用户重定向到 Stripe 结帐页面，但该按钮在移动设备上没有任何作用。我在 iOS 上尝试过 Edge 和 Chrome，但都无法正常工作。

这是我在 razor 页面 (Cart.cshtml) 中的 JavaScript

<div>
    @using (Html.BeginForm("", "Cart", FormMethod.Post))
    {
        <input type="submit" id="stripe-checkout-button" value="Stripe" />
    }    
</div>

<script type="text/javascript">
    var stripe = Stripe('MyStripePublishKey');
    var checkoutButton = document.getElementById('stripe-checkout-button');

    checkoutButton.addEventListener('click', function () {
        fetch('https://mywebsite.com/Cart/Checkout_Stripe', {
                method: 'POST'
            })
            .then(function(response) {
                return response.json();
            })
            .then(function (session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function(result) {
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function (error) {
                window.location.href = "/Cart/GatewayRedirectFailed";
                console.error('Error:', error);
            });
    });
</script>

按钮确实提交了表单并且没有错误。另外我必须提到，客户端验证发生了，因为我有一个标记为“必需”的协议复选框，并且该复选框有一个弹出框，按下按钮只会触发该验证。

【问题讨论】：

您是否看到任何错误？您的错误条件中的警报是否触发？尝试设置移动浏览器调试（例如developers.google.com/web/tools/chrome-devtools/…）并查看正在命中的代码路径、浏览器控制台中记录的内容、是否抛出任何异常或错误？
没有。没有错误。我将编辑我的问题
按钮是否在注册点击？例如在按钮单击处理程序中添加一个控制台日志，看看它是否正在运行。如果stripe.redirectToCheckout() 部分正在运行
可能只是您的代码没有解析来自服务器的响应，因此也值得研究该获取请求和响应
好点！我验证了 url "mywebsite.com/Cart/Checkout_Stripe" 已获取，但看起来好像重定向没有发生，而且我没有收到任何客户端或服务端错误

标签： javascript asp.net-mvc fetch stripe-payments

【解决方案1】：

在获得 Stripe 支持的帮助后，他们发现我可以通过更新我的 JavaScript 来使其工作，如下所示：

<script type="text/javascript">
    var stripe = Stripe('MyStripePublishKey');
    var checkoutButton = document.getElementById('stripe-checkout-button');

    checkoutButton.addEventListener('click', function (event) { -- adding event parameter

        event.preventDefault();  <<-- this is the key to make it work!

        fetch('https://mywebsite.com/Cart/Checkout_Stripe', {
                method: 'POST'
            })
            .then(function(response) {
                return response.json();
            })
            .then(function (session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(function(result) {
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function (error) {
                window.location.href = "/Cart/GatewayRedirectFailed";
                console.error('Error:', error);
            });
    });
</script>

因为我的表单没有任何action，看起来在 iPhone 浏览器中它不起作用。

【讨论】：