Optional configuration

Configuration hierarchy

Configuration on a Component overrides global configuration and any configuration you have in paymentMethodsConfiguration.

For example, onError configuration inside the Card Component overrides all other onError configuration, while onError configuration inside paymentMethodsConfiguration only overrides global configuration:

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

checkout.create('card', {
    onError: () => {}, // Component configuration overrides all other onError configuration.
});

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 false. This Pay Button triggers the onSubmit event when payment details are valid. When using your own Pay Button, you have to 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 the Component 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 Components, en-US.
setStatusAutomatically v4.7.0 or later	Set to false to not set the Drop-in status to 'loading' when onSubmit is triggered. Defaults to true.
secondaryAmount v5.23.0 or later	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: - currency: The three-character ISO currency code. - value: The amount of the transaction, in minor units. - currencyDisplay: Sets the currency formatting. Default: symbol.

Events

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 additional use case. Allows you to add details which the Component 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 the Component.
onChange(state, component)	Create an event handler, called when a change happens in the payment form.
onSubmit(state, component)	Required if you need to update the payment amount after rendering the Component. For this additional 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 additional 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.
onActionHandled v5.33.0 or later	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.

Methods

Method name	Description
mount(selector)	Mounts the the Component into the DOM returned by the selector. The selector must be either a valid CSS selector string or an HTMLElement reference.
unmount()	Unmounts the the Component 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.