Disabling submit with hosted fields

[rickhall]

I had contacted support with this question, but I'll re-enter it here to capture it.

I am using custom integration with hosted fields and I would like to disable the submit button while waiting to get the payment nonce. My current approach is to:

1. Add a submit listener on the form which always disables the submit UI button upon seeing a submit event.
2. In braintree onError callback, I re-enable submit button in case of any validation errors.
3. In onPaymentMethodReceived callback, I then send the payment nonce to my server.

This basically works ok and prevents duplicate submits if and only if the user clicks on the “submit” button.

Unfortunately, if the user uses the "return" key to submit the form, then the native submit event isn’t fired. This makes it so I cannot give my user any visual feedback that something is going on, increasing the likelihood that they may try to resubmit if it takes a long time.

Perhaps I’m missing something, but I’ve searched the web a bit and it seems that a lot of people want to do this flow, but it is more difficult than it seems it should be. It seems like adding some sort of “beforeSubmit” callback after everything is validated, but just before submitting to braintree server would make this flow a lot more intuitive.

Thanks.

[lilaconlee]

Unfortunately, the behavior you've described is not something we currently support. That being said, we totally understand this use case and are including this functionality in the next major version of our SDK. We'll update you here when it is available!

[rickhall]

Thanks for the response and, yes, definitely report back and close this issue when you have something available.

[ds00424]

Hmmm. I have a click event where I disable the Submit button and that seems to work when is hit.
JS/Jquery code (which is probably obvious :-)
$("#myForm button[type=submit]").click(function() {
$(this).prop('disabled', true); // Disable the Submit button so it can't be clicked again
$("#ErrorSummary").html("")
});

Not sure if the declaration order matters, but the click event is defined early on.

HTH

[rickhall]

Yes, if you disable the submit button, then the user is not able to click it. However, if the user presses "return" to submit the form, then there is no click on the submit button, but the form is still submitted. Further, if you disable the submit button, the user is still able to press "return" to submit the form again...at least for me.

[mrak]

@rickhall you are correct. Upon hitting enter within one of Hosted Fields' inputs we attempt to tokenize the card data and submit the form, bypassing any JavaScript handlers, including disabled buttons. Not the friendliest way to do things if you need to get some code inbetween the lifecycle stages of user interaction, tokenization, and submission.

One of our goals for the next major version of our SDK is to eliminate any dependency on forms and their submit events. We are actively working on this next release and will update this issue when it is available.

[rickhall]

@mrak Yes, that was my understanding from the previous discussion, so I look forward to it. I was just responding to @ds00424 . Thanks again.

[ds00424]

@rickhall - Ah, what I was missing was if the return is hit when within one of the hosted fields. I have other fields in the form and if the return is hit when within one of those fields - the click event fires. Thx.

[godza]

@mrak Any way you can provide event callback in setup options that will be triggered when tokenizing card data and submitting form, so we can hook up to that callback (onPaymentMethodRequested or something like that)?

[mrak]

If you use onPaymentMethodReceived we will call it instead of submitting the form.

[godza]

I know, i meant in context of this issue, you can use new event that will be triggered when you start submitting data to braintree servers. That way, we can use that new event to disable the button, hide the form or do whatever until we receive the response with onPaymentMethodReceived. That new event need to be triggered either by user submitting the form, or pressing enter key in hosted fields. That would solve the problem OP (and me) has

[mrak]

Ah, sorry for the misinterpretation.

While we likely will not add more lifecycle hooks to our current SDK version, our current work on the next major version directly addresses this issue.

[godza]

Great. Until then :)

[godza]

Not trying to be pain in the ass but, is there ETA for 3.0.0?

Thanks