Dropin

Example

dropinInstance.requestPaymentMethod(function (requestPaymentMethodError, payload) {
  if (requestPaymentMethodError) {
    // handle errors
    return;
  }

  functionToSendNonceToServer(payload.nonce, function (transactionError, response) {
    if (transactionError) {
      // transaction sale with selected payment method failed
      // clear the selected payment method and add a message
      // to the checkout page about the failure
      dropinInstance.clearSelectedPaymentMethod();
      divForErrorMessages.textContent = 'my error message about entering a different payment method.';
    } else {
      // redirect to success page
    }
  });
});

Example

var paymentOptions = dropinInstance.getAvailablePaymentOptions(); // ['card', 'venmo', 'paypal']

if (paymentOptions.includes('venmo')) {
  // special logic for when venmo is displayed
}

Example

Subscribe and then unsubscribe from event

var callback = function (event) {
  // do something
};
dropinInstance.on('paymentMethodRequestable', callback);

// later on
dropinInstance.off('paymentMethodRequestable', callback);

Examples

Dynamically enable or disable your submit button based on whether or not the payment method is requestable

var submitButton = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container'
}, function (err, dropinInstance) {
  submitButton.addEventListener('click', function () {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      // Send payload.nonce to your server.
    });
  });

  if (dropinInstance.isPaymentMethodRequestable()) {
    // This will be true if you generated the client token
    // with a customer ID and there is a saved payment method
    // available to tokenize with that customer.
    submitButton.removeAttribute('disabled');
  }

  dropinInstance.on('paymentMethodRequestable', function (event) {
    console.log(event.type); // The type of Payment Method, e.g 'CreditCard', 'PayPalAccount'.
    console.log(event.paymentMethodIsSelected); // true if a customer has selected a payment method when paymentMethodRequestable fires

    submitButton.removeAttribute('disabled');
  });

  dropinInstance.on('noPaymentMethodRequestable', function () {
    submitButton.setAttribute('disabled', true);
  });
});

Automatically submit nonce to server as soon as it becomes available

var submitButton = document.querySelector('#submit-button');

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container'
}, function (err, dropinInstance) {
  function sendNonceToServer() {
    dropinInstance.requestPaymentMethod(function (err, payload) {
      if (err) {
        // handle errors
      }

      // send payload.nonce to your server
    });
  }

  // allows us to still request the payment method manually, such as
  // when filling out a credit card form
  submitButton.addEventListener('click', sendNonceToServer);

  dropinInstance.on('paymentMethodRequestable', function (event) {
    // if the nonce is already available (via PayPal authentication
    // or by using a stored payment method), we can request the
    // nonce right away. Otherwise, we wait for the customer to
    // request the nonce by pressing the submit button once they
    // are finished entering their credit card details. This is
    // particularly important if your credit card form includes a
    // postal code input. The `paymentMethodRequestable` event
    // could fire before the customer has finished entering their
    // postal code. (International postal codes can be as few as 3
    // characters in length)
    if (event.paymentMethodIsSelected) {
      sendNonceToServer();
    }
  });
});

Listen for when the customer navigates to different views in Drop-in

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container'
}, function (err, dropinInstance) {
  dropinInstance.on('changeActiveView', function (event) {
    // fires when the view changes, such as going from the
    // credit card view to the saved payment methods view
    event.oldActivePaymentViewId; // card
    event.newActivePaymentViewId; // methods
  });
});

Listen on various events from the card view

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container'
}, function (err, dropinInstance) {
  dropinInstance.on('card:focus', function (event) {
    // a card field was focussed
  });
  dropinInstance.on('card:blur', function (event) {
    // a card field was blurred
  });
  dropinInstance.on('card:validityChange', function (event) {
    // the card form went from invalid to valid or valid to invalid
  });
});

Examples

Requesting a payment method

var form = document.querySelector('#my-form');
var hiddenNonceInput = document.querySelector('#my-nonce-input');

form.addEventListener('submit', function (event) {
 event.preventDefault();

 dropinInstance.requestPaymentMethod(function (err, payload) {
   if (err) {
     // handle error
     return;
   }
   hiddenNonceInput.value = payload.nonce;
   form.submit();
 });
});

Requesting a payment method with data collector

var form = document.querySelector('#my-form');
var hiddenNonceInput = document.querySelector('#my-nonce-input');
var hiddenDeviceDataInput = document.querySelector('#my-device-data-input');

form.addEventListener('submit', function (event) {
 event.preventDefault();

 dropinInstance.requestPaymentMethod(function (err, payload) {
   if (err) {
     // handle error
     return;
   }
   hiddenNonceInput.value = payload.nonce;
   hiddenDeviceDataInput.value = payload.deviceData;
   form.submit();
 });
});

Requesting a payment method with 3D Secure

var form = document.querySelector('#my-form');
var hiddenNonceInput = document.querySelector('#my-nonce-input');

form.addEventListener('submit', function (event) {
 event.preventDefault();

 dropinInstance.requestPaymentMethod(function (err, payload) {
   if (err) {
     // Handle error
     return;
   }

   if (payload.liabilityShifted || (payload.type !== 'CreditCard' && payload.type !== 'AndroidPayCard')) {
     hiddenNonceInput.value = payload.nonce;
     form.submit();
   } else {
     // Decide if you will force the user to enter a different payment method
     // if liability was not shifted
     dropinInstance.clearSelectedPaymentMethod();
   }
 });
});

Example

dropinInstance.updateConfiguration('paypal', 'amount', '10.00');