Question

我在我的ASP.NET MVC应用程序中集成了Stripe付款。 Checkout按钮可在桌面上使用，并将用户重定向到Stripe结帐页面，但该按钮在移动设备上不起作用。我在iOS上尝试了Edge和Chrome，但都无法正常工作。

这是我的剃须刀页面（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>

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

Answer 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浏览器中看起来无法正常工作。

条纹结帐按钮在移动设备上不起作用

1 个答案: