Localizing Components

Learn how to customize the text displayed in a Component, or create your own localization.

If you integrated with our JavaScript Components, you can:

Change the language rendered in the Components.
Customize the text used in a localization.
Create your own localization.

Change language

By default, text rendered in Components is in English - US (en-US).

To change the language:

In the configuration object on your payment page, specify the locale of the language you want rendered in your payment form.

The following languages are supported:

Language	locale
Arabic - International	ar
Chinese - Simplified	zh-CN
Chinese - Traditional	zh-TW
Croatian	hr-HR
Czech	cs-CZ
Danish	da-DK
Dutch	nl-NL
English - US	en-US
Finnish	fi-FI
French	fr-FR
German	de-DE
Greek	el-GR
Hungarian	hu-HU
Italian	it-IT
Japanese	ja-JP
Korean	ko-KR
Norwegian	no-NO
Polish	pl-PL
Portuguese	pt-BR
Romanian	ro-RO
Russian	ru-RU
Slovak	sk-SK
Slovenian	sl-SI
Spanish	es-ES
Swedish	sv-SE

Update to the latest Components version if not all of the above languages seem available.

You can find more information on the configuration object in the Drop-in or Components guide.

Customize localization

The supported localizations can be customized, replacing the default text with the text of your choice.

To customize a supported localization:

Add a translations object to your payments page with the fields you want to customize. For each specify:
- locale you want to customize.
- The fields you want to customize, and the text you want to present for this field.

For example, to customize the English - US (en-US) translation so that your payments form displays:

Shipping Address in place of Delivery Address.
State in place of State or Province.

const translations = {
  "en-US": {
    "deliveryAddress": "Shipping Address",
    "stateOrProvince": "State"
  }
};

To use this custom localization in the Components:

Specify the locale of your custom localization (en-US) in the configuration object you have in your payments page.

const configuration = {
    locale: "en-US",
    translations: translations,
    ...
};

const checkout = new AdyenCheckout(configuration);

Create localization

If your shoppers use a language that isn't supported by the Components, you can create your own localization.

To create a localization:

Add a translations object to your payment page, specifying:
- The localization you want to create. You must use a separator, which can be a hyphen (-) or an underscore (_). For example, use en-GB for English - British.
- An object containing the fields that are used in the Components, as well as the text you want displayed for each field.

The following example shows how you would create a localization for English - British (en-GB).

const translations = {
    "en-GB": {
        "paymentMethods.moreMethodsButton": "More payment methods",
        "payButton": "Pay",
        "storeDetails": "Save for my next payment",
        ...
    }
};

To use this localization in the Components:

Specify the locale of your created localization (en-GB) in the configuration object you have in your payments page.

const configuration = {
    locale: "en-GB",
    translations: translations,
    ...
};

const checkout = new AdyenCheckout(configuration);

Fields

The following are text that can be rendered in the Components. For a full list, refer to our GitHub repository.

