5

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: enter image description here

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})

enter image description here

Silverfall05
  • 1,107
  • 14
  • 28
  • Have the exact same problem right now, have you found a workaround by any chance? – Etienne May 18 '16 at 00:53
  • @Etienne No. The one way is to build your own form with as documentation suggests. The other way is to try to catch somehow this callback in my screenshot. Please let me know if you succeed with second. – Silverfall05 May 18 '16 at 06:06
  • I was in touch with braintree and they gave me a workaround which in my case works but not sure about yours. We disable the credit card verification in the settings and the error can be trapped by our server side implementation. – Etienne May 18 '16 at 06:45

2 Answers2

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

Teal Hobson-Lowther
  • 21
  • 3
0

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 support@braintreepayments.com. They will be able to assist you with the more specifics of your integration.

jerry
  • 312
  • 1
  • 5
  • something changed? :) – Silverfall05 Feb 24 '16 at 07:59
  • This directly contradicts your documentation which says this occurs "when a card number fails server-side validation", and it doesn't make sense that `onError` catches some errors and not others. It's a shame the documentation is in such a sorry state. – p4sh4 Apr 27 '16 at 11:43