Braintree drop-in, disable submit button while processing

Question

I'm trying to do something that seems easy but I cannot get it to work. I'm using Braintree dropin UI and I have submit button. I need to disable the button while processing and I cannot find a good event to attach to.

var ct = 'tokenhere';
var bt = braintree.setup(ct, 'dropin', {
  container: 'braintreedropin',
});

<form id="PayByBrainTreeCheckout" method="post">
  <div id="braintreedropin"></div>       
  <input type="submit" value="Pay">                          
</form>

I tried $('#PayByBrainTreeCheckout').submit(function(){/*disable button*/}) but this is also disabling the button if there is a validation error in the form.

Any ideas? Thanks

Answer 1

I work at Braintree as well. You're correct that the customer can hit the submit button twice while the transaction is being submitted, but you don't have to worry about the customer being charged twice, as the second transaction will fail (the nonce generated by the credit card can only be used once). Furthermore, the immediate visual feedback on the form after submission is designed to let customers know their button press is being processed.

If you do want to do more complex things (such as adding a custom callback to disable the submit button), our custom integration is a good option.

As Mat mentioned, feel free to reach out to [email protected] if you need further assistance with your integration!

Answer 2

Braintree is about to add such a callback. Here's the github issue: https://github.com/braintree/braintree-web/issues/38

Will result in something like this:

braintree.setup(TOKEN, 'dropin', {
    container: 'my-container',
    onError: function (payload) {
        if (payload.type === 'validation:failed') {
            // re-enable button
        }
    }
});