Question

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

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

Answer 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来说明标记化是成功的，但如果您只想提交表单，则不需要解决方案。

Answer 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>

以编程方式提交Braintree自定义表单

2 个答案: