{"title":"Drop-in optional configuration","category":"default","creationDate":1781186417,"content":"

You can add configuration for additional customization of the payment flow.<\/p>\n

Import Drop-in with individual payment methods<\/h2>\n

To reduce bundle size, you can use tree shaking<\/a> 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.<\/p>\n

Install the Adyen Web Node package<\/a>:<\/p>\n

\n <\/code-sample>\n<\/div>\n

Import Adyen Web into your application.<\/p>\n

\n <\/code-sample>\n<\/div>\n

When you import individual payment methods, you must include the paymentMethodComponents<\/code> parameter in your Drop-in configuration<\/a>, specifying an array of the payment methods you imported.<\/p>\n

AdyenCheckout object<\/h2>\n

The AdyenCheckout<\/code> object represents one payment session<\/a>. When you create it, you can set additional configuration parameters and event handlers.<\/p>\n

Configuration parameters<\/h3>\n\n\n\n\n\n\n<\/tr>\n\n
Parameter name<\/th>\nRequired<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
secondaryAmount<\/code><\/td>\n<\/td>\nShows the payment amount in an additional currency on the Pay<\/strong> button. You must do the currency conversion and set the amount.
This object has properties:
donation<\/code><\/td>\n<\/td>\nAn object for configuring donations<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Event handlers<\/h3>\n\n\n\n\n\n\n\n
Event handler name<\/th>\nRequired<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
beforeSubmit(data, component, actions)<\/code><\/td>\n<\/td>\nCreate an event handler, called when the shopper selects the Pay<\/strong> button.
Allows you to add parameters to the payment request that Drop-in makes. For example, you can add shopper details like \n billingAddress<\/code>\n<\/a>, \n deliveryAddress<\/code>\n<\/a>, \n shopperEmail<\/code>\n<\/a>, or \n shopperName<\/code>\n<\/a>. When the beforeSubmit<\/code> 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()<\/code>): You should call the actions.resolve()<\/code> method regardless of the resultCode<\/code>, including when the payment is unsuccessful.<\/li>
  • Stop the payment flow (actions.reject()<\/code>): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.<\/li><\/ul><\/td>\n<\/tr>\n
<\/a>onActionHandled<\/code><\/td>\n<\/td>\nCreate 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<\/code> values trigger this callback:
  • threeDS<\/code><\/li>
  • qr<\/code><\/li>
  • await<\/code><\/li> <\/ul> Returns data that contains:
    • componentType<\/code>: The type of component that shows the action to the shopper.<\/li>
    • actionDescription<\/code>: A description of the action shown to the shopper.<\/li> <\/ul><\/td>\n<\/tr>\n
onChange(state, component)<\/code><\/td>\n<\/td>\nCreate an event handler, called when a change happens in the payment form.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Drop-in instance<\/h2>\n

The instance of Dropin<\/code> represents the UI that the shopper interacts with to make a payment.<\/p>\n

Configuration parameters<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Parameter name<\/th>\nRequired<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
paymentMethodComponents<\/code><\/td>\nIf you imported Drop-in with individual payment methods<\/a>.<\/td>\nAn array of the payment methods that you imported. For example: [Card, PayPal, GooglePay, ApplePay, Ideal]<\/code>.<\/td>\n<\/tr>\n
paymentMethodsConfiguration<\/code><\/span><\/td>\n<\/td>\nConfiguration for individual payment methods. The payment method guide<\/a> for the individual payment method shows required and optional configuration.
If you include this in the configuration on your instance of Dropin<\/code>, it overrides global payment method configuration on your instance of AdyenCheckout<\/code>.<\/td>\n<\/tr>\n
openFirstPaymentMethod<\/code><\/td>\n<\/td>\nWhen enabled, Drop-in opens the first payment method automatically on page load.
Default value: true<\/strong>.<\/td>\n<\/tr>\n
openFirstStoredPaymentMethod<\/code><\/td>\n<\/td>\nWhen enabled, Drop-in opens the payment method with stored card details on page load. This option takes precedence over openFirstPaymentMethod<\/code>.
Default value: true<\/strong>.<\/td>\n<\/tr>\n
openPaymentMethod.type<\/code><\/td>\n<\/td>\nAutomatically selects the specified payment method when Drop-in renders. Set the payment method type<\/a> that you want to be automatically selected as the value.<\/td>\n<\/tr>\n
showStoredPaymentMethods<\/code><\/td>\n<\/td>\nShows or hides payment methods with stored card details.
Default value: true<\/strong>.<\/td>\n<\/tr>\n
showRemovePaymentMethodButton<\/code><\/td>\n<\/td>\nAllows the shopper to remove a stored payment method.
Default value: false<\/strong>.
If using this prop, you must also implement the onDisableStoredPaymentMethod<\/code> callback.<\/td>\n<\/tr>\n
showPaymentMethods<\/code><\/td>\n<\/td>\nShows or hides regular (not stored) payment methods. Set to false<\/strong> if you only want to show payment methods with stored card details.
Default value: true<\/strong>.<\/td>\n<\/tr>\n
paymentMethodsConfiguration<\/code><\/td>\n<\/td>\nConfiguration for individual payment methods. The payment method guides<\/a> have configuration options specific to each payment method.
If you include this in the configuration on your instance of DropIn<\/code>, it overrides global payment method configuration on your instance of AdyenCheckout<\/code>.<\/td>\n<\/tr>\n
redirectFromTopWhenInIframe<\/code><\/td>\n<\/td>\nIf your Drop-in is inside of an iframe element<\/a>, set to true<\/strong> if you want redirects to be performed on the top-level window.
We recommend that you do not put Drop-in in an iframe.<\/td>\n<\/tr>\n
instantPaymentTypes<\/code><\/td>\n<\/td>\nMoves payment methods to the top of the list of available payment methods. This is available for Apple Pay<\/a> and Google Pay<\/a>.<\/td>\n<\/tr>\n
disableFinalAnimation<\/code><\/td>\n<\/td>\nWhen 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<\/strong>.<\/td>\n<\/tr>\n
showRadioButton<\/code><\/td>\n<\/td>\nWhen enabled, payment methods in the Drop-in have a radio button<\/a>.
Default value: false<\/strong>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Event handlers<\/h3>\n\n\n\n\n\n\n\n
Event handler name<\/th>\n<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
onReady()<\/code><\/td>\n<\/td>\nCalled when Drop-in is initialized and is ready for use.<\/td>\n<\/tr>\n
onSelect(component)<\/code><\/td>\n<\/td>\nCalled when the shopper selects a payment method.<\/td>\n<\/tr>\n
onDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject)<\/code><\/td>\n<\/td>\nCalled when a shopper removes a stored payment method. To remove the selected payment method, make a DELETE<\/strong> storedPaymentMethods<\/code> request using the storedPaymentMethodId<\/code>. Then call either resolve()<\/code> or reject()<\/code>, depending on the \/storedPaymentMethods\/{storedPaymentMethodId}<\/a> response.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n <\/code-sample>\n<\/div>\n

See also<\/h2>\n