Is there any way to detect a drop-in braintree.js form's submit click?

I'm using a braintree.js drop in form. I'm submitting it with ajax, by registering for the onPaymentMethodReceived callback. So far so good, it works fine.

However, after submitting the form, there's a two step process: first the payment details are submitted to braintree and verified (while a spinner shows over the form), then the details on the page are anonymised, and the onPaymentMethodReceived callback fires with a nonce I can use to send to my server.

The problem is I'd like to disable the form submission button when it's clicked, but registering an onClick handler on it causes braintree to ignore the click.

I understand that the customer's card details are visible on the page at this point, but I can't grab them anyway due to the iframe being from a different domain, and any potential method I could use at this point to grab the details I could do with setInterval() anyway, so I don't really see a security case for this.

Is there any way to detect the click here?

Solution

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

To my knowledge you can't jump in the middle of the tokenization process with the Drop-In. It sounds like you are looking to create a custom experience for your users that steps beyond the Drop-In use case.

Enabling a form submit button after the onPaymentMethodReceived callback is the common Drop-In use flow, but by creating a custom integration you can directly handle the client-side tokenization process and wrap it with whatever functionality you need:

var client = new braintree.api.Client({clientToken: "CLIENT-TOKEN-FROM-SERVER"});

client.tokenizeCard({
  number: "4111111111111111",
  expirationDate: "10/20"
}, function (err, nonce) {
  // Send nonce to your server
});