Are you looking for test card numbers?

Would you like to contact support?

Atenção, esta página não se encontra disponível em Português
Default icon

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 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 [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:

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:

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:

Set text direction to right-to-left
<body dir="rtl">
...
</body>

See also