> ## 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.

# Merchant Portal cashier customization

> Configure cashier Logo, theme styles, sub-merchant styles, publishing rules, and permissions in the Merchant Portal.

You can configure the default Waffo cashier style in the Merchant Portal without code changes. After you save and publish the configuration, newly created orders use the latest style.

<Note>
  API parameters still have higher priority than Portal configuration. If the order creation request includes `paymentInfo.cashierAppearance`, that order uses the style passed in the API request.
</Note>

## Open the configuration page

<Steps>
  <Step title="Log in to Merchant Portal">
    Log in with an account that has the required permissions.
  </Step>

  <Step title="Open cashier customization">
    Go to **Checkout → Cashier Customization**.
  </Step>

  <Step title="Update settings">
    Use the left configuration panel to update the Logo, theme colors, base font size, and corner radius.
  </Step>

  <Step title="Preview the cashier">
    Use the preview area on the right side to check the cashier display.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-01-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=1e69bc7c1c43eeb0d13f5a86fbc6a73b" alt="Cashier customization page overview" width="1849" height="1207" data-path="images/developer-docs/integration/checkout/portal-customization/page-01-image-01.png" />
</Frame>

## Upload merchant Logo

Upload the cashier Logo on the **Features** page.

| Item              | Description                |
| ----------------- | -------------------------- |
| Supported formats | `PNG`, `JPG`, `SVG`        |
| Recommended size  | `40 x 40 px`               |
| Before upload     | Click or drag to upload    |
| After upload      | Replace or delete the Logo |

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=178e1d96392f8455e9d454a653528b08" alt="Logo upload area" width="1834" height="1206" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-02.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-03.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=7a432008acfc00bc472923cd5df102ce" alt="Replace and delete controls after a Logo is uploaded" width="1838" height="1199" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-03.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=f189a04f242849a5f563b04d49c4eaa5" alt="Logo configuration guidance" width="1834" height="1204" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-01.png" />
</Frame>

## Set cashier style

Configure the cashier theme on the **Style** page. You can apply a preset theme or customize colors and style parameters based on your brand guidelines.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-02-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=09cef515a0ebf8cabadfa1da947e9412" alt="Style page theme configuration" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-01.png" />
</Frame>

### Color fields

| Field                  | Description                                        |
| ---------------------- | -------------------------------------------------- |
| Primary Color          | Primary color for buttons and highlighted elements |
| Background Color       | Page background color                              |
| Middle Bg Color        | Middle area background color                       |
| Text Color             | Main text color                                    |
| Secondary Text Color   | Secondary text color                               |
| Tertiary Text Color    | Tertiary text color                                |
| Danger / Error Color   | Danger or error state color                        |
| Info Message Box Color | Information message box color                      |

### Style parameters

| Field          | Description    |
| -------------- | -------------- |
| Font Size Base | Base font size |
| Border Radius  | Corner radius  |

## Preview the result

As you update settings, the preview area on the right side shows the cashier result in real time. You can switch the country or region to check the display for different currencies, languages, and payment methods.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-04.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=2c7bd2d33dedb8dbee079ce6d81adbff" alt="Preview result for different countries or regions" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-04.png" />
</Frame>

<Note>
  Some style fields may not appear immediately in the current preview. This usually does not mean the configuration failed. Cashier page structure can vary by country, region, or product type. If the current preview page does not contain the affected element, the style change will not be visible. Switch to another country, region, or product type to continue checking.
</Note>

## Configure sub-merchant styles

If your account has sub-merchants (SubMIDs), the main merchant (MID) configuration applies to all sub-merchants by default.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=06aebcc730b5d40c7061a41c0cb16475" alt="Sub-merchant list after unified configuration is disabled" width="1280" height="838" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-02.png" />
</Frame>

To configure a separate style for a sub-merchant:

<Steps>
  <Step title="Disable unified configuration">
    Turn off **Apply MID config to all SubMIDs**.
  </Step>

  <Step title="Edit a sub-merchant">
    Click **Edit** in the sub-merchant list.
  </Step>

  <Step title="Configure the style">
    Configure **Features** and **Style** in the same way as the main merchant.
  </Step>

  <Step title="Save the configuration">
    After saving, the sub-merchant status is shown as **Customized**.
  </Step>
</Steps>

Configuring one sub-merchant does not affect other sub-merchants.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-04-image-03.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=0c25039f6feab0ab4a46b2a3ff811b46" alt="Sub-merchant independent configuration page" width="1833" height="1202" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-03.png" />
</Frame>

To restore a sub-merchant to the main merchant configuration, click **Reset** in the sub-merchant list and confirm.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-05-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=ec0675f1290d3d1325020c0a2768efae" alt="Reset a sub-merchant configuration" width="1280" height="834" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-01.png" />
</Frame>

<Warning>
  If you enable unified configuration again, existing sub-merchant custom styles are cleared and all sub-merchants use the main merchant configuration again.
</Warning>

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-05-image-02.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=cc6f2fd2ddefa9a3877501a483188850" alt="Confirmation before enabling unified configuration again" width="1280" height="841" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-02.png" />
</Frame>

## Save and publish

Changes on the page apply only to the current preview. They are not automatically applied to real orders.

After you click **Save & Publish**:

1. The current configuration is saved.
2. Newly created orders use the latest configuration.

If you update settings but do not click **Save & Publish**, real orders continue to use the last saved configuration.

<Frame>
  <img src="https://mintcdn.com/waffo-docs/mrmpI6H8vZr9fPaZ/images/developer-docs/integration/checkout/portal-customization/page-06-image-01.png?fit=max&auto=format&n=mrmpI6H8vZr9fPaZ&q=85&s=20e7e9644af6970e97eb4d11d62fa8ac" alt="Save and Publish button" width="1280" height="837" data-path="images/developer-docs/integration/checkout/portal-customization/page-06-image-01.png" />
</Frame>

## Permissions

| Role            | View configuration | Modify and save |
| --------------- | ------------------ | --------------- |
| Super Admin     | Supported          | Supported       |
| Admin           | Supported          | Supported       |
| General         | Supported          | Not supported   |
| Read-only       | Supported          | Not supported   |
| Dev             | Supported          | Not supported   |
| Dispute Manager | Not supported      | Not supported   |