使用 Braintree 自定义表单以编程方式提交答案

【问题标题】：Programmatically Submit with Braintree Custom Form使用 Braintree 自定义表单以编程方式提交
【发布时间】：2016-07-27 05:57:21
【问题描述】：

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

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

【问题讨论】：

为什么 Braintree 没有将处理程序附加到您的按钮？
也许会，但我还没弄清楚怎么做。默认情况下，至少，它只拦截表单内的实际提交按钮。

标签： jquery twitter-bootstrap braintree

【解决方案1】：

您可以做的一件事是在表单本身中提供一个按钮，但将其隐藏。并让引导页脚中的按钮单击真正的按钮。这将允许 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 来说明标记化是成功的，但如果您只想提交表单，则解决方案不是必需的。

【讨论】：

这太棒了！谢谢！

【解决方案2】：

另一种解决方案是以编程方式单击按钮：

<form>
    <div id="braintree-container"></div>
    <input type="submit" style="display: none;">
</form>

<button>Pay</button>

<script type="text/javascript">
    $('button').click(function () {
        $('input[type=submit]').click();
    });
</script>

【讨论】：