Default icon

Drop-in optional configuration

Add optional configuration to your Drop-in integration.

View source

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 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:

Import Adyen Web into your application.

When you import individual payment methods, you must include the paymentMethodComponents parameter in your Drop-in configuration, specifying an array of the payment methods you imported.

AdyenCheckout object

The AdyenCheckout object represents one 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:
donation An object for configuring 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 , deliveryAddress , shopperEmail , or 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. 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 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 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 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, 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 and Google Pay.
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.
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} response.

See also