9

I'm trying to implement the Braintree Drop-in UI and I want to send the form using a custom jQuery ajax method. Previously, I used to send the (non drop-in UI) form using the jQuery serialize() method, but for the new (dynamically loaded) Dropin UI form the serialize() method doesn't seem to be working (the payment_method_nonce value is set to empty). However, sending the form through a basic html form (without ajax) seems to be working fine, so my payment_method_nonce is there, its just getting lost along the way.

How can I make sure that the serialize() method doesn't lose the payment_method_nonce value?

Or as a more general question, how can I send the Drop-in UI form using ajax?

I know that there's a paymentMethodNonceReceived flag to use when doing the braintree.setup, but that doesn't work in my case as I need to keep the code for sending request / handling the response separated from the braintree.setup.

Cheers

Martin
  • 1,916
  • 2
  • 25
  • 37

1 Answers1

13

Apparently the paymentMethodNonceReceived method was the way to go in the end. Once the token is created I use it to create a hidden field which is part of the form, which can then be serialised using the serialize() method without any problem. Here's a code sample: 

<script type="text/javascript">
    braintree.setup("PaymentTokenGoesHere", "dropin", {
        container: "myDiv",
        paymentMethodNonceReceived: function (event, nonce) {
            $('#myForm').append("<input type='hidden' name='payment_method_nonce' value='" + nonce + "'></input>");
            CallAjaxMethod();
        }
    });
</script>
Martin
  • 1,916
  • 2
  • 25
  • 37
  • 6
    I work at Braintree on the SDK Team. This is the method I would have suggested. Glad it worked out. – kdetella Mar 10 '15 at 12:38
  • @kdetella, thanks for the answer. How would you add the device_data value for the Kount integration in the same way (i.e. for an ajax request)? – Martin Mar 11 '15 at 04:40
  • 1
    Note that you have to trigger your AjaxMethod() from within this callback, it's not possible to trigger it from a button outside the form. Otherwise you won't get the payment_method_nonce. It may be obvious to some but if you don't you waste time. A submit button is mandatory within the form. – comte May 13 '15 at 21:20
  • 4
    **``paymentMethodNonceReceived`` no longer works**. It's been deprecated in favor of ``onPaymentMethodReceived``. To get the nonce: ``onPaymentMethodReceived: function(obj) { console.log( obj['nonce'] ); }`` – William Sep 16 '15 at 19:50
  • I have recently implemented branintree payment with node.js and mongodb. Braintree has provided a good documentation at this. However, imho, it's still not really user friendly as it's a bit scatter. Hence, I have decided to write up an end-to-end integration at http://enormers.com/blog/implement-braintree-payment-with-nodejs-and-mongodb/ … Let me know if you find this post useful – Mark Thien Dec 13 '15 at 11:20
  • @Blizwire would you be able to expand upon how you submitted the form params with your custom ajaxmethod. I am trying to implement this using rails built in ujs with ajax but having trouble with form submitting parameters before the nonce is received, thanks – Richlewis Feb 05 '16 at 11:42
  • @comte: I got confused. How can we retrieve the payment_method_nonce then submit the form? because we have it returned only after user submits the form https://developers.braintreepayments.com/start/overview#payment-method-nonce – JNN May 22 '16 at 18:12