---
title: "Customize the checkout experience"
description: "Learn how to customize the checkout experience for your shoppers."
url: "https://docs.adyen.com/standard/integration/drop-in/customize-checkout"
source_url: "https://docs.adyen.com/standard/integration/drop-in/customize-checkout.md"
canonical: "https://docs.adyen.com/standard/integration/drop-in/customize-checkout"
last_modified: "2026-06-11T16:00:17+02:00"
language: "en"
---

# Customize the checkout experience

Learn how to customize the checkout experience for your shoppers.

[View source](/standard/integration/drop-in/customize-checkout.md)

You can customize the following parts of your checkout experience:

* [Order of payment methods](#order-of-payment-methods)
* [Localization settings](#localization-settings)

## Order of payment methods

We highly recommend that you use [dynamic payment method ordering](#enable-dynamic-payment-method-ordering).

If you do not want to rely on dynamic payment method ordering, you can [manually configure](#manually-configure-payment-methods) 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](https://ca-test.adyen.com/):

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](https://github.com/Adyen/adyen-web/tree/main/packages/server/translations) for some languages.\
To use a language or localization that is not included, [create your own](#create-localization).

### 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`](/standard/integration/drop-in#configure). If no `locale` is set, Drop-in uses the locale that corresponds to the `shopperLocale` value from your [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/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**).           |

   **Customize the text for deliveryAddress and stateOrProvince keys**

   ```js
   const translations = {
     "en-US": {
       "deliveryAddress": "Shipping Address",
       "stateOrProvince": "State"
     }
   };
   ```

4. To use the customized localization in your payment form, provide the following parameters in the [global configuration object](/standard/integration/drop-in#configure):

   | Parameter name | Required                                                                                                      | Description                                       |
   | -------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
   | `locale`       | ![Required](/user/pages/reuse/image-library/01.icons/required/required.svg?decoding=auto\&fetchpriority=auto) | The `locale` you customized in the previous step. |
   | `translations` | ![Required](/user/pages/reuse/image-library/01.icons/required/required.svg?decoding=auto\&fetchpriority=auto) | The `translations` object that you created.       |

   **Example configuration to use custom US English localization**

   ```js
   const globalConfiguration = {
     locale: "en-US",
     translations: translations,
     // ... Other global configuration parameters.
   };
   ```

### Create a custom locale

To use a locale that we do not [include](#included-languages), 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.

   **Example for a custom Belgian Dutch localization**

   ```js
   const translations = {
     "nl-BE": {
       "paymentMethods.moreMethodsButton": "Meer betaalmethoden",
       "payButton": "Betaal",
       "storeDetails": "Bewaar voor mijn volgende betaling",
       // ... Other key-value pairs. If you do not include all the included key-value pairs, the default values for the en-US locale are used.
     }
     // ... Other locale objects.
   };
   ```

4. To use your localization in your payment form, include following parameters in the [global configuration object](/standard/integration/drop-in#configure):

   | Parameter name | Required                                                                                                      | Description                                    |
   | -------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
   | `locale`       | ![Required](/user/pages/reuse/image-library/01.icons/required/required.svg?decoding=auto\&fetchpriority=auto) | The `locale` you created in the previous step. |
   | `translations` | ![Required](/user/pages/reuse/image-library/01.icons/required/required.svg?decoding=auto\&fetchpriority=auto) | The `translations` object that you created.    |

   **Example configuration to use custom Belgian Dutch localization**

   ```js
   const globalConfiguration = {
     locale: "nl-BE",
     translations: translations,
     ... // Other global configuration parameters.
   };

   const checkout = await AdyenCheckout(configuration);
   ```

### 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir) on the parent element for the checkout container.

**

### Custom styling

Drop-in includes a pre-styled payment form. The styling of fonts, colors, layouts, and buttons can be customized using CSS custom properties to match your website and brand.

You can customize elements that are not inside an iFrame, by overriding the CSS property styles:

1. Create a CSS file `override.css`, with the [CSS variables](https://github.com/Adyen/adyen-web/blob/main/README.md#styling) you want to style:

   **override.css**

   ```css
   :root {
     --adyen-checkout-input-wrapper-focus-border-color: #ff8888;
   }
   ```

2. Import the `override.css` file after importing the Adyen library's main CSS file:

   **Your checkout code**

   ```css
   import '@adyen/adyen-web/styles/adyen.css';
   import './override.css';
   ```

## See also

* [Drop-in optional configuration](/standard/integration/drop-in/optional-drop-in-configuration)
* [Optional server configuration](/standard/integration/drop-in/optional-server-configuration)
* [Best practices](/standard/integration/drop-in/best-practices)