Settings

You can configure which fields are collected and how the payment form fields are rendered and behave.

  • To collect additional information such as address or number of installments, add a configuration object during /paymentSession call.
  • To adjust how fields are rendered and behave, add settings to configObject during checkout initialization

Add settings on SDK initialization

Add the following parameters to the chckt.checkout call to your SDK.

Field Type Description
autoFocusOnLoad Boolean

Specifies whether the first field on the payment form is focused when the form is loaded.

Default is true.

consolidateCards Boolean

Specifies how credit card payment methods are displayed on the payment form:

  • True: Credit card payment methods are displayed as a single payment method.
  • False: Credit card payment methods are displayed as separate payment methods.

Default is true.

context Variable

Set to test to load the payment form fields from your Adyen test account.

Default is live.

paymentMethods
Object Allows you to configure specific payment methods on the form.
card Object Allows you to configure how card payment methods are rendered and behave on the form.
placeholders String

Sets the placeholder text in the payment form field inputs.

Example:

"encryptedCardNumber": "Card number"
separateDateInputs Boolean

Indicates whether a card's month and year of expiry are displayed as separate input fields.

When set to true, the month and year appear as separate fields.

sfStyles Object

Used to configure the styling of fields in the payment form.

For more information, see Styling.

showOptionalHolderNameField Boolean

Indicates 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.

translations Object

Allows you to overwrite the default translation strings for the supported languages.

For more information, see Localization.

useDefaultCSS Boolean

Indicates whether to use the default Adyen CSS for the Checkout form.

When set to false , the standard Adyen CSS will not be used.

initialPMCount Number Specifies the initial amount of payment methods displayed 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".

Example configuration creation at sdk initialization:

// Create a config object for SDK.
var sdkConfigObj = {
   context : 'test',
   autoFocusOnLoad : false,
   showOptionalHolderNameField: false
};
 
// Initiate the Checkout form.
var checkout = chckt.checkout(paymentSession, '#your-payment-div', sdkConfigObj);