Braintree payments won't work with AJAX submit

Question

I have a dynamic AJAX submit. I am trying to submit Braintree (PayPal) payment data into payment.php using AJAX. Unfortunately, Braintree is giving me a nonce error. Braintree creates an input with a code (nonce) on submit, but my submit is submitted before the code is created.

Braintree gives me a script that creates the code

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

And I use something like

$(document).on("submit","form",function(event){
  if(!$(this).is("[action]")){
    event.preventDefault()
    formdata=new FormData(this)
    submit(this)
}

submit(this) calls the ajax. I tried to delay the submit, but then nothing works. For example. If I call an alert() during my submit, the code is added and the submit works fine; except for the fact that now I have an alert. The problem is that both codes run at the same time and the Braintree code is too slow to react. I also tried to re-position the link above and below my JS code with no luck.

Answer 1

As mentioned here , I think you should use onPaymentMethodReceived callback from GlobalSetup of BrainTree. Instead of handling form submit on your own using jQuery, you can configure this callback in the setup like below.

    braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", {
      container: "dropin-container",
      onPaymentMethodReceived: function (paymentMethod) {
        // Do some logic in here.
        // When you're ready to submit the form:
        myForm.submit();
      }
   });

The onPaymentMethodReceived is called when a payment_method_nonce has been generated by Drop-in (as the result of a form submission). It will be called with a paymentMethod object, which contains the nonce as a string.

You can find more details here about the paymentMethod object passed to onPaymentMethodReceived callback, it has a property called nonce .

Hope this helps :)

Answer 2

My solution for prevent AJAX submit before nonce receiving. Hope this helps.

braintree.setup('TOKEN-HERE', "dropin", {
  container: "payment-form",
  onPaymentMethodReceived: (obj) ->
    $('form#checkout input#payment_method_nonce').val(obj['nonce'])
    frm = $('form#checkout')
    $.ajax
      type: frm.attr('method')
      url: frm.attr('action')
      data: frm.serialize()
})

$(document).on 'ajax:before', 'form#checkout', ->
  return false unless $('form#checkout input#payment_method_nonce').val()

Answer 3

I wanted to do the same and that's what I did.

• first create the dropin and handle any creation errors till line 8 ,
• then prevent the default submit event to get payment_method_nonce ,
• finally use this method >> requestPaymentMethod( ) << to assign the nonce value.

that's it and don't forget to serialize the form before you send it, hope this will help you 😃

the source code here braintree payments set up your client

var form = document.querySelector('#payment-form');
var client_token = '{{ client_token }}';
console.log(client_token)
braintree.dropin.create({
  authorization: client_token,
  container: '#bt-dropin',
  paypal: { flow: 'vault' }
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();
      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }
        // Add the nonce to the form and submit
        // Submit payload.nonce to your server
        document.querySelector('#nonce').value = payload.nonce;
        //form.submit();
        submit_it(form );
      });
    });
  });


function submit_it(params) {
  params = $(params).serialize()
  $.ajax({
    type:'POST',
    url :  window.location +"checkout/",
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    },
    data:params,
    success: function(data){
      console.log("succeded");
      console.log(data)
    },
    complete: function (xhr, textStatus) {
      console.log(xhr.status);
      if ( xhr.status == 200) {
      //complete code
      }
    },
    error:function(){
      // Do something not that success-ish
      alert( "something gone wrong" );
    }
  });
}