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.

De-select a payment method

You can programmatically clear the customer's selected payment method with clearSelectedPaymentMethod. This is useful when the transaction fails and you want to show an error message that prompts the customer to select a different payment method. The customer will be presented with a list of other saved payment methods (if applicable) and the option to enter a new payment method.

sendNonceToServer(nonce, function (transactionError, response) {
  if (transactionError) {
    // Clear selected payment method and add a message
    // to the checkout page about the failure.
    dropinInstance.clearSelectedPaymentMethod();
    errorMessagesDiv.textContent = 'Transaction failed. Please select a different payment method.';
  } else {
    // Success
  }
});

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. Update 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.

Cardholder name

If you would like to display an optional cardholder name field, you can add a cardholderName property to the card options when creating a Drop-in instance.

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    cardholderName: true
  }
});

You can make cardholder name a required field by setting cardholderName to {required: true}. See the reference documentation for more details on the configuration options.

Field overrides

All override options available in Hosted Fields can also be applied to Drop-in. To change field options, such as a field's placeholder text, add an overrides object to the card section of the create options.

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      fields: {
        number: {
          placeholder: 'Card Number',
          formatInput: false // Turn off automatic formatting
        }
      }
    }
  }
});

The overrides object can also be used to alter the styling of card fields with a styles object. You can override styles for all fields of a specific element type (such as input) or individual fields (such as .number), as well as element states (such as :focus or .invalid).

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  card: {
    overrides: {
      styles: {
        input: {
          color: 'blue',
          'font-size': '18px'
        },
        '.number': {
          'font-family': 'monospace'
          // Custom web fonts are not supported. Only use system installed fonts.
        },
        '.invalid': {
          color: 'red'
        }
      }
    }
  }
});

See the Hosted Fields reference documentation on field options and style options for more details.

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.