Braintree dropin UI : validate billing address custom fields before form submit

Question

I have set up a drop-in UI in my checkout page but I want to validate customers' billing and shipping addresses as well drop-in UI card details before submitting the checkout form.

It automatically creates nonce from server and appends it into our form, but how can I validate the drop-in and address fields at the same time?

Answer 1

I work at Braintree on the JS SDK team.

Currently the Drop-In does not allow for fields beyond Credit Card, Expiration, CVV and Postal Code. However, it is designed to work within the context of your checkout form. If you would like to prevent Drop-In from auto-submitting the form so that you can run your own validation once a nonce has been generated, you can define a callback in your configuration and then manually re-submit the form when you are satisfied with your results.

You will however have to remember to include the nonce in an input field with a name that your server is expecting. The default is payment_method_nonce.

For example:

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 around this can be found here: https://developers.braintreepayments.com/javascript+node/sdk/client/drop-in

I hope this helps.