Stripe checkout - 捕获“支付卡”按钮的 onclick 事件答案

【问题标题】：Stripe checkout - capture onclick event of 'Pay by card' buttonStripe checkout - 捕获“支付卡”按钮的 onclick 事件
【发布时间】：2015-12-09 21:59:23
【问题描述】：

我正在使用 Stripe Javascript 结帐库。我的页面上有多个结帐按钮实例，我需要捕获按钮的 onclick 事件，以便在叠加层出现之前向结帐表单动态添加隐藏字段。

是否有捕获按钮的 onclick 事件，如果有，则判断单击了哪个按钮？

已编辑以包含以下代码。注意：这是 Stripe 提供的代码。

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_MhUiNzdsSkIvzW5Mpwikw38Z"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png"
    data-locale="auto">
  </script>
</form>

【问题讨论】：

肯定有办法捕获 onclick 事件。你是如何实现代码的？如果您阅读文档，它将向您展示如何使用单击处理程序 stripe.com/docs/checkout#integration-custom 实现自定义按钮
使用自定义集成绝对是可能的，但我希望不必使用自定义，只需使用标准结帐“刷卡支付”按钮。
Stripe 文档说“当用户单击按钮并完成付款时，我们将提交您的表单，其中包含 stripeToken 以及表单中的任何其他 ”。这不是你想要的吗？

标签： javascript checkout

【解决方案1】：

这是你可以做的。看起来 Stripe 正在监听表单提交事件，所以您可以为按钮添加一个点击事件监听器

HTML

<form id="btn1" action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_MhUiNzdsSkIvzW5Mpwikw38Z"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png"
    data-locale="auto">
  </script>
</form>

JS：

var btn1 = document.querySelector('#btn1 button');
btn1.addEventListener('click', function(){
  // do stuff for btn1 click
});

【讨论】：

不知道为什么我没有想到这一点。太好了，谢谢。