{"title":"Settings","category":"default","creationDate":1776961627,"content":"<div class=\"sc-notice warning\"><div>\n<p><strong>The classic Checkout SDK integrations are being phased out<\/strong><br \/>\nThis means we are:<\/p>\n<ul>\n<li>No longer developing the classic Checkout SDK integration.<\/li>\n<li>Not accepting new classic Checkout SDK integrations.<\/li>\n<\/ul>\n<p>You have until March 31, 2024 to migrate.<\/p>\n<\/div><\/div>\n<p>You can configure which fields are collected and how the payment form fields are rendered and behave.<\/p>\n<ul>\n<li>To collect additional information such as address or number of installments, add a\u00a0<code>configuration<\/code>\u00a0object to your <a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/paymentSession\" class=\"codeLabel external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\n  <code>\/paymentSession<\/code>\n<\/a> call.<\/li>\n<li>To adjust how fields are rendered and behave, adding settings to\u00a0<code>configObject<\/code>\u00a0during checkout initialization.\u00a0<\/li>\n<\/ul>\n<h3 id=\"add-settings-on-sdk-initialization\">Add settings on SDK initialization<\/h3>\n<p>Add the following parameters to the <code>chckt.checkout<\/code>\u00a0call to your SDK.<\/p>\n<table>\n  <thead>\n    <tr class=\"header\">\n      <th>Field<\/th>\n      <th>Type<\/th>\n      <th>Description<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>\n<p><code>autoFocusOnLoad<\/code><\/p>\n<\/td>\n      <td>\n<p>Boolean<\/p>\n<\/td>\n      <td>\n<p>Specifies whether the first field on the payment form is focused when the form is loaded.Default is <code>true<\/code>.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>autoFocusOnSelect<\/code><\/p>\n<\/td>\n      <td>\n<p>Boolean<\/p>\n<\/td>\n      <td>\n<p>Specifies whether the first field on a payment method form should be focused when a payment method is selected. Setting this to <code>false<\/code> results in a better user experience for shoppers using their keyboard to navigate through the payment form.Default is <code>true<\/code>.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>consolidateCards<\/code><\/p>\n<\/td>\n      <td>\n<p>Boolean<\/p>\n<\/td>\n      <td>\n<p>Specifies how credit card payment methods are shown on the payment form:<ul><li><code>True<\/code>: Credit card payment methods are shown as a single payment method.<\/li><\/ul><\/p>\n<\/td><li>\n<p><code>False<\/code>: Credit card payment methods are shown as separate payment methods.<\/p>\n<\/li><p>Default is <code>true<\/code>.<\/p>\n    <\/tr>\n      <tr><td>\n<p><code>context<\/code><\/p>\n<\/td>\n      <td>\n<p>Variable<\/p>\n<\/td>\n      <td>\n<p>Set to <code>test<\/code> to load the payment form fields from your Adyen test account.Default is <code>live<\/code>.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>paymentMethods<\/code><\/p>\n<\/td>\n      <td>\n<p>Object<\/p>\n<\/td>\n      <td>\n<p>Allows you to configure specific payment methods on the form.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>card<\/code><\/p>\n<\/td>\n      <td>\n<p>Object<\/p>\n<\/td>\n      <td>\n<p>Allows you to configure how card payment methods are rendered and behave on the form.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>placeholders<\/code><\/p>\n<\/td>\n      <td>\n<p>String<\/p>\n<\/td><td>\n<p>Sets the placeholder text in the payment form field inputs.Example:<div class=\"sourceCode\" id=\"cb1\"><pre class=\"sourceCode json\"><code class=\"sourceCode json\"><a class=\"sourceLine\" id=\"cb1-1\" title=\"1\"><span class=\"er\">\"encryptedCardNumber\":<\/span> <span class=\"er\">\"Card<\/span> <span class=\"er\">number\"<\/span><\/a><\/code><\/pre><\/div><\/p>\n<\/td><\/tr><tr><td>\n<p><code>separateDateInputs<\/code><\/p>\n<\/td><td>\n<p>Boolean<\/p>\n<\/td>\n      <td>\n<p>Indicates whether a card's month and year of expiry are shown as separate input fields.When set to <code>true<\/code>, the month and year appear as separate fields.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>sfStyles<\/code><\/p>\n<\/td>\n      <td>\n<p>Object<\/p>\n<\/td><td>\n<p>Used to configure the styling of fields in the payment form.<\/p>\n<\/td><\/tr><tr><td>\n<p><code>showOptionalHolderNameField<\/code><\/p>\n<\/td><td>\n<p>Boolean<\/p>\n<\/td>\n      <td>\n<p>Indicates whether the cardholder name field appears on the form.When set to <code>true<\/code>, the Cardholder Name field will appear on the form as an optionalfield.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>translations<\/code><\/p>\n<\/td>\n      <td>\n<p>Object<\/p>\n<\/td>\n      <td>\n<p>Allows you to overwrite the default translation strings for the supported languages.For more information, see <a href=\"\/online-payments\">Localization<\/a>.<\/p>\n<\/td>\n    <\/tr>\n    <tr>\n      <td>\n<p><code>useDefaultCSS<\/code><\/p>\n<\/td>\n      <td>\n<p>Boolean<\/p>\n<\/td><td>\n<p>Indicates whether to use the default Adyen CSS for the Checkout form.When set to <code>false<\/code>, the standard Adyen CSS will not be used.<\/p>\n<\/td><\/tr><tr><td>\n<p><code>initialPMCount<\/code><\/p>\n<\/td><td>\n<p>Number<\/p>\n<\/td>\n      <td>\n<p>Specifies the initial amount of payment methods shown by the SDK. When <code>initialPMCount<\/code> is smaller than the total list of available payment methods, a button is shown with the option to show \"More payment methods\".<\/p>\n<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n<p>Example configuration creation at sdk initialization:<\/p>\n<pre><code class=\"language-js\">\/\/ Create a config object for SDK.\nvar sdkConfigObj = {\n   context: 'test',\n   autoFocusOnLoad: false,\n   showOptionalHolderNameField: false\n};\n\n\/\/ Initiate the Checkout form.\nvar checkout = chckt.checkout(paymentSession, '#your-payment-div', sdkConfigObj);<\/code><\/pre>","url":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/settings","articleFields":{"id":"36185703","type":"page","_expandable":{"operations":""},"status":"current","last_edit_on":"18-04-2019 16:58","sitemap":{"priority":0.3},"parameters":{"anchor_new":"<a href=\"\/online-payments\/drop-in-web\">Web Drop-in<\/a>","old_integration":"Checkout Web SDK"}},"algolia":{"url":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/settings","title":"Settings","content":"\nThe classic Checkout SDK integrations are being phased out\nThis means we are:\n\nNo longer developing the classic Checkout SDK integration.\nNot accepting new classic Checkout SDK integrations.\n\nYou have until March 31, 2024 to migrate.\n\nYou can configure which fields are collected and how the payment form fields are rendered and behave.\n\nTo collect additional information such as address or number of installments, add a\u00a0configuration\u00a0object to your \n  \/paymentSession\n call.\nTo adjust how fields are rendered and behave, adding settings to\u00a0configObject\u00a0during checkout initialization.\u00a0\n\nAdd settings on SDK initialization\nAdd the following parameters to the chckt.checkout\u00a0call to your SDK.\n\n  \n    \n      Field\n      Type\n      Description\n    \n  \n  \n    \n      \nautoFocusOnLoad\n\n      \nBoolean\n\n      \nSpecifies whether the first field on the payment form is focused when the form is loaded.Default is true.\n\n    \n    \n      \nautoFocusOnSelect\n\n      \nBoolean\n\n      \nSpecifies whether the first field on a payment method form should be focused when a payment method is selected. Setting this to false results in a better user experience for shoppers using their keyboard to navigate through the payment form.Default is true.\n\n    \n    \n      \nconsolidateCards\n\n      \nBoolean\n\n      \nSpecifies how credit card payment methods are shown on the payment form:True: Credit card payment methods are shown as a single payment method.\n\nFalse: Credit card payment methods are shown as separate payment methods.\nDefault is true.\n    \n      \ncontext\n\n      \nVariable\n\n      \nSet to test to load the payment form fields from your Adyen test account.Default is live.\n\n    \n    \n      \npaymentMethods\n\n      \nObject\n\n      \nAllows you to configure specific payment methods on the form.\n\n    \n    \n      \ncard\n\n      \nObject\n\n      \nAllows you to configure how card payment methods are rendered and behave on the form.\n\n    \n    \n      \nplaceholders\n\n      \nString\n\nSets the placeholder text in the payment form field inputs.Example:\"encryptedCardNumber\": \"Card number\"\n\nseparateDateInputs\n\nBoolean\n\n      \nIndicates whether a card's month and year of expiry are shown as separate input fields.When set to true, the month and year appear as separate fields.\n\n    \n    \n      \nsfStyles\n\n      \nObject\n\nUsed to configure the styling of fields in the payment form.\n\nshowOptionalHolderNameField\n\nBoolean\n\n      \nIndicates whether the cardholder name field appears on the form.When set to true, the Cardholder Name field will appear on the form as an optionalfield.\n\n    \n    \n      \ntranslations\n\n      \nObject\n\n      \nAllows you to overwrite the default translation strings for the supported languages.For more information, see Localization.\n\n    \n    \n      \nuseDefaultCSS\n\n      \nBoolean\n\nIndicates whether to use the default Adyen CSS for the Checkout form.When set to false, the standard Adyen CSS will not be used.\n\ninitialPMCount\n\nNumber\n\n      \nSpecifies the initial amount of payment methods shown by the SDK. When initialPMCount is smaller than the total list of available payment methods, a button is shown with the option to show \"More payment methods\".\n\n    \n  \n\nExample configuration creation at sdk initialization:\n\/\/ Create a config object for SDK.\nvar sdkConfigObj = {\n   context: 'test',\n   autoFocusOnLoad: false,\n   showOptionalHolderNameField: false\n};\n\n\/\/ Initiate the Checkout form.\nvar checkout = chckt.checkout(paymentSession, '#your-payment-div', sdkConfigObj);","type":"page","locale":"en","boost":14,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Classic integrations for Ecommerce","lvl3":"Classic Checkout SDKs","lvl4":"Web SDK","lvl5":"Customization","lvl6":"Settings"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/","lvl1":"https:\/\/docs.adyen.com\/online-payments","lvl2":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations","lvl3":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks","lvl4":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk","lvl5":"https:\/\/docs.adyen.com\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization","lvl6":"\/online-payments\/classic-integrations\/checkout-sdks\/web-sdk\/customization\/settings"},"levels":7,"category":"Online Payments","category_color":"green","tags":["Settings"]}}