jquery - 使用 Braintree 自定义表单以编程方式提交

Question

我有一个位于 Bootstrap 模式内的 Braintree 自定义表单。现在，如果我在表单中放置一个提交按钮，Braintree 表单就可以正常工作。当我单击该提交按钮时，Braintree 会拦截它并运行它的提交处理程序，该处理程序获取随机数，然后将其返回到 onPaymentMethodReceived方法。到目前为止，一切都很好。但是，我想使用模式底部的一个漂亮的 Bootstrap 主题按钮来提交表单，而不是 <form> 中的提交按钮。标签本身。

但是，如果我设置这样一个按钮并给它一个 click $( "#paymentForm" ).submit();的行动，这似乎以传统方式提交，而不是解雇 Braintree 的处理程序。有没有办法以编程方式触发 Braintree 的提交处理程序？

Answer 1

您可以做的一件事是在表单本身中提供一个按钮，但将其隐藏。并让 Bootstrap 页脚中的按钮单击真正的按钮。这将使 Braintree 的表单提交劫持能够正常工作。

<form id="form" method="post" action="/checkout">
  <div id="payment-form"></div>
  <input type="submit" style="position:fixed; top:-200%;left:-200%;" id="real-btn">
</form>
<button type="submit" id="fake-btn">Pay</button>

<script type="text/javascript" src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script>
<script type="text/javascript">
  var clientToken = "YOUR_TOKEN_HERE";
  var fakeBtn = document.getElementById('fake-btn');
  var realBtn = document.getElementById('real-btn');

  braintree.setup(clientToken, 'dropin', {
    container: 'payment-form'
  });

  fakeBtn.addEventListener('click', function (e) {
    realBtn.click();
  });
</script>

此外，这里还有一个codepen using jQuery and Bootstrap在 Bootstrap 模式中完成解决方案。

演示使用这个Bootstrap modal example和 pre-generated client token from the Braintree docs 。它使用 onPaymentMethodReceived callback来说明标记化是成功的，但如果您只想提交表单，则对于解决方案来说不是必需的。