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'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

• javascript
• jquery
• braintree

Share Improve this question Follow asked Feb 5, 2015 at 11:48 Stefano AltieriStefano Altieri 4,62811 gold badge2626 silver badges4141 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 plex 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!

Braintree is about to add such a callback. Here's the github issue: https://github./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
        }
    }
});

I made a working example of how to use Braintree with WebForms.

https://github./StavrosD/BrainTree-PayPal-DotNet

I describe on the README.md the workflow.