Customize the checkout experience

You can customize the following parts of your checkout experience:

• Order of payment methods
• Localization settings

Order of payment methods

We highly recommend that you use dynamic payment method ordering.

If you do not want to rely on dynamic payment method ordering, you can manually configure which payment methods to show based on the shopper's country. This is not recommended and disables dynamic payment method ordering.

(Recommended) Enable dynamic payment method ordering

Dynamic payment method ordering is enabled by default. When enabled, checkout dynamically changes the payment method order based on machine learning insights gathered from current and historical transaction details. The order is optimized based on data such as shopper preferences derived from previous transactions, location, device, and currency.

If dynamic payment method ordering is disabled, or if you want to prioritize a different goal, you can change the settings.

In your Customer Area:

1. Go Settings > Checkout settings.
2. Select Dynamic ordering.
3. Select Activate.
4. Select Prioritize cost or Prioritize conversion, depending on your goal.
5. Select all or select specific countries/regions for which you want to apply this goal.
6. Select Activate now.

Manually configure payment methods

1. On the Checkout settings page, select Payment methods.
2. Select the country/region that you want to configure and make changes.

Localization settings

You can change the language and customize the localization of the payment form.

Included languages

We include UI localizations for some languages.
To use a language or localization that is not included, create your own.

Change the language

The language of the UI is based on the locale set in the global configuration object that you pass to your instance of AdyenCheckout. If no locale is set, Drop-in uses the locale that corresponds to the shopperLocale value from your /sessions request.

If the locale that you set in the configuration object or the shopperLocale value does not match any of the included locales, Drop-in defaults to en-US (United States English).

Customize the localization

The text displayed for each localization can be customized, allowing you to replace the default text with your custom text.

To customize the text for a localization:

1. On your payments page, create a translations object.

2. In the object that you created, specify the locale value that you want to customize.

3. In the object for the locale that you specified, add key-value pairs for the text you want to customize.

   The following example shows how to customize the US English (en-US) translation so that:

   Key	Value
   deliveryAddress	Use Shipping Address instead of the default text (Delivery Address).
   stateOrProvince	Use State instead of the default text (State or Province).

4. To use the customized localization in your payment form, provide the following parameters in the global configuration object:

   Parameter name	Required	Description
   locale		The locale you customized in the previous step.
   translations		The translations object that you created.

Create a custom locale

To use a locale that we do not include, create a custom one.

1. On your payments page, create a translations object.

2. In the object that you created, specify the locale value that you want to create. For example, you can use the value nl-BE to create a Belgian Dutch localization

3. In the object for the locale that you created, add key-value pairs for the text you want to customize.

   The following example shows a translation object for creating a nl-BE localization.

4. To use your localization in your payment form, include following parameters in the global configuration object:

   Parameter name	Required	Description
   locale		The locale you created in the previous step.
   translations		The translations object that you created.

Text direction

The default text direction is left-to-right. Text direction is independent from the locale you set in the configuration object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.

To change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container.

See also