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.
Supported languages
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 - Brazil | pt-BR | |
Portuguese - Portugal | pt-PT | |
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.
Change language
By default, the Component is presented according to the shopperLocale
from your /sessions
request. If this language is not supported Drop-in, the Component is presented in US English.
You can also set the Component language by specifying a
locale
on the AdyenCheckout
instance.
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: