javascript - Stripe checkout - 如何绑定(bind)提交事件？

Question

我正在使用 Stripe checkout我网页中的 JS 库。一旦 token 被提交到我的服务器，我需要显示一个阻塞的“我正在处理你的请求”消息

我需要它，因为我的服务器端处理可能需要超过 5 秒，而且我不希望用户离开页面(或任何其他可能使结帐过程无效的事情)。

我试图在 Stripe 表单上绑定(bind)一个提交事件以显示模式(例如!)，但事实证明 Checkout.js 正在取消绑定(bind)任何提交事件并且似乎无法检测到实际表单提交。

这是我的代码:

<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，因此没有一种方法可以绑定(bind)到我所知道的提交事件。

我唯一想做的就是在您点击 Pay with Stripe 按钮时显示加载消息。

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

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