Are you looking for test card numbers?

Would you like to contact support?

Default icon

Optional configuration

Add features and customize the checkout flow for your shoppers.

Configuration hierarchy

The dropin instance only accepts parameters related to itself. You must set global or component-specific configuration either on the main instance, AdyenCheckout , or in the paymentMethodsConfiguration object.

Any configuration on paymentMethodsConfiguration overrides configuration set globally, on AdyenCheckout.

const checkout = await AdyenCheckout({
    onError: () => {}, // Global configuration for onError
    paymentMethodsConfiguration: {
        card: {
            onError: () => {}, // onError configuration for card payments. Overrides the global configuration.

checkout.create('dropin', {
    onReady: () => {}, // Drop-in configuration only has props related to itself, like the onReady event. Drop-in configuration cannot contain generic configuration like the onError event.

Drop-in configuration

These parameters are specific to Drop-in and are only accepted on the dropin instance.

Parameter name Description
openFirstPaymentMethod When enabled, Drop-in opens the first payment method automatically on page load. Defaults to true.
openFirstStoredPaymentMethod When enabled, Drop-in opens the payment method with stored card details on page load. This option takes precedence over openFirstPaymentMethod. Defaults to true.
showStoredPaymentMethods Shows or hides payment methods with stored card details. Defaults to true.
showRemovePaymentMethodButton Allows the shopper to remove a stored payment method. Defaults to false.
showPaymentMethods Shows or hides regular (not stored) payment methods. Set to false if you only want to show payment methods with stored card details. Defaults to true.
setStatusAutomatically v 4.7.0 Set to false to not set the Drop-in status to 'loading' when onSubmit is triggered. Defaults to true.
onReady() Called when Drop-in is initialized and is ready for use.
onSelect(component) Called when the shopper selects a payment method.
onDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject) Called when a shopper removes a stored payment method. To remove the selected payment method, make a /disable request using the storedPaymentMethodId. Then call either resolve() or reject(), depending on the /disable response.
instantPaymentTypes Moves payment methods to the top of the list of available payment methods. This is available for Apple Pay and Google Pay.


Method name Description
mount(selector) Mounts the Drop-in into the DOM returned by the selector.
The selector must be either a valid CSS selector string or an HTMLElement reference.
unmount() Unmounts the Drop-in from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.
closeActivePaymentMethod() Closes a selected payment method, for example if you want to reset the Drop-in.

AdyenCheckout configuration

The following parameters must be set on the AdyenCheckout main instance.

Parameter name Description
amount Amount to be displayed on the Pay Button. It expects an object with the value and currency properties. For example, { value: 1000, currency: 'USD' }.
showPayButton Show or hides a Pay Button for each payment method. Defaults to true. The Pay button triggers the onSubmit event when payment details are valid.
If you want to disable the button and then trigger the submit flow on your own, set this to false and call the .submit() method from your own button implementation. PayPal Smart Payment Buttons doesn't support the .submit() method.
locale The language used in the Drop-in UI. For possible values, see the list of available languages.
By default, this is the either the shopperLocale from your /sessions request or, if this locale is not available on Drop-in, en-US.


Event name Description
beforeSubmit(data, component, actions) Create an event handler, called when the shopper selects the Pay button. Do not use if you're implementing an advanced use case.
Allows you to add details which Drop-in will send in the payment request to Adyen's servers. For example, you can add shopper details like billingAddress , deliveryAddress , shopperEmail , or shopperName . The actions object has two functions:
  • actions.resolve(data): passes the data to Adyen's servers.
  • actions.reject(): cancels the flow.
onError(error) Create an event handler, called when an error occurs in Drop-in.
onChange(state, component) Create an event handler, called when the shopper provides the required payment details.
onSubmit(state, component) Required if you need to update the payment amount after rendering Drop-in. For this advanced use case, you need to integrate additional endpoints.
Creates an event handler, called when the shopper selects the Pay button and payment details are valid.
onAdditionalDetails(state, component) Required if you need to confirm an additional action on your server. For this advanced use case, you need to integrate additional endpoints.
Create an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.