Add localization to your Flow integration
Last updated: May 7, 2024
By default, the language displayed on Flow is derived from the locale set in the payment-session request.
Alternatively, you can use the locale configuration option to manually set the language in the CheckoutWebComponent. For example:
The following left-to-right (LTR) and right-to-left (RTL) languages are supported:
| Language | Code | Language type |
|---|---|---|
Arabic |
| RTL |
Chinese (China) |
| LTR |
Chinese (Hong Kong) |
| LTR |
Chinese (Taiwan) |
| LTR |
Danish |
| LTR |
Dutch (Netherlands) |
| LTR |
English (United Kingdom) |
| LTR |
Filipino |
| LTR |
Finnish |
| LTR |
French |
| LTR |
German |
| LTR |
Greek |
| LTR |
Hindi |
| LTR |
Indonesian |
| LTR |
Italian |
| LTR |
Japanese |
| LTR |
Malay |
| LTR |
Norwegian Bokmål |
| LTR |
Portuguese |
| LTR |
Spanish |
| LTR |
Swedish |
| LTR |
Thai |
| LTR |
Vietnamese |
| LTR |
You can customize the default text translation for a specific language by providing your own strings.
- Create a
translationsobject and specify thelocalefor which you want to provide custom translations. Within the locale object, include the translation keys you want to customize, along with their values. For example:
- Pass the
translationsobject when you create the instance ofCheckoutWebComponents.
You can customize the following default text:
| Translation key | Default text | Description |
|---|---|---|
| Full name | The call to action message to capture the customer's full name. |
| Card | The label for the card option. |
| Cardholder name | Label for cardholder name input. |
| Card number | Label for the card number input. |
| Your card number is incomplete | Error message displayed when the card number is incomplete. |
|
| Error message displayed when the card number comes from an unsupported card scheme. |
| Expiry date | Label for card expiry date input. |
| Your card's expiry date is in the past | Error message displayed when the card expiry date is invalid. |
| MM | Message describing the format for card expiry month input. |
| YY | Message describing the format for card expiry year input. |
| Choose your preferred scheme | Label for preferred scheme selection. |
| Your card offers two schemes, and you can select the one you prefer. Otherwise, the default choice will apply. | Message prompting the customer to select their preferred scheme. |
| Security code | Label for card security code (CVV) input. |
| Your card's security code is incomplete | Error message displayed when the security code (CVV) is incomplete. |
| CVV | Message describing the format for card security code input. |
| Must be a valid email | Validation message displayed when the customer provides an invalid email. |
| Placeholder message displayed in the empty email input field. | |
| Jordan Smith | Placeholder message displayed in the empty full name input field. |
| Must be greater than | Validation message displayed when the customer inputs a value shorter than the required length. |
| Must be less than | Validation message displayed when the customer inputs a value longer than the required length. |
| This field is required | Validation message displayed when the customer leaves a required field blank. |
| Select your bank | Label for bank selection. |
| Full name | Label for full name input. |
| Label for email input. | |
| Full name | Label for full name input. |
| Pay | The call to action displayed on the pay button. |
| Pay with | The payment method-specific call to action displayed on the pay button. |
| Payment complete | Message displayed when the payment is completed. |
| Payment failed. Try again. | Error message displayed if the payment attempt fails. |
| Payment processing | Message displayed while the payment is processing. |
| After clicking on Pay, you will be redirected to finalize your payment | Message displayed when the customer is about to be redirected to complete their payment. |
| Incorrect details – try again or use another payment method | Error message displayed when the customer has provided invalid payment details. |
| Try another payment method | Error message displayed when the |
| Payment declined – try another payment method | Error message displayed when the merchant is misconfigured for the chosen payment method. |
| Not enough funds – try another payment method | Error message displayed when the customer does not hold sufficient funds to complete the transaction with their chosen payment method. |
| Payment declined – try again or use another payment method | Fallback message displayed when the chosen payment method declines the transaction. |
To add support for locales and languages not natively supported by Flow, provide the locale as an object of key-value pairs within the same translations object you used for custom translations. For example, to add support for US English (en-US):
Information
If you are missing a translation for the locale you provide, Flow will attempt to fall back to the language of the specified locale. If the locale language is not supported, Flow will fall back to en.