Search docs

Are you looking for test card numbers?

Would you like to contact support?

Start searching Adyen's documentation...

  Documentation

Localizing Components

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

If you integrated with our JavaScript Components, you can:

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
    Chinese - Simplified zh_CN
    Chinese - Traditional zh_TW
    Danish da_DK
    Dutch nl_NL
    English - US en_US
    French fr_FR
    German de_DE
    Italian it_IT
    Norwegian no_NO
    Polish pl_PL
    Portuguese pt_BR
    Spanish es_ES
    Swedish sv_SE

You can find more information on the configuration object in Step 2 our API integration 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 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"
  }
};

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 locale you want to create. For example, 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:

Fields

The fields that can be rendered in the Components are: 

{
    "paymentMethods.moreMethodsButton": "More payment methods",
    "payButton": "Pay",
    "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.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 expiration 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",
    "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": "Cardholder name",
    "loading": "Loading…",
    "wechatpay.timetopay": "You have %@ to pay",
    "wechatpay.scanqrcode": "Scan the 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",
    "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",
    "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"
}

See also