Search

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

Configuration on a Components 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 = new 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.
});

Parameters

Parameter name Description
allowPaymentMethods Array of payment methods to be presented to the shopper. To refer to payment methods, use their paymentMethod.type from Payment methods overview.
removePaymentMethods Array of payment methods to be hidden from the shopper. To refer to payment methods, use their paymentMethod.type from Payment methods overview.
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' }.

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 advanced 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(): 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 the shopper provides the required payment details.
onSubmit(state, component) Required if you need to update the payment amount after rendering the Component. 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.

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 the Component.