Braintree- How To Refresh Drop-in Ui?

- 1 answer

Suppose a user submits a form with braintree drop-in ui. The nonce is sent and consumed, but we get an error call back. I want to refresh the braintree drop-in ui such that the form can be resubmitted without getting a 'one-time use nonce error'.

I had an idea to use teardown, but teardown is only available onReady.

How can I 'refresh' drop-in ui and preserve user inputs?



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

Teardown will not preserve the inputs, as it completely removes the integration from the page.

The feasibility of this will largely depend on the kind of error you're getting back. If the error is with the credit card details, there's really no way of preserving the inputs as refreshing the page will re-load Drop-in and using the onPaymentMethodReceived callback and posting the data programmatically will leave Drop-in looking like this:

Drop-in After Callback

If the problem was with the credit card your user would still need to click the "change payment method" link and fill in the card details.

Alternatively, if instead the error is with something you control - like invalid fields for other inputs - you can always add the customer using the payment method nonce or add a new payment method to an existing customer. Then, when your customer fixes whatever error occurs, you can transact on the payment method token instead of the expired nonce.