Classic-integration icon

Settings

The classic Checkout SDK integrations are being phased out
This means we are:

  • No longer developing the classic Checkout SDK integration.
  • Not accepting new classic Checkout SDK integrations.

You have until March 31, 2024 to migrate.

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, adding settings to configObject during checkout initialization

Add settings on SDK initialization

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

  • False: Credit card payment methods are displayed as separate payment methods.

  • Default is true.

    Field Type Description

    autoFocusOnLoad

    Boolean

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

    autoFocusOnSelect

    Boolean

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

    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.

    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:

    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);