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

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库,只有StripeCheckout可用.

谢谢你们

Answer 1

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

我唯一想做的就是当您单击“Pay with Stripe”按钮时显示一条加载消息。

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

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