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

score 3 · Accepted Answer · answered Feb 05 '15 at 23:24

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 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 support@getbraintree.com if you need further assistance with your integration!

answered Feb 05 '15 at 23:24

cdeist

229
2
6

Thanks @cdeis . Eventually I went with the custom integration. It was easier than expected :) – Stefano Altieri Feb 06 '15 at 08:19
Great! Glad to hear it. – cdeist Feb 06 '15 at 14:54
I don't think this will work when dealing with subscriptions. I use the nonce to create a payment method then create a transaction using the stored payment method. So, the second transaction will succeed. – Lem Ko Apr 29 '15 at 05:06
Allowing double submits and hoping for the best is a poor design. There should really be an event that is fired after requestPaymentMethod completes and the form is being submitted. – yakattack Jul 18 '18 at 22:07

score 2 · Answer 2 · answered May 29 '15 at 12:39

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

answered May 29 '15 at 12:39

Tobias Lorenz

1,426
11
17

3

It would be much nicer to have some sort of "beforeSubmit" callback so we could make sure our UI was in a good state while waiting for the braintree response. The idea that we should just accept duplicate requests hoping the second fails gracefully is kind of silly. – Richard S. Hall Apr 07 '16 at 19:04

score -1 · Answer 3 · answered Jan 24 '19 at 23:21

-1

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

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

I describe on the README.md the workflow.

answered Jan 24 '19 at 23:21

Stavros Dimopoulos

1
1

I'm not convinced this will help the OP's dilemma. – Dan Jan 24 '19 at 23:44
It is a direct answer to the initial post. It is a working example that has a workaround for the problem. – Stavros Dimopoulos Apr 08 '19 at 00:51

Braintree drop-in, disable submit button while processing

3 Answers3