nonce value response delay cause send data without nonce value

Question

In my checkout form I have to use some jQuery validation plugin to validate complex validation process, at the end of the track I send form data like this

 $.validate({
        modules: 'security , date',
        onSuccess: function () {
          
               // do Ajax call
            return false;
        },
    });

but also I use Braintree setup like this

 braintree.setup($("#btCilentToken").val(), 'dropin', {
        container: 'dropin', paymentMethodNonceReceived: function (event, nonce) {

           //get nonce save to javascript variable that be used in my final ajax call           
        }
    });

now the problem is

sending form data-> tokenizing begins -> sending form data ends -> (somewhere here the nonce value response back to server) -> tokenizing ends

so I missed the nonce value because of delay

I tried differed object , timeout and some other approach but the problem is the function inside another object prevent me to sort them in proper order

every practice is much appreciated.

Answer 1

The new BT libs solve this problem.

Answer 2

Braintree.js hijacks the form submit event, so you should be able to call $.validate from within the paymentMethodNonceReceived callback and the form will never be submitted. I would imagine your integration would end up looking something like this:

braintree.setup($("#btClientToken").val(), 'dropin', {
  container: 'dropin',
  paymentMethodNonceReceived: function (event, nonce) {
    $.validate({
      modules: 'security , date',
      onSuccess: function () {
        // do Ajax call and use nonce
        return false;
      }
    });
  }
});