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

# Frontend components - Style customization

> Customization options for cashier appearance, language, and payment method filtering.

## Cashier appearance customization

When creating an order, pass CSS variables in JSON format via the `paymentInfo.cashierAppearance` parameter to customize the cashier appearance.

```json theme={null}
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "cashierAppearance": "{\"--primary-color\":\"#493daa\",\"--font-family\":\"Nunito Sans, sans-serif\"}"
  }
}
```

## Cashier language settings

Use the `paymentInfo.cashierLanguage` parameter to set the display language of the cashier, in IETF BCP 47 format.

| Language code | Language                        |
| ------------- | ------------------------------- |
| `en-HK`       | English (Hong Kong)             |
| `zh-Hant-HK`  | Traditional Chinese (Hong Kong) |
| `id-ID`       | Indonesian                      |
| `ms-MY`       | Malay                           |
| `tl-PH`       | Tagalog                         |

```json theme={null}
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "cashierLanguage": "en-HK"
  }
}
```

<Note>
  If the specified language is not supported, error code `A0026` will be returned.
</Note>

## Payment method filtering

Use `payMethodType` and `payMethodName` to control which payment methods are displayed on the cashier:

```json theme={null}
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "payMethodType": "CREDITCARD",
    "payMethodName": "CC_VISA"
  }
}
```

If not specified, the cashier will display all available payment methods.

You can also further filter by country via `payMethodCountry`:

```json theme={null}
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "payMethodCountry": "IDN"
  }
}
```