用Braintree自定義窗體以編程方式提交

我有一個位於Bootstrap模式內的Braintree自定義窗體。現在，如果我在表單中放置一個提交按鈕，Braintree表單可以正常工作。當我點擊提交按鈕時，Braintree會攔截它並運行提交處理程序來獲取隨機數，然後將其返回到onPaymentMethodReceived方法。到現在爲止還挺好。但是，我想在模式底部使用一個漂亮的Bootstrap主題按鈕來提交表單，而不是在<form>標記本身內提交按鈕。但是，如果我設置了這樣一個按鈕並給它一個$("#paymentForm").submit();的動作，那麼似乎以傳統的方式提交它，而不是觸發Braintree的處理程序。有沒有辦法以編程方式觸發Braintree的提交處理程序？用Braintree自定義窗體以編程方式提交

來源

2016-07-27 Timothy R. Butler

爲什麼布倫特裏沒有一個處理程序連接到您的按鈕？ – raduation

也許會，但我還沒有弄清楚如何去做。默認情況下，至少它只攔截表單內的實際提交按鈕。 –

你可以做的一件事就是在窗體本身中提供一個按鈕，但隱藏它。並讓引導頁腳中的按鈕單擊真正的按鈕。這將允許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來說明標記化是成功的，但如果您只想提交表單，則不需要該解決方案。

來源

2016-07-28 21:14:16 BladeBarringer

這太棒了！謝謝！ –

另一個解決方案是在按鈕點擊程序：

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

來源

2017-06-26 13:43:30 vbarbarosh

用Braintree自定義窗體以編程方式提交

回答

相關問題