Stripe checkout - 如何绑定提交事件？

Posted 2023-02-22

【中文标题】Stripe checkout - 如何绑定提交事件？

【英文标题】：Stripe checkout - how to bind submit event?

【发布时间】：2014-05-12 02:49:41

【问题描述】：

我在我的网页中使用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>

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

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

谢谢大家

【参考方案1】：

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

我唯一想做的就是在您单击“使用 Stripe 付款”按钮时显示加载消息。

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

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

【参考方案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();  
    
);