Question

我正在我的网页中使用Stripe checkout JS库。一旦将令牌提交到我的服务器，我就需要显示阻止“我正在处理您的请求”消息

我需要它，因为我的服务器端处理可能需要超过5秒并且我不希望用户离开页面（或任何其他可能导致结帐过程无效的情况）。

我试图在条带表单上绑定一个提交事件以显示一个模态（例如！），但事实证明Checkout.js解除了任何提交事件的绑定，似乎没有办法检测到实际表格提交。

这是我的代码：

<form class="stripe-form" action="..." method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="..."
    data-email="..."
    data-label="Pay with Stripe"
    data-panel-label="Pay {{amount}}"
    data-amount="... " 
    data-currency="USD"
    data-name="..."
    data-description="..."
    data-image="...">
  </script>
</form>

<script type="text/javascript">
$(function(){

    stripeForm = $('.stripe-form');

    stripeForm.submit(function(e){
        console.log('going to submit'); //this is never called!
    });

});
</script>

正如评论所说，提交事件永远不会被触发，我找不到任何解决方法来检测它。有什么想法吗？

注意：我没有包含更通用的Stripe library，只有StripeCheckout可用。

谢谢大家

Answer 1

我遇到了同样的问题。在我看来，checkout.js会插入一个iframe，因此无法绑定到我所知道的提交事件。

我唯一想做的就是当你点击Pay with Stripe按钮时显示加载信息。

$( ".stripe-button-el" ).click(function() {
    $( "#loadingMessage" ).show();
});

但是如果用户关闭了Stripe付款模式，则需要隐藏#loadingMessage。

Answer 2

如果您使用https://stripe.com/docs/checkout#integration-custom，则可以在提交表单之前使用以下内容创建叠加层。

var form = document.querySelector('form');      
var handler = StripeCheckout.configure({
    key: 'STRIPE_PUBLIC_KEY',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(response) 
    {

        var overlay = document.createElement('div');
        overlay.className = 'my-overlay  my-overlay--visible';

        document.body.appendChild(overlay);

        form.submit();  
    }
});

Answer 3

如果我是对的，您需要为流程栏提供AJAX请求。然后，这可以通过一种或两种方法返回“进度”（从未在我自己之前尝试过）。

$('form.stripe-form').submit(function(){
    $.ajax({
        type:'POST',
        data:{'data-key':'…','data-label':'Pay with Stripe','data-currency':'USD'/* etc */},
        beforeSend:function(xhr,XMLHttpRequest){
            //xhr.abort() to abort the ajax, say for validation: $('input').length<1
            XMLHttpRequest.upload.addEventListener("progress",function(evt){
                if(evt.lengthComputable){
                    var progress=evt.loaded/evt.total;
                    console.log(progress);
                }
            },false);
        },
        success:function(result){
            console.log(result);
        }
}

我从未使用过条纹，所以我可能完全错了。根据条带的要求（json，post data等），您可能需要更改上述内容。虽然说进度报告和ajax可能仍然有效。但是，再次，就像我之前提到的，没有尝试过，所以你可能不得不改变和改变我的答案，除非别人可以为你改变它。一切顺利！

条带签出 - 如何绑定提交事件？

3 个答案: