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:
- Enable Advanced Fraud Tools in the Control Panel
- Update your client-side integration to collect device data
- 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 usingrequestPaymentMethod
. 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 withrequestPaymentMethod
.
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.