# Add localization to your Flow integration

Flow derives the display language from the locale you provide in your `payment-session` request, by default.

Alternatively, you can use the `locale` [configuration option](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/get-started-with-flow.md#Configuration_options) to manually set the language in the `CheckoutWebComponent`. For example:

```javascript
const checkout = await CheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox',
  locale: 'en',
});
```

---

## Supported languages

The following left-to-right (LtR) and right-to-left (RtL) languages are supported:

| Language | Code | Language type |
| --- | --- | --- |
| Arabic | `ar` | RtL |
| Bulgarian | `bg` | LtR |
| Chinese (China) | `zh` | LtR |
| Chinese (Hong Kong) | `zh-hk` | LtR |
| Chinese (Taiwan) | `zh-TW` | LtR |
| Czech | `cs` | LtR |
| Danish | `da-DK` | LtR |
| Dutch (Netherlands) | `nl` | LtR |
| English (United Kingdom) | `en` | LtR |
| Filipino | `fil` | LtR |
| Finnish | `fi` | LtR |
| French | `fr` | LtR |
| German | `de` | LtR |
| Greek | `el` | LtR |
| Hindi | `hi` | LtR |
| Hungarian | `hu` | LtR |
| Indonesian | `id` | LtR |
| Italian | `it` | LtR |
| Japanese | `ja` | LtR |
| Korean | `ko-kr` | LtR |
| Lithuanian | `lt` | LtR |
| Malay | `ms` | LtR |
| Norwegian | `no` | LtR |
| Norwegian Bokmål | `nb` | LtR |
| Polish | `pl` | LtR |
| Portuguese | `pt` | LtR |
| Romanian | `ro` | LtR |
| Russian | `ru` | LtR |
| Slovak | `sk` | LtR |
| Spanish | `es` | LtR |
| Swedish | `sv` | LtR |
| Thai | `th` | LtR |
| Turkish | `tr` | LtR |
| Vietnamese | `vi` | LtR |

> **Information**
>
> Hungarian, Lithuanian, and Romanian are also supported locales for Google Pay.

---

## Add custom translations

You can customize the default text translation for a specific language by providing your own strings.

1. Create a `translations` object and specify the `locale` you want to provide custom translations for. In the `locale` object, provide the translation keys you want to customize, along with their values. For example:

```javascript
const translations = {
  en: {
    'form.required': 'Please provide this field',
    'pay': 'Pay now',
    'pay_button.payment_failed': 'Payment failed, please try again',
  },
};
```

2. Pass the `translations` object when you create the instance of `CheckoutWebComponents`.

```javascript
const checkout = await CheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox',
  locale: 'en',
  translations,
});
```

You can customize the following default text:

| Translation key | Default text | Description |
| --- | --- | --- |
| `bank_account` | _Bank Account_ | The label for the bank account option. |
| `button.cancel` | _Cancel_ | The label for the _Cancel_ button. |
| `button.change` | _Change_ | The label for the _Change_ button. |
| `button.continue` | _Continue_ | The label for the _Continue_ button. |
| `button.loading` | _Loading_ | The message displayed when loading additional information. |
| `card` | _Card_ | The label for the card option. |
| `card.card_holder_name` | _Cardholder name_ | The label for the cardholder name input. |
| `card.card_number` | _Card number_ | The label for the card number input. |
| `card.card_number.invalid` | _Your card number is incomplete_ | The error message displayed when the card number is incomplete. |
| `card.card_number.not_supported` | _{CARD} not supported_ | The error message displayed when the card number is for an unsupported card scheme. |
| `card.card_number.placeholder` | _1234 1234 1234 1234_ | The message describing the format of the card number input. |
| `card.expiry_date` | _Expiry date_ | The label for the card expiry date input. |
| `card.expiry_date.invalid` | _Your card's expiry date is in the past_ | The error message displayed when the card expiry date is invalid. |
| `card.expiry_date.placeholder.month` | _MM_ | The message describing the format of the card expiry month input. |
| `card.expiry_date.placeholder.year` | _YY_ | The message describing the format of the card expiry year input. |
| `card.preferred_scheme.cta` | _Choose your preferred scheme_ | The label for the preferred scheme selection. |
| `card.preferred_scheme.description` | "_Your card offers two schemes, and you can select the one you prefer. Otherwise, the default choice applies._" | The message prompting the customer to select their preferred scheme. |
| `card.security_code` | _Security code_ | The label for the card verification value (CVV) input. |
| `card.security_code.invalid` | _Your card's security code is incomplete_ | The error message displayed when the CVV is incomplete. |
| `card.security_code.placeholder` | _CVV_ | The message describing the format of the CVV input. |
| `card.store_for_future_use.collect_consent` | _Save card details for future purchases_ | The label for the option to store card details for future purchases. |
| `card.store_for_remember_me.collect_consent` | _Remember this card_ | The call to action (CtA) message to remember card details for future use. |
| `customer.phone_number.not_registered` | _Phone number not registered_ | The error message displayed when the phone number is unregistered. |
| `form.edit` | _Edit_ | The label for the _Edit_ button. |
| `form.email` | _Email address_ | The label for the email input. |
| `form.email.invalid` | _Must be a valid email_ | The error message displayed when the customer provides an invalid email. |
| `form.email.placeholder` | `jordan.smith@email.com` | The placeholder message displayed in the empty email input field. |
| `form.full_name` | _Full name_ | The label for the full name input. |
| `form.full_name.placeholder` | _Jordan Smith_ | The placeholder message displayed in the empty full name input field. |
| `form.greater_than` | _Must be greater than `{VALUE}` characters_ | The error message displayed when the customer inputs a value shorter than the required length. |
| `form.holder_first_name` | _Holder first name_ | The label for the account holder first name input. |
| `form.holder_first_name.placeholder` | _Jordan_ | The placeholder message displayed in the empty account holder first name input field. |
| `form.holder_last_name` | _Holder last name_ | The label for the account holder last name input. |
| `form.holder_last_name.placeholder` | _Smith_ | The placeholder message displayed in the empty account holder last name input field. |
| `form.less_than` | _Must be less than `{VALUE}` characters_ | The error message displayed when the customer inputs a value longer than the required length. |
| `form.national_id` | _National ID_ | The label for the national ID input. |
| `form.national_id.invalid` | _National ID is invalid_ | The error message displayed when the national ID is invalid. |
| `form.national_id.placeholder` | _30063412345_ | The placeholder message displayed in the empty national ID input field. |
| `form.phone_country_code` | _Country code_ | The label for the phone country code input. |
| `form.phone_number` | _Phone number_ | The label for the phone number input. |
| `form.phone_number.cta` | _Enter your phone number_ | The label for the phone number entry. |
| `form.phone_number.invalid` | _Must be a valid phone number_ | The error message displayed when the phone number is invalid. |
| `form.required` | _This field is required_ | The error message displayed when the customer leaves a required field empty. |
| `klarna.show_options` | _Show Klarna options_ | The label for the _Display Klarna options_ button. |
| `otp.code` | _Enter your verification code_ | The label for the verification code input. |
| `otp.code.description` | _Enter the verification code sent to `<address>{ADDRESS}</address>`_ | The CtA message to capture the verification code sent to the customer’s contact details. |
| `otp.code.description.email` | _Enter the verification code sent to your email_ | The CtA message to capture the verification code sent to the customer’s email. |
| `otp.code.description.phone` | _Enter the verification code sent via SMS_ | The CtA message to capture the verification code sent to the customer’s phone via SMS. |
| `otp.code.description.whatsapp` | _Enter the verification code sent via WhatsApp_ | The CtA message to capture the verification code sent to the customer’s phone via WhatsApp. |
| `otp.code.email` | _Send code via email_ | The CtA message to send the verification code via email. |
| `otp.code.error` | _Incorrect verification code. Try again._ | The error message displayed when the verification code is invalid. |
| `otp.code.expired` | _The code has expired. Request a new one._ | The error message displayed when the verification code expires. |
| `otp.code.length` | _Verification code must be `{MIN}`-`{MAX}` digits_ | The error message displayed when the verification code has an invalid number of digits. |
| `otp.code.phone` | _Send code via SMS_ | The CtA message to send the verification code via SMS. |
| `otp.code.send` | _We'll send a verification code to `<contact>{CONTACT}</contact>`_ | The message displayed to confirm the customer’s contact details to send the verification code to. |
| `otp.failed` | _Failed to verify OTP_ | The error message displayed when customer verification fails. |
| `otp.max_resends` | _Max resends reached_ | The error message displayed after reaching the maximum resend limit for the verification code. |
| `otp.max_retries` | _Max retries reached_ | The error message displayed after reaching the maximum retry limit for the verification code. |
| `otp.resend.countdown` | _Resend a code in `<countdown>{COUNTDOWN}</countdown>`_ | The message displayed when the customer needs to wait before the verification code can be resent. |
| `otp.resend.cta` | _Resend code_ | The CtA message to resend the verification code. |
| `otp.resend.description` | _Didn’t receive the code?_ | The message displayed to the customer if they want their verification code to be resent. |
| `otp.resend.email` | _Send to email instead_ | The CtA message to resend the verification code via email. |
| `otp.resend.phone` | _Send to SMS instead_ | The CtA message to resend the verification code via SMS. |
| `otp.send.email` | _Send verification email_ | The CtA message to send the verification code via email. |
| `otp.send.phone` | _Send verification SMS_ | The CtA message to send the verification code via SMS. |
| `otp.sms.sending` | _Sending verification SMS_ | The message displayed when the verification code is being sent via SMS. |
| `pay_button.confirm` | _Confirm_ | The label for the _Confirm_ button. |
| `pay_button.confirming` | _Confirming_ | The message displayed when confirming details. |
| `pay_button.pay` | _Pay_ | The CtA displayed on the _Pay_ button. |
| `pay_button.payment_complete` | _Payment complete_ | The message displayed when the payment is completed. |
| `pay_button.payment_processing` | _Payment processing_ | The message displayed while the payment is processing. |
| `pay_button.pay_with` | _Pay with `{PAYMENT_METHOD}`_ | The payment method-specific CtA displayed on the _Pay_ button. |
| `pay_button.redirect_cta` | _After clicking on Pay, you are redirected to finalize your payment_ | The message displayed before the customer is redirected to complete their payment. |
| `payment.approval` | _Approve payment on the `{PAYMENT_METHOD}` app_ | The CtA message to approve the payment in the payment method's mobile app. |
| `payment.approval.cancel_cta` | _I have canceled this payment_ | The label for the button confirming that the customer cancelled the payment. |
| `payment.approval.confirm_cta` | _I have approved this payment_ | The label for the button confirming that the customer approved the payment. |
| `payment.declined.card_not_supported` | _Card not supported_ | The error message displayed when the customer provides an unsupported card. |
| `payment.declined.invalid_customer_data` | _Incorrect details – try again or use another payment method_ | The error message displayed when the customer provides invalid payment details. |
| `payment.declined.invalid_payment_session_data` | _Try another payment method_ | The error message displayed when the `PaymentSession` data provided is invalid for the payment method. |
| `payment.declined.merchant_misconfiguration` | _Payment declined – try another payment method_ | The error message displayed when your account is not configured for the payment method. |
| `payment.declined.not_enough_funds` | _Not enough funds – try another payment method_ | The error message displayed when the customer has insufficient funds to complete the transaction with their selected payment method. |
| `payment.declined.payment_cancelled` | _Payment cancelled_ | The error message displayed when the payment is cancelled. |
| `payment.declined.payment_expired` | _Payment expired_ | The error message displayed when the payment request expires. |
| `payment.declined.try_again` | _Payment declined – try again or use another payment method_ | The fallback message displayed when the selected payment method declines the transaction. |
| `payment.successful` | _Payment successful_ | The message displayed when the payment is successful. |
| `payment_context.error` | _Something went wrong. Try another payment method._ | The error message displayed after failing to load the payment method. |
| `sepa.creditor` | _Creditor_ | The label for the SEPA Direct Debit creditor name. |
| `sepa.creditor_id` | _Creditor ID_ | The label for the SEPA Direct Debit creditor ID. |
| `sepa.iban` | _IBAN_ | The label for the International Bank Account Number (IBAN) input. |
| `sepa.iban.invalid` | _Please enter a valid IBAN. Your IBAN should start with two letters and be 22 characters long_ | The error message displayed when the IBAN is invalid. |
| `sepa.iban.placeholder` | _AB12 1234 1234 1234 1234 12_ | The placeholder message displayed in the empty IBAN input. |
| `stored_card` | _Saved cards_ | The label for the stored card options. |
| `stored_card.card` | _Use a new card_ | The label for the use new card option displayed next to the stored card options. |
| `stored_card.loading` | _Loading your saved cards_ | The message displayed when loading stored card options. |
| `stored_card.other_payment_methods` | _Other payment methods_ | The label for other payment method options when stored cards are available. |
| `tag.default` | _Default_ | The label for the default option. |
| `tag.expired` | _Expired_ | The label for an expired option. |

---

## Add support for additional languages

To add support for locales and languages not natively supported by Flow, provide the locale as an object of key-value pairs in the same `translations` object you used for custom translations. For example, to add support for US English (`en-US`):

```javascript
const translations = {
  'en-US': {
    'pay_button.redirect_cta': 'After clicking on Pay, you will be redirected to finalize your payment',
  },
};

const checkout = await CheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox',
  locale: 'en-US',
  translations,
});
```

> **Information**
>
> If you're missing a translation for the locale you provide, Flow attempts to fall back to the language of the specified locale. If the locale language is also unsupported, Flow falls back to `en`.

---

## Next steps

**[Flow library reference](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference.md)**

See the configuration options and error handling steps for Flow.