Brainree dropin UI: check custom billing address fields before submitting a form

Question

I installed a user interface to display verification on my page, but I want to check billing and mailing addresses of customers, as well as information about cards in user interfaces before submitting the registration form.

It automatically creates nonce from the server and adds it to our form, but how can I check input and input fields at the same time?

Answer 1

I work for Braintree in the JS SDK team.

Drop-In currently does not allow the creation of fields outside of a credit card, expiration date, CVV, and postal code. However, it is intended to work in the context of your checkout form. If you want Drop-In to automatically submit the form so that you can perform your own validation after creating nonce, you can define a callback in your configuration and then manually resubmit the form when you are satisfied with your results.

However, you must remember to include nonce in the input field with the name that your server is expecting. By default, payment_method_nonce used.

For instance:

 braintree.setup('CLIENT_TOKEN', 'dropin', { paymentMethodNonceReceived: function (event, nonce) { // Simulate your validation setTimeout(function () { var form = document.getElementsByTagName('form')[0]; var input = document.createElement('input'); input.name = 'payment_method_nonce'; input.value = nonce; form.appendChild(input); form.submit(); }, 500); } }); 

More information about this can be found here: https://developers.braintreepayments.com/javascript+node/sdk/client/drop-in

Hope this helps.