Display a saved payment method

If you pass a customer_id when generating a client token, Drop-in will display that customer's saved payment methods and automatically add any newly-entered payment methods to their Vault record.

If vaulted payment methods exist, this is how they will appear in Drop-in.

Advanced Fraud Tools

To use Advanced Fraud Tools for your Drop-in form, you'll need to complete these 3 steps at the same time:

1. Enable Advanced Fraud Tools in the Control Panel
2. Update your client-side integration to collect device data
3. Updating your server-side integration to pass device data on transaction and verification requests

If there is any delay between enabling in the Control Panel and making the code changes, the integration will not work properly. See the Advanced Fraud Tools guide for more details.

Events

Drop-in events allow you to customize your form based on the state of the form and whether or not a payment method is requestable.

• paymentMethodRequestable fires when a payment method can be retrieved using requestPaymentMethod. The event includes an object that provides the type of payment method (CreditCard, PayPalAccount, etc) that is ready to be requested.

• noPaymentMethodRequestable fires when a payment method can no longer be retrieved with requestPaymentMethod.

A common use case for these events includes disabling and enabling your submit button based on the state of the form. For an example, see our reference documentation for events.

Customize your UI

CSS

Most elements in Drop-in have a data-braintree-id attribute that can be used for applying specific styles. For example, if you wanted to hide the Choose another way to pay toggle, you could add the following to your CSS:

[data-braintree-id="toggle"] {
  display: none;
}

When updating your version of Drop-in, check to make sure any custom CSS is unaffected by changes. We do not recommend applying styles based on Braintree provided class names because these are subject to change from version to version. These class names start with .braintree-, such as .braintree-dropin.

PayPal button

To change the PayPal button in Drop-in, pass a buttonStyle object into the paypal options of your create call:

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  paypal: {
    flow: 'checkout',
    buttonStyle: {
      color: 'blue',
      shape: 'rect',
      size: 'medium'
    }
  }
});

See PayPal's developer docs for more details on button customization.