Braintree on validation error

Question

I'm using Drop-in UI which is configured in Braintree control panel to automatically verificate if the payment method is legit.

So in my application I disable form submit button when it is clicked, and if user payment method is not legit, it says that there is error and doesn't submits form. My question is how to catch this error so I can enable submit button back.

onError event is thrown only if there are not present all fields in input fields. So what about verification error, how do I catch it?

Right now my javascript looks like this:

braintree.setup("#{@braintree_token}", 'dropin', {
  container: 'dropin',
    onReady: function () {
    },
    onError: function() {
      console.log("error");
      $('#submit-payment').removeClass('disabled');
    }
  });
$("form").submit(function (e) {
  $('#submit-payment').addClass('disabled');
  setTimeout(function() { $('#submit-payment').removeClass('disabled'); }, 2000);
  return;
});

My solution is not ideal right now as it just disables button for 2 seconds. So please suggest me something.

P.S. To be clear I want to catch with Javascript this kind of error:

P.S.S. Also I have found out that it callbacks this info:

/**/callback_jsond435f0d591e44176bf94ec137859dd3c({"error":{"message":"Credit card verification failed"},"fieldErrors":[{"field":"creditCard","fieldErrors":[{"field":"cvv","code":"81736","message":"CVV verification failed"}]}],"status":422})

Answer 1

I’m a developer at Braintree. Currently the Drop-in onError callback will not catch those type of server side validation errors.

If you are still struggling I would recommend reaching out to our support team at [email protected]. They will be able to assist you with the more specifics of your integration.

Answer 2

I know I'm a little bit late to this, but I'll put this here and maybe it'll help someone looking at this thread.

As of the current version (Braintree JavaScript SDK v2), the onError event does in fact trigger for card validation errors. The default behavior is to disable the credit card info box and put the error message that the OP has shown above.

Passing the error response as an argument to your onError function will allow you to determine the type of error that has been thrown, see the message, and perform some custom handling. For example, if you wanted to alert the error message, the code might look like:

braintree.setup("braintree_token", 'dropin', {
 container: 'container',
 onError: onError
});

function onError(err) {
 var errorType = err.type;//access the error type via err.type
 var errorMessage = err.message; //access the error message via err
 //do something helpful for the user via the combination of these two parameters
alert('Braintree returned an error of type: ' + errorType + 'with message' + errorMessage);
}

link to the docs (kinda hard to find cause its nested in with the Drop-In page) : https://developers.braintreepayments.com/guides/drop-in/javascript/v2#onerror