> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appcharge.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Translate Your Checkout

This article explains how you can translate your Checkout so players can view content in their preferred language. To learn more, see [About Translations](/../../guides/translations/about-translations).

## Step 1 | Add languages

[Add your languages](/../../guides/translations/add-and-manage-languages) in the Publisher Dashboard.

## Step 2 | Set translations

[Set translations in the Publisher Dashboard](/../../guides/translations/set-and-manage-translations) directly, or programmatically using the [Translations API service](/../../api-reference/translations/introduction).

## Step 3 | Pass player's locale to the Checkout

Determine the player's locale, and then when [rendering the Checkout component](./integrate-the-sdk#step-4-%7C-render-and-configure-the-checkout-component), pass the player's language to the Checkout component using the `locale` property.

The format of the `locale` value depends on how the language's Display Name is configured in the Publisher Dashboard:

### Display Name differs from the standard ISO code

If the Display Name differs from the standard ISO code, use the following format:

```
locale = displayName;languageISOcode
```

For example, if you added Spanish as a language and set the Display Name to "spanish", set the following:

```
locale = spanish;es
```

### Display Name matches the standard ISO code

If the Display Name matches the standard ISO code, use the ISO code directly:

```
locale = languageISOcode
```

For example, if you added Spanish and set the Display Name to "es", set the following:

```
locale = es
```

## Complete example

Below is a complete code example for displaying the Checkout in the player's language:

<CodeGroup>
  ```javascript React theme={"system"}
  <AppchargeCheckout
    checkoutUrl={parsedUrl}
    locale="spanish;es"
    referrerUrl={window.location.protocol + "//" + window.location.host}
    onClose={() => console.log("Checkout closed")}
    onOrderCompletedSuccessfully={(params) => console.log("Order completed", params)}
  />
  ```

  ```html Angular theme={"system"}
  <appcharge-checkout
    [checkoutUrl]="parsedUrl"
    [locale]="'spanish;es'"
    [referrerUrl]="referrerUrl"
    [onClose]="closeCheckout"
    [onOrderCompletedSuccessfully]="onOrderSuccess">
  </appcharge-checkout>
  ```

  ```javascript JavaScript theme={"system"}
  AppchargeCheckout({
    checkoutUrl: parsedUrl,
    locale: "spanish;es",
    referrerUrl: window.location.protocol + "//" + window.location.host,
    onClose: () => console.log("Checkout closed"),
    onOrderCompletedSuccessfully: (params) => console.log("Order completed", params)
  });
  ```

  ```vue Vue 2 theme={"system"}
  <AppchargeCheckout
    :checkoutUrl="parsedUrl"
    locale="spanish;es"
    :referrerUrl="referrerUrl"
    :onClose="closeCheckout"
    :onOrderCompletedSuccessfully="onOrderSuccess"
  />
  ```

  ```vue Vue 3 theme={"system"}
  <AppchargeCheckout
    :checkoutUrl="parsedUrl"
    locale="spanish;es"
    :referrerUrl="referrerUrl"
    @close="closeCheckout"
    @orderCompletedSuccessfully="onOrderSuccess"
  />
  ```
</CodeGroup>