Braintree Drop-in UI - send form using AJAX

Question

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

Answer 1

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>