Search

Are you looking for test card numbers?

Would you like to contact support?

Online-payment icon

Customizing Drop-in for Web

Learn how you can customize the Drop-in UI.

Styling

The Drop-in UI can be styled to match your website and brand. The styling of fonts, colors, layouts, and buttons can be customized using CSS.

To demonstrate how Drop-in can be styled, we've created several examples.

Using custom styling

After integrating Drop-in you will have a pre-styled payment form. The styling used in this form can be overridden using Drop-in CSS classes and common CSS properties.

To override the default Drop-in styling:

  1. In your CSS, add Drop-in classes that represent styling that you want to customize in your payment form.

  2. Customize the styling of these classes using common CSS properties.

    For example, if you wanted to change the Pay button to:

    • Green background (#0abf53).
    • Heavier text.
    • Square corners.

    You would add the following to your CSS:

    .adyen-checkout__button--pay {
        background-color: #0abf53;
        font-weight: 900;
        border-radius: 0;
    }

To ensure that your styling renders correctly, we recommend testing on multiple browsers, device types (desktop and mobile), and viewport sizes.

Drop-in CSS classes

The styling for Drop-in can be customized using the CSS classes provided below.

These classes follow the BEM (.block__element--modifier) methodology, where state is represented by a modifier (such as --selected).

Some payment methods have their own unique CSS classes, which are not provided below. For a full list of the classes that you can style, inspect your instance of Drop-in using your browser's developer tools.

CSS stylesheet
.adyen-checkout__payment-method {
    /* Payment method container */
}
.adyen-checkout__payment-method--selected {
    /* Payment method that has been selected */
}
.adyen-checkout__payment-method__header {
    /* Payment method icon and name */
}
.adyen-checkout__payment-method__radio {
    /* Radio button in payment method header */
}
.adyen-checkout__payment-method__radio--selected {
    /* Selected radio button in payment method header */
}
.adyen-checkout__payment-method__name {
    /* Payment method name in the payment method header */
}
.adyen-checkout__spinner__wrapper {
    /* Spinning icon */
}
.adyen-checkout__button {
    /* Buttons */
}
.adyen-checkout__button--pay {
    /* Pay button */
}
.adyen-checkout__field {
    /* Form field container */
}
.adyen-checkout__label {
    /* Form label container */
}
.adyen-checkout__label__text {
    /* Text element inside the form label container */
}
.adyen-checkout__input {
    /* Input fields */
}
.adyen-checkout__input--error {
    /* Error state for the input fields */
}
.adyen-checkout__error-text {
    /* Error message text */
}
.adyen-checkout__card__cardNumber__input {
    /* Input field for the card number */
}
.adyen-checkout__field--expiryDate {
    /* Input field for the expiry date */
}
.adyen-checkout__field__cvc {
    /* Input field for the CVC security code */
}
.adyen-checkout__card__holderName {
    /* Input field for card holder name */
}
.adyen-checkout__checkbox__input {
    /* Checkboxes */
}
.adyen-checkout__checkbox__label {
    /* Checkbox labels */
}
.adyen-checkout__radio_group__input {
    /* Radio buttons */
}
.adyen-checkout__dropdown__button {
    /* Dropdown button showing list of options */
}
.adyen-checkout__dropdown__list {
    /* Dropdown list */
}
.adyen-checkout__dropdown__element {
    /* Elements in the dropdown list */
}
.adyen-checkout__link {
    /* Links */
}

Styling examples

To demonstrate how you can customize the styling of Drop-in, we've created several examples. You can use the tabs below to switch between these examples.

Inspect the examples using your browser's developer tools to see which classes and properties we used to create them.

Language and localization

The Drop-in UI has been localized for the following languages: 

Language locale
Chinese - Simplified zh-CN
Chinese - Traditional zh-TW
Danish da-DK
Dutch nl-NL
English - US en-US
Finnish fi-FI
French fr-FR
German de-DE
Italian it-IT
Japanese ja-JP
Korean ko-KR
Norwegian no-NO
Polish pl-PL
Portuguese pt-BR
Russian ru-RU
Spanish es-ES
Swedish sv-SE

If you want to use a language or localization that is not on this list, you can create your own.

Setting the localization

By default, US English (en-US) text is presented in Drop-in. To use a different localization:

  • Specify the locale of the localization you want to use in your Drop-in configuration object

    The example below shows how you would change the localization to Dutch (nl-NL):

    const configuration = {
        locale: "nl-NL",
        ...
    };

Customizing a localization

The text displayed in each localization can be customized, allowing you to replace the default text with your own.

To customize a localization:

  1. Create a translations object on your payments page.
  2. In this object, specify the locale you want to customize, and add key-value pairs corresponding to any text you want to customize.

    The example below shows how you would customize the US English (en-US) translation so that:

    • Shipping Address appears instead of Delivery Address (the default en-US text).
    • State appears instead of State or Province (the default en-US text).
    const translations = {
        "en-US": {
            "deliveryAddress": "Shipping Address",
            "stateOrProvince": "State"
        }
    };
  3. To use the customized localization in your payment form, provide the following parameters in the Drop-in configuration object:

    Parameter name Required Description
    locale -white_check_mark- The locale you customized in the previous step.
    translations -white_check_mark- Use translations

    The example below shows how you would use a customized en-US localization in Drop-in.

    const configuration = {
        locale: "en-US",
        translations: translations,
        ...
    };
    
    const checkout = new AdyenCheckout(configuration);
    const dropin = checkout.create('dropin').mount('#dropin-container');

Creating a localization

If your shoppers use a language or localization that is not supported by the Drop-in, you can create your own.

To create a localization:

  1. Create a translations object on your payments page.
  2. In this object, specify the locale you want to create (for example, you might use a locale of en-GB if you are creating a British English localization), and add key-value pairs corresponding to text you want displayed in the Drop-in UI.

    The example below shows a translation object for creating a en-GB localization.

    const translations = {
        "en-GB": {
            "paymentMethods.moreMethodsButton": "More payment methods",
            "payButton": "Pay",
            "storeDetails": "Save for my next payment",
            ...
        }
    };
  3. To use your localization in your payment form, provide the following parameters in the Drop-in configuration object:

    Parameter name Required Description
    locale -white_check_mark- The locale you created in the previous step.
    translations -white_check_mark- Use translations

    The example below shows how you would use a created localization for en-GB in Drop-in.

    const configuration = {
        locale: "en-GB",
        translations: translations,
        ...
    };
    
    const checkout = new AdyenCheckout(configuration);
    const dropin = checkout.create('dropin').mount('#dropin-container');

Customizable text

The translations object below represents Drop-in UI text that can be changed (by either customizing or creating a localization).

Translations object
const translations = {
    // Locale being customized or created
    "en-US": {
        // Define text that appears in payment form
        "paymentMethods.moreMethodsButton": "More payment methods",
        "payButton": "Pay",
        "payButton.redirecting": "Redirecting...",
        "storeDetails": "Save for my next payment",
        "payment.redirecting": "You will be redirected…",
        "payment.processing": "Your payment is being processed",
        "creditCard.holderName.placeholder": "J. Smith",
        "creditCard.holderName.invalid": "Invalid cardholder name",
        "creditCard.numberField.title": "Card number",
        "creditCard.numberField.placeholder": "1234 5678 9012 3456",
        "creditCard.numberField.invalid": "Invalid card number",
        "creditCard.expiryDateField.title": "Expiry date",
        "creditCard.expiryDateField.placeholder": "MM/YY",
        "creditCard.expiryDateField.invalid": "Invalid expiry date",
        "creditCard.expiryDateField.month": "Month",
        "creditCard.expiryDateField.month.placeholder": "MM",
        "creditCard.expiryDateField.year.placeholder": "YY",
        "creditCard.expiryDateField.year": "Year",
        "creditCard.cvcField.title": "CVC / CVV",
        "creditCard.cvcField.placeholder": "123",
        "creditCard.cvcField.placeholder.4digits": "4 digits",
        "creditCard.cvcField.placeholder.3digits": "3 digits",
        "creditCard.storeDetailsButton": "Remember for next time",
        "creditCard.oneClickVerification.invalidInput.title": "Invalid CVC / CVV format",
        "installments": "Number of installments",
        "sepaDirectDebit.ibanField.invalid": "Invalid account number",
        "sepaDirectDebit.nameField.placeholder": "J. Smith",
        "sepa.ownerName": "Holder Name",
        "sepa.ibanNumber": "Account Number (IBAN)",
        "giropay.searchField.placeholder": "Bankname / BIC / Bankleitzahl",
        "giropay.minimumLength": "Min. 4 characters",
        "giropay.noResults": "No search results",
        "giropay.details.bic": "BIC (Bank Identifier Code)",
        "error.title": "Error",
        "error.subtitle.redirect": "Redirect failed",
        "error.subtitle.payment": "Payment failed",
        "error.subtitle.refused": "Payment refused",
        "error.message.unknown": "An unknown error occurred",
        "idealIssuer.selectField.title": "Bank",
        "idealIssuer.selectField.placeholder": "Select your bank",
        "creditCard.success": "Payment Successful",
        "holderName": "Name on card",
        "loading": "Loading…",
        "continue": "Continue",
        "continueTo": "Continue to",
        "wechatpay.timetopay": "You have %@ to pay",
        "wechatpay.scanqrcode": "Scan QR code",
        "personalDetails": "Personal details",
        "socialSecurityNumber": "Social security number",
        "firstName": "First name",
        "infix": "Prefix",
        "lastName": "Last name",
        "mobileNumber": "Mobile number",
        "city": "City",
        "postalCode": "Postal code",
        "countryCode": "Country Code",
        "telephoneNumber": "Telephone number",
        "dateOfBirth": "Date of birth",
        "dateOfBirth.format": "DD/MM/YYYY",
        "shopperEmail": "E-mail address",
        "gender": "Gender",
        "male": "Male",
        "female": "Female",
        "billingAddress": "Billing address",
        "street": "Street",
        "stateOrProvince": "State or province",
        "country": "Country",
        "houseNumberOrName": "House number",
        "separateDeliveryAddress": "Specify a separate delivery address",
        "deliveryAddress": "Delivery Address",
        "creditCard.cvcField.title.optional": "CVC / CVV (optional)",
        "moreInformation": "More information",
        "klarna.consentCheckbox": "I consent to the processing of my data by Klarna for the purposes of identity- and credit assessment and the settlement of the purchase. I may revoke my %@ for the processing of data and for the purposes for which this is possible according to law. The general terms and conditions of the merchant apply.",
        "klarna.consent": "consent",
        "socialSecurityNumberLookUp.error": "Your address details could not be retrieved. Please check your date of birth and/or social security number and try again.",
        "privacyPolicy": "Privacy policy",
        "afterPay.agreement": "I agree with the %@ of AfterPay",
        "paymentConditions": "payment conditions",
        "openApp": "Open the app",
        "voucher.readInstructions": "Read instructions",
        "voucher.introduction": "Thank you for your purchase, please use the following coupon to complete your payment.",
        "voucher.expirationDate": "Expiration Date",
        "voucher.alternativeReference": "Alternative Reference",
        "dragonpay.voucher.non.bank.selectField.placeholder": "Select your provider",
        "dragonpay.voucher.bank.selectField.placeholder": "Select your bank",
        "voucher.paymentReferenceLabel": "Payment Reference",
        "voucher.surcharge": "Incl. %@ surcharge",
        "voucher.introduction.doku": "Thank you for your purchase, please use the following information to complete your payment.",
        "voucher.shopperName": "Shopper Name",
        "voucher.merchantName": "Merchant",
        "voucher.introduction.econtext": "Thank you for your purchase, please use the following information to complete your payment.",
        "voucher.telephoneNumber": "Phone Number",
        "voucher.shopperReference": "Shopper Reference",
        "boletobancario.btnLabel": "Generate Boleto",
        "boleto.sendCopyToEmail": "Send a copy to my email",
        "button.copy": "Copy",
        "button.download": "Download",
        "boleto.socialSecurityNumber": "CPF/CNPJ",
        "creditCard.storedCard.description.ariaLabel": "Stored card ends in %@",
        "voucher.entity": "Entity",
        "donateButton": "Donate",
        "notNowButton": "Not now",
        "thanksForYourSupport": "Thanks for your support!",
        "preauthorizeWith": "Preauthorize with",
        "confirmPreauthorization": "Confirm preauthorization",
        "confirmPurchase": "Confirm Purchase",
        "applyGiftcard": "Apply Giftcard",
        "creditCard.pin.title": "Pin",
        "creditCard.encryptedPassword.label": "First 2 digits of card password",
        "creditCard.encryptedPassword.placeholder": "12",
        "creditCard.encryptedPassword.invalid": "Invalid password",
        "creditCard.taxNumber.label": "Cardholder birthdate (YYMMDD) or Corporate registration number (10 digits)",
        "creditCard.taxNumber.placeholder": "YYMMDD / 0123456789", // <= SKIP TRANSLATION (format is always the same)
        "creditCard.taxNumber.labelAlt": "Corporate registration number (10 digits)",
        "creditCard.taxNumber.invalid": "Invalid Cardholder birthdate or Corporate registration number",
        "storedPaymentMethod.disable.button": "Remove",
        "storedPaymentMethod.disable.confirmation": "Remove stored payment method",
        "storedPaymentMethod.disable.confirmButton": "Yes, remove",
        "storedPaymentMethod.disable.cancelButton": "Cancel",
        "ach.bankAccount": "Bank account",
        "ach.accountHolderNameField.title": "Account holder name",
        "ach.accountHolderNameField.placeholder": "J. Smith",
        "ach.accountHolderNameField.invalid": "Invalid account holder name",
        "ach.accountNumberField.title": "Account number",
        "ach.accountNumberField.invalid": "Invalid account number",
        "ach.accountLocationField.title": "ABA routing number",
        "ach.accountLocationField.invalid": "Invalid ABA routing number",
        "select.stateOrProvince": "Select state or province",
        "select.country": "Select country",
        "generateQRCode": "Generate QR Code",
        "blik.confirmPayment": "Open your banking app to confirm the payment.",
        "blik.invalid": "Enter 6 numbers",
        "blik.code": "6-digit code",
        "blik.help": "Get the code from your banking app."
    }
};

See also