{"title":"Customize the checkout experience","category":"default","creationDate":1781186417,"content":"<p>You can customize the following parts of your checkout experience:<\/p>\n<ul>\n<li><a href=\"#order-of-payment-methods\">Order of payment methods<\/a><\/li>\n<li><a href=\"#localization-settings\">Localization settings<\/a><\/li>\n<\/ul>\n<h2>Order of payment methods<\/h2>\n<p>We highly recommend that you use <a href=\"#enable-dynamic-payment-method-ordering\">dynamic payment method ordering<\/a>.<\/p>\n<p>If you do not want to rely on dynamic payment method ordering, you can <a href=\"#manually-configure-payment-methods\">manually configure<\/a> which payment methods to show based on the shopper's country. This is not recommended and disables dynamic payment method ordering.<\/p>\n<h3 id=\"enable-dynamic-payment-method-ordering\">(Recommended) Enable dynamic payment method ordering<\/h3>\n<p>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.<\/p>\n<p>If dynamic payment method ordering is disabled, or if you want to prioritize a different goal, you can change the settings.<\/p>\n<p>In your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a>:<\/p>\n<ol>\n<li>Go <strong>Settings<\/strong> &gt; <strong>Checkout settings<\/strong>.<\/li>\n<li>Select <strong>Dynamic ordering<\/strong>.<\/li>\n<li>Select <strong>Activate<\/strong>.<\/li>\n<li>Select <strong>Prioritize cost<\/strong> or <strong>Prioritize conversion<\/strong>, depending on your goal.<\/li>\n<li>Select all or select specific countries\/regions for which you want to apply this goal.<\/li>\n<li>Select <strong>Activate now<\/strong>.<\/li>\n<\/ol>\n<h3 id=\"manually-configure-payment-methods\">Manually configure payment methods<\/h3>\n<ol>\n<li>On the <strong>Checkout settings<\/strong> page, select <strong>Payment methods<\/strong>.<\/li>\n<li>Select the country\/region that you want to configure and make changes.<\/li>\n<\/ol>\n<h2>Localization settings<\/h2>\n<p>You can change the language and customize the localization of the payment form.<\/p>\n<h3>Included languages<\/h3>\n<p>We <a href=\"https:\/\/github.com\/Adyen\/adyen-web\/tree\/main\/packages\/server\/translations\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">include UI localizations<\/a> for some languages.<br \/>\nTo use a language or localization that is not included, <a href=\"#create-localization\">create your own<\/a>.<\/p>\n<h3 id=\"change-language\">Change the language<\/h3>\n<p>The language of the UI is based on the <code>locale<\/code> set in the <a href=\"\/standard\/integration\/drop-in#configure\">global configuration object that you pass to your instance of  <code>AdyenCheckout<\/code><\/a>. If no <code>locale<\/code> is set, Drop-in uses the locale that corresponds to the <code>shopperLocale<\/code> value from your  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a> request.<\/p>\n<p>If the locale that you set in the configuration object or the <code>shopperLocale<\/code> value does not match any of the included locales, Drop-in defaults to <strong>en-US<\/strong> (United States English).<\/p>\n<h3 id=\"customize-localization\">Customize the localization<\/h3>\n<p>The text displayed for each localization can be customized, allowing you to replace the default text with your custom text.<\/p>\n<p>To customize the text for a localization:<\/p>\n<ol>\n<li>\n<p>On your payments page, create a\u00a0<code>translations<\/code>\u00a0object.<\/p>\n<\/li>\n<li>\n<p>In the object that you created, specify the locale value that you want to customize.<\/p>\n<\/li>\n<li>\n<p>In the object for the locale that you specified, add key-value pairs for the text you want to customize.<\/p>\n<p>The following example shows how to customize the US English (<code>en-US<\/code>) translation so that:<\/p>\n<table>\n<thead>\n<tr>\n<th>Key<\/th>\n<th>Value<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>deliveryAddress<\/code><\/td>\n<td>Use <strong>Shipping Address<\/strong> instead of the default text (<strong>Delivery Address<\/strong>).<\/td>\n<\/tr>\n<tr>\n<td><code>stateOrProvince<\/code><\/td>\n<td>Use <strong>State<\/strong> instead of the default text (<strong>State or Province<\/strong>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Customize the text for deliveryAddress and stateOrProvince keys'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const translations = {\\n  \\\"en-US\\\": {\\n    \\\"deliveryAddress\\\": \\\"Shipping Address\\\",\\n    \\\"stateOrProvince\\\": \\\"State\\\"\\n  }\\n};\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>To use the customized localization in your payment form, provide the following parameters in the <a href=\"\/standard\/integration\/drop-in#configure\">global configuration object<\/a>:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Parameter name<\/th>\n<th style=\"text-align: center;\">Required<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><code>locale<\/code><\/td>\n<td style=\"text-align: center;\"><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td style=\"text-align: left;\">The <code>locale<\/code> you customized in the previous step.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>translations<\/code><\/td>\n<td style=\"text-align: center;\"><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td style=\"text-align: left;\">The <code>translations<\/code> object that you created.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example configuration to use custom US English localization'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const globalConfiguration = {\\n  locale: \\\"en-US\\\",\\n  translations: translations,\\n  \\\/\\\/ ... Other global configuration parameters.\\n};\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3 id=\"create-localization\">Create a custom locale<\/h3>\n<p>To use a locale that we do not <a href=\"#included-languages\">include<\/a>, create a custom one.<\/p>\n<ol>\n<li>\n<p>On your payments page, create a\u00a0<code>translations<\/code>\u00a0object.<\/p>\n<\/li>\n<li>\n<p>In the object that you created, specify the locale value that you want to create. For example, you can use the value <strong>nl-BE<\/strong> to create a Belgian Dutch localization<\/p>\n<\/li>\n<li>\n<p>In the object for the locale that you created, add key-value pairs for the text you want to customize.<\/p>\n<p>The following example shows a <code>translation<\/code> object for creating a <strong>nl-BE<\/strong> localization.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example for a custom Belgian Dutch localization'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const translations = {\\n  \\\"nl-BE\\\": {\\n    \\\"paymentMethods.moreMethodsButton\\\": \\\"Meer betaalmethoden\\\",\\n    \\\"payButton\\\": \\\"Betaal\\\",\\n    \\\"storeDetails\\\": \\\"Bewaar voor mijn volgende betaling\\\",\\n    \\\/\\\/ ... 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.\\n  }\\n  \\\/\\\/ ... Other locale objects.\\n};\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>To use your localization in your payment form, include following parameters in the <a href=\"\/standard\/integration\/drop-in#configure\">global configuration object<\/a>:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Parameter name<\/th>\n<th style=\"text-align: center;\">Required<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><code>locale<\/code><\/td>\n<td style=\"text-align: center;\"><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td style=\"text-align: left;\">The <code>locale<\/code> you created in the previous step.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><code>translations<\/code><\/td>\n<td style=\"text-align: center;\"><span class=\"hint--bottom\" data-hint=\"Required\" markdown=\"1\"><img style=\"width: 25px;\" alt=\"Required\" src=\"\/user\/pages\/reuse\/image-library\/01.icons\/required\/required.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/span><\/td>\n<td style=\"text-align: left;\">The <code>translations<\/code> object that you created.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example configuration to use custom Belgian Dutch localization'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const globalConfiguration = {\\n  locale: \\\"nl-BE\\\",\\n  translations: translations,\\n  ... \\\/\\\/ Other global configuration parameters.\\n};\\n\\nconst checkout = await AdyenCheckout(configuration);\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3>Text direction<\/h3>\n<p>The default text direction is left-to-right. Text direction is independent from the <code>locale<\/code> you set in the <code>configuration<\/code> object. So even if you set the locale to a right-to-left language, like Arabic, you still need to set the text direction.<\/p>\n<p>To change the text direction to right-to-left, use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLElement\/dir\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">HTML <code>dir<\/code> attribute<\/a> on the parent element for the checkout container.<\/p>\n<div class=\"accordion-shortcode adl-accordion adl-accordion--max-height-transition\" data-expand=\"true\" data-ignore=\"anchorjs-link\">\n    \n    <div class=\"adl-accordion__item\" style=\"\">\n        <div tabindex=\"0\" role=\"item\" aria-expanded=\"false\" class=\"adl-accordion__header\">\n            <i class=\"adl-accordion__toggle adl-icon-chevron-down\"><\/i>\n            <div class=\"adl-accordion__title-wrapper\" data-accordion=\"#custom-styling\">\n                                    <h3 class=\"adl-accordion__title\">Custom styling<\/h3>\n                            <\/div>\n        <\/div>\n        <div role=\"region\" class=\"adl-accordion__content\">\n            \n<p>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.<\/p>\n<p>You can customize elements that are not inside an iFrame, by overriding the CSS property styles:<\/p>\n<ol>\n<li>\n<p>Create a CSS file <code>override.css<\/code>, with the <a href=\"https:\/\/github.com\/Adyen\/adyen-web\/blob\/main\/README.md#styling\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">CSS variables<\/a> you want to style:<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'override.css'\" :id=\"''\" :code-data='[{\"language\":\"css\",\"tabTitle\":\"\",\"content\":\":root {\\n  --adyen-checkout-input-wrapper-focus-border-color: #ff8888;\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Import the <code>override.css<\/code> file after importing the Adyen library's main CSS file:<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Your checkout code'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;css&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;import '@adyen\\\/adyen-web\\\/styles\\\/adyen.css';\\nimport '.\\\/override.css';&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<h2>See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/standard\/integration\/drop-in\/optional-drop-in-configuration\"\n                        target=\"_self\"\n                        >\n                    Drop-in optional configuration\n                <\/a><\/li><li><a href=\"\/standard\/integration\/drop-in\/optional-server-configuration\"\n                        target=\"_self\"\n                        >\n                    Optional server configuration\n                <\/a><\/li><li><a href=\"\/standard\/integration\/drop-in\/best-practices\"\n                        target=\"_self\"\n                        >\n                    Best practices\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in\/customize-checkout","articleFields":{"description":"Learn how to customize the checkout experience for your shoppers.","parameters":{"currency":"EUR","country_code":"NL","amount":"1000","shopper_locale":"nl-NL","channel":"Web"}},"algolia":{"url":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in\/customize-checkout","title":"Customize the checkout experience","content":"You can customize the following parts of your checkout experience:\n\nOrder of payment methods\nLocalization settings\n\nOrder of payment methods\nWe highly recommend that you use dynamic payment method ordering.\nIf 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.\n(Recommended) Enable dynamic payment method ordering\nDynamic 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.\nIf dynamic payment method ordering is disabled, or if you want to prioritize a different goal, you can change the settings.\nIn your Customer Area:\n\nGo Settings &gt; Checkout settings.\nSelect Dynamic ordering.\nSelect Activate.\nSelect Prioritize cost or Prioritize conversion, depending on your goal.\nSelect all or select specific countries\/regions for which you want to apply this goal.\nSelect Activate now.\n\nManually configure payment methods\n\nOn the Checkout settings page, select Payment methods.\nSelect the country\/region that you want to configure and make changes.\n\nLocalization settings\nYou can change the language and customize the localization of the payment form.\nIncluded languages\nWe include UI localizations for some languages.\nTo use a language or localization that is not included, create your own.\nChange the language\nThe 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.\nIf 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).\nCustomize the localization\nThe text displayed for each localization can be customized, allowing you to replace the default text with your custom text.\nTo customize the text for a localization:\n\n\nOn your payments page, create a\u00a0translations\u00a0object.\n\n\nIn the object that you created, specify the locale value that you want to customize.\n\n\nIn the object for the locale that you specified, add key-value pairs for the text you want to customize.\nThe following example shows how to customize the US English (en-US) translation so that:\n\n\n\nKey\nValue\n\n\n\n\ndeliveryAddress\nUse Shipping Address instead of the default text (Delivery Address).\n\n\nstateOrProvince\nUse State instead of the default text (State or Province).\n\n\n\n\n\n\n\n\nTo use the customized localization in your payment form, provide the following parameters in the global configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you customized in the previous step.\n\n\ntranslations\n\nThe translations object that you created.\n\n\n\n\n\n\n\n\nCreate a custom locale\nTo use a locale that we do not include, create a custom one.\n\n\nOn your payments page, create a\u00a0translations\u00a0object.\n\n\nIn 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\n\n\nIn the object for the locale that you created, add key-value pairs for the text you want to customize.\nThe following example shows a translation object for creating a nl-BE localization.\n\n\n\n\n\nTo use your localization in your payment form, include following parameters in the global configuration object:\n\n\n\nParameter name\nRequired\nDescription\n\n\n\n\nlocale\n\nThe locale you created in the previous step.\n\n\ntranslations\n\nThe translations object that you created.\n\n\n\n\n\n\n\n\nText direction\nThe 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.\nTo change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container.\n\n    \n    \n        \n            \n            \n                                    Custom styling\n                            \n        \n        \n            \nDrop-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.\nYou can customize elements that are not inside an iFrame, by overriding the CSS property styles:\n\n\nCreate a CSS file override.css, with the CSS variables you want to style:\n\n\n\n\n\nImport the override.css file after importing the Adyen library's main CSS file:\n\n\n\n\n\n\n        \n    \n\n\nSee also\n\n\n                    Drop-in optional configuration\n                \n                    Optional server configuration\n                \n                    Best practices\n                \n","type":"page","locale":"en","boost":16,"hierarchy":{"lvl0":"Home","lvl1":"Standard payments integration","lvl2":"Build your integration","lvl3":"Drop-in","lvl4":"Customize the checkout experience"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/standard","lvl2":"https:\/\/docs.adyen.com\/standard\/integration","lvl3":"https:\/\/docs.adyen.com\/standard\/integration\/drop-in","lvl4":"\/standard\/integration\/drop-in\/customize-checkout"},"levels":5,"category":"","category_color":"","tags":["Customize","checkout","experience"]}}