--- title: "Drop-in optional configuration" description: "Add optional configuration to your Drop-in integration." url: "https://docs.adyen.com/standard/integration/drop-in/optional-drop-in-configuration" source_url: "https://docs.adyen.com/standard/integration/drop-in/optional-drop-in-configuration.md" canonical: "https://docs.adyen.com/standard/integration/drop-in/optional-drop-in-configuration" last_modified: "2026-06-11T16:00:17+02:00" language: "en" --- # Drop-in optional configuration Add optional configuration to your Drop-in integration. [View source](/standard/integration/drop-in/optional-drop-in-configuration.md) You can add configuration for additional customization of the payment flow. ## Import Drop-in with individual payment methods To reduce bundle size, you can use [tree shaking](https://webpack.js.org/guides/tree-shaking/) to import only the payment methods you use. The smaller bundle size speeds up loading time. When you add a payment method after creating your integration, you must also import it. Install the [Adyen Web Node package](https://www.npmjs.com/package/@adyen/adyen-web): ```bash npm install @adyen/adyen-web --save ``` Import Adyen Web into your application. ```js import { AdyenCheckout, Dropin, Card, GooglePay, PayPal } from '@adyen/adyen-web'; import '@adyen/adyen-web/styles/adyen.css'; ``` When you import individual payment methods, you must include the `paymentMethodComponents` parameter in your [Drop-in configuration](#dropin), specifying an array of the payment methods you imported. ## AdyenCheckout object The `AdyenCheckout` object represents one payment [session](#create-payment-session). When you create it, you can set additional configuration parameters and event handlers. ### Configuration parameters | Parameter name | Required | Description | | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `secondaryAmount` | | Shows the payment amount in an additional currency on the **Pay** button. You must do the currency conversion and set the amount. This object has properties:- `currency`: The three-character [ISO currency code](/development-resources/currency-codes). - `value`: The amount of the transaction, in [minor units](/development-resources/currency-codes). - `currencyDisplay`: Sets the [currency formatting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay). Default: **symbol**. | | | | | | `donation` | | An object for configuring [donations](/standard/integration/drop-in/donations). | ### Event handlers | Event handler name | Required | Description | | ---------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `beforeSubmit(data, component, actions)` | | Create an event handler, called when the shopper selects the **Pay** button. Allows you to add parameters to the payment request that Drop-in makes. For example, you can add shopper details like [`billingAddress` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/payments__reqParam_billingAddress), [`deliveryAddress` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/payments__reqParam_deliveryAddress), [`shopperEmail` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/payments__reqParam_shopperEmail), or [`shopperName` ](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/payments__reqParam_shopperName). When the `beforeSubmit` event is triggered, you need to continue or stop the payment flow using methods available in the event handler:- Continue the payment flow (`actions.resolve()`): You should call the `actions.resolve()` method regardless of the `resultCode`, including when the payment is unsuccessful. - Stop the payment flow (`actions.reject()`): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues. | | []()`onActionHandled` | | Create an event handler, called when an action, for example a QR code or 3D Secure 2 authentication screen, is shown to the shopper. The following `action.type` values trigger this callback:- `threeDS` - `qr` - `await`Returns data that contains:- `componentType`: The type of component that shows the action to the shopper. - `actionDescription`: A description of the action shown to the shopper. | | `onChange(state, component)` | | Create an event handler, called when a change happens in the payment form. | ## Drop-in instance The instance of `Dropin` represents the UI that the shopper interacts with to make a payment. ### Configuration parameters | Parameter name | Required | Description | | ------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `paymentMethodComponents` | If you [imported Drop-in with individual payment methods](#import-drop-in-with-individual-payment-methods). | An array of the payment methods that you imported. For example: `[Card, PayPal, GooglePay, ApplePay, Ideal]`. | | `paymentMethodsConfiguration` | | Configuration for individual payment methods. The [payment method guide](/payment-methods) for the individual payment method shows required and optional configuration. If you include this in the configuration on your instance of `Dropin`, it overrides global payment method configuration on your instance of `AdyenCheckout`. | | `openFirstPaymentMethod` | | When enabled, Drop-in opens the first payment method automatically on page load. Default value: **true**. | | `openFirstStoredPaymentMethod` | | When enabled, Drop-in opens the payment method with stored card details on page load. This option takes precedence over `openFirstPaymentMethod`. Default value: **true**. | | `openPaymentMethod.type` | | Automatically selects the specified payment method when Drop-in renders. Set the [payment method type](/payment-methods/payment-method-types/) that you want to be automatically selected as the value. | | `showStoredPaymentMethods` | | Shows or hides payment methods with stored card details. Default value: **true**. | | `showRemovePaymentMethodButton` | | Allows the shopper to remove a stored payment method. Default value: **false**. If using this prop, you must also implement the `onDisableStoredPaymentMethod` callback. | | `showPaymentMethods` | | Shows or hides regular (not stored) payment methods. Set to **false** if you only want to show payment methods with stored card details. Default value: **true**. | | `paymentMethodsConfiguration` | | Configuration for individual payment methods. The [payment method guides](/payment-methods) have configuration options specific to each payment method. If you include this in the configuration on your instance of `DropIn`, it overrides global payment method configuration on your instance of `AdyenCheckout`. | | `redirectFromTopWhenInIframe` | | If your Drop-in is inside of an [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), set to **true** if you want redirects to be performed on the top-level window. We recommend that you do not put Drop-in in an iframe. | | `instantPaymentTypes` | | Moves payment methods to the top of the list of available payment methods. This is available for [Apple Pay](/payment-methods/apple-pay/web-drop-in#instant-payment-button-configuration) and [Google Pay](/payment-methods/google-pay/web-drop-in#instant-payment-button-configuration). | | `disableFinalAnimation` | | When enabled, disables the final animation after a shopper completes the payment (whether successful or failed). This lets you implement your own post-payment UI. Default value: **false**. | | `showRadioButton` | | When enabled, payment methods in the Drop-in have a [radio button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio). Default value: **false**. | ### Event handlers | Event handler name | | Description | | ---------------------------------------------------------------------- | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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 **DELETE** `storedPaymentMethods` request using the `storedPaymentMethodId`. Then call either `resolve()` or `reject()`, depending on the [/storedPaymentMethods/{storedPaymentMethodId}](https://docs.adyen.com/api-explorer/Checkout/latest/delete/storedPaymentMethods/\(storedPaymentMethodId\)) response. | **Drop-in configuration (when importing individual payment methods)** ```js const dropinConfiguration = { // Required if you import individual payment methods. paymentMethodComponents: [Card, PayPal, GooglePay, ApplePay, Ideal], // Optional configuration. onReady: () => {}, instantPaymentTypes: ['applepay', 'googlepay'] }; ``` ## See also * [Optional server configuration](/standard/integration/drop-in/optional-server-configuration) * [Customize the checkout experience](/standard/integration/drop-in/customize-checkout)