Programmatically Submit mit Braintree Benutzerdefiniertes Formular

Question

Ich habe ein Braintree-benutzerdefiniertes Formular in einem Bootstrap-Modal. Im Moment funktioniert das Braintree-Formular einwandfrei, wenn ich einen Senden-Button innerhalb des Formulars platziere. Wenn ich auf diese Übergabeschaltfläche klicke, fängt Braintree es ab und startet den Submission-Handler, der die Nonce erhält und dann an die onPaymentMethodReceived-Methode zurückgibt. So weit, ist es gut. Aber ich würde gerne einen schönen Bootstrap-Button am unteren Ende des Modals verwenden, um das Formular und nicht einen Absenden-Button innerhalb des Tags <form> selbst zu senden.

Allerdings, wenn ich eine solche Schaltfläche einrichten und geben Sie eine click Aktion von $("#paymentForm").submit();, scheint es, um es in einer traditionellen Art und Weise statt Braintree Handler auslösen. Gibt es eine Möglichkeit, Braintrees Submission-Handler programmgesteuert auszulösen?

Answer 1

Eine Sache, die Sie tun können, ist, einen Knopf im Formular selbst zur Verfügung zu stellen, aber haben Sie es versteckt. Und klicken Sie in der Bootstrap-Fußzeile auf die Schaltfläche "Real". Dies ermöglicht es dem Braintree Formular, Hijacking korrekt zu starten.

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

Zusätzlich ist hier ein codepen using jQuery and Bootstrap die Lösung in einer Bootstrap modal zu erreichen.

Die Demo verwendet diese Bootstrap modal example und die pre-generated client token from the Braintree docs. Es zeigt anhand der onPaymentMethodReceived callback, dass die Tokenisierung ein Erfolg war, aber für die Lösung nicht erforderlich ist, wenn Sie das Formular nur senden möchten.

Answer 2

Eine andere Lösung ist auf die Schaltfläche klicken, um programmatisch:

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