Payment Method Types/
ACH Direct Debit/
Instant Verification/
Instant Verification Client-side

Client sideAnchorIcon

Initialize the componentAnchorIcon

  1. Initialize a client using the the client token from your server
  2. Create the Instant verification component
  1. javascript
// Create client instance
  braintree.client.create({
    authorization: clientToken
  }, function(clientErr, clientInstance) {
    if (clientErr) {
      console.error('Error creating client:', clientErr);
      return;
    }
    // Create Instant Verification instance
    braintree.instantVerification.create({
      client: clientInstance
    }, function(err, instantVerificationInstance) {
      // Remaining instant verification flow
      if (err) {
        console.error('Error creating Instant Verification:', err);
        return;
      }
    });
  });

Launch Instant Verification flowAnchorIcon

  1. Add a click event listener to the button that calls startPayment, which starts the Instant Verification flow.
  2. The customer will be redirected to the Instant Verification experience.
  3. The customer will be prompted to select their bank and connect their bank account.
  4. Upon completion, the customer will be redirected back to the returnURL
  1. javascript
document.getElementbyId('openBankButton').on('click', () => {
  instantVerificationInstance.startPayment({
        jwt: jwt
    }, function(paymentErr, result) {
        if (paymentErr) {
          console.error('Instant Verification flow failed:', paymentErr);
        } else {
          console.log('Instant Verification completed:', result);
        }
  });
});

Handle redirectAnchorIcon

Handle redirect back to your website from the Instant verification experience
  1. javascript
const urlParams = new URL(window.location.href).searchParams;
 instantVerificationInstance.handleRedirect({
   success: urlParams.get('success');,
   cancel: urlParams.get('cancel');,
   error: urlParams.get('error');
 })
 .then((result) => {
   if (result) {
     console.log('nonce: %s', result);
     // Send nonce to server
   } else {
     console.log('empty result');
   }
 })
 .catch((err) => {
   console.error(error: ${JSON.stringify(err)});
 })

Retrieve bank details for ACH mandateAnchorIcon

For all ACH transactions, you are required to collect a mandate or “proof of authorization” from the customer to prove that you have their explicit permission to debit their bank account.
  1. Retrieve the customer’s bank details to display an accurate ACH mandate
  2. Show the required authorization language for your use-case in your checkout flow after the user returns from the Instant Verification experience
  3. Pass text as mandateText (required) to Braintree on vault or transaction.
  1. javascript
instantVerificationInstance.getAchMandateDetails({
  mandateId: 'nonce-id-from-tokenization'
})
.then(function (mandateDetails) {
  // use the bank info in mandateDetails to display
  // the mandate text to the buyer
.catch(function (err) {
  if (err.code === 'INSTANT_VERIFICATION_MANDATE_ID_REQUIRED') {
    console.error('A mandate ID is required');
  } else if (err.code === 'INSTANT_VERIFICATION_MANDATE_DETAILS_FAILED') {
    console.error('Failed to fetch bank details:', err);
  }
});