{
    "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": "Name on card",
    "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.storeDetailsButton": "Remember for next time",
    "creditCard.oneClickVerification.invalidInput.title": "Invalid CVC / CVV format",
    "creditCard.cvcField.placeholder.4digits": "4 digits",
    "creditCard.cvcField.placeholder.3digits": "3 digits",
    "installments": "Number of installments",
    "installmentOption": "%{times}x %{partialValue}",
    "sepaDirectDebit.ibanField.invalid": "Invalid account number",
    "sepaDirectDebit.nameField.placeholder": "J. Smith",
    "sepa.ownerName": "Holder Name",
    "sepa.ibanNumber": "Account Number (IBAN)",
    "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",
    "loading": "Loading…",
    "continue": "Continue",
    "continueTo": "Continue to",
    "wechatpay.timetopay": "You have %@ to pay",
    "wechatpay.scanqrcode": "Scan QR code",
    "personalDetails": "Personal details",
    "companyDetails": "Company details",
    "companyDetails.name": "Company name",
    "companyDetails.registrationNumber": "Registration number",
    "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",
    "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)",
    "issuerList.wallet.placeholder": "Select your wallet",
    "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",
    "voucher.collectionInstitutionNumber": "Collection Institution Number",
    "voucher.econtext.telephoneNumber.invalid": "Telephone number must be 10 or 11 digits long",
    "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.labelAlt": "Corporate registration number (10 digits)",
    "creditCard.taxNumber.invalid": "Invalid Cardholder birthdate or Corporate registration number",
    "creditCard.taxNumber.placeholder": "YYMMDD / 0123456789",
    "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",
    "telephoneNumber.invalid": "Invalid telephone number",
    "qrCodeOrApp": "or",
    "paypal.processingPayment": "Processing payment...",
    "generateQRCode": "Generate QR code",
    "await.waitForConfirmation": "Waiting for confirmation",
    "mbway.confirmPayment": "Confirm your payment on the MB WAY app",
    "shopperEmail.invalid": "Invalid email address",
    "dateOfBirth.format": "DD/MM/YYYY",
    "dateOfBirth.invalid": "You must be at least 18 years old",
    "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.",
    "swish.pendingMessage": "After you scan, the status can be pending for up to 10 minutes. Attempting to pay again within this time may result in multiple charges.",

    //Use these translation fields to configure the aria-label attribute
    //Starting Web Components 4.0.0 this is the only way to configure the aria-label attribute
    "creditCard.encryptedCardNumber.aria.iframeTitle": "Iframe for secured card number",
    "creditCard.encryptedCardNumber.aria.label": "Card number field",
    "creditCard.encryptedExpiryDate.aria.iframeTitle": "Iframe for secured card expiry date",
    "creditCard.encryptedExpiryDate.aria.label": "Expiry date field",
    "creditCard.encryptedExpiryMonth.aria.iframeTitle": "Iframe for secured card expiry month",
    "creditCard.encryptedExpiryMonth.aria.label": "Expiry month field",
    "creditCard.encryptedExpiryYear.aria.iframeTitle": "Iframe for secured card expiry year",
    "creditCard.encryptedExpiryYear.aria.label": "Expiry year field",
    "creditCard.encryptedSecurityCode.aria.iframeTitle": "Iframe for secured card security code",
    "creditCard.encryptedSecurityCode.aria.label": "Security code field",
    "giftcard.encryptedCardNumber.aria.iframeTitle": "Iframe for secured gift card number",
    "giftcard.encryptedCardNumber.aria.label": "Gift card number field",
    "giftcard.encryptedSecurityCode.aria.iframeTitle": "Iframe for secured gift card security code",
    "giftcard.encryptedSecurityCode.aria.label": "Gift card security code field",
    "ach.encryptedBankAccountNumber.aria.iframeTitle": "Iframe for secured bank account number",
    "ach.encryptedBankAccountNumber.aria.label": "Bank account field",
    "ach.encryptedBankLocationId.aria.iframeTitle": "Iframe for secured bank routing number" ,
    "ach.encryptedBankLocationId.aria.label": "Bank routing number field",

    //Card payment error strings for version 3.14 and later  
    "error.va.gen.01": "Incomplete field",
    "error.va.gen.02": "Field not valid",
    "error.va.sf-cc-num.01": "Invalid card number",
    "error.va.sf-cc-num.02": "Typed card number doesn't match card brand",
    "error.va.sf-cc-num.03": "Unsupported card entered",
    "error.va.sf-cc-dat.01": "Card too old",
    "error.va.sf-cc-dat.02": "Date too far in the future"
}

Text direction

The 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.
To change the text direction to right-to-left, use the HTML dir attribute on the parent element for the checkout container. For example, to set the text direction as right-to-left on the body of the page:

https://docs.adyen.com/online-payments/components-web/localization-components#set-text-direction-to-right-to-left

Set text direction to right-to-left

<body dir="rtl">
...
</body>

Are you looking for test card numbers?

Would you like to contact support?