> ## 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 收银台客制化配置

> 在 Merchant Portal 中配置收银台 Logo、主题样式、子商户样式、发布规则和权限。

你可以在 Merchant Portal 中配置 Waffo 收银台的默认展示样式，无需修改代码。配置保存并发布后，后续新创建的订单会使用最新样式。

<Note>
  API 传参仍然优先于 Portal 配置。如果订单创建请求中传入了 `paymentInfo.cashierAppearance`，该订单会使用 API 中的样式。
</Note>

## 进入配置页

<Steps>
  <Step title="登录 Merchant Portal">
    使用有权限的账号登录 Merchant Portal。
  </Step>

  <Step title="打开收银台客制化页面">
    进入 **Checkout → Cashier Customization**。
  </Step>

  <Step title="修改配置">
    在左侧配置面板修改 Logo、主题颜色、字体大小和圆角。
  </Step>

  <Step title="预览效果">
    在右侧预览区查看收银台效果。
  </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="收银台客制化页面总览" width="1849" height="1207" data-path="images/developer-docs/integration/checkout/portal-customization/page-01-image-01.png" />
</Frame>

## 上传商户 Logo

在 **Features** 页面上传收银台 Logo。

| 项目   | 说明                |
| ---- | ----------------- |
| 支持格式 | `PNG`、`JPG`、`SVG` |
| 建议尺寸 | `40 x 40 px`      |
| 未上传时 | 点击或拖拽上传           |
| 已上传时 | 可以更换或删除 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 区域" 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="已上传 Logo 后的更换和删除入口" 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 配置说明" width="1834" height="1204" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-01.png" />
</Frame>

## 设置收银台样式

在 **Style** 页面配置收银台主题。你可以一键应用预设主题，也可以按品牌规范自定义颜色和样式参数。

<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 页面主题配置" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-02-image-01.png" />
</Frame>

### 颜色字段

| 字段                     | 说明            |
| ---------------------- | ------------- |
| Primary Color          | 主色调，用于按钮和强调元素 |
| Background Color       | 页面背景色         |
| Middle Bg Color        | 中间区域背景色       |
| Text Color             | 主要文字颜色        |
| Secondary Text Color   | 次要文字颜色        |
| Tertiary Text Color    | 第三级文字颜色       |
| Danger / Error Color   | 危险或错误状态颜色     |
| Info Message Box Color | 信息提示框颜色       |

### 样式参数

| 字段             | 说明     |
| -------------- | ------ |
| Font Size Base | 基础字体大小 |
| Border Radius  | 圆角大小   |

## 预览配置效果

修改配置时，右侧预览区会实时显示收银台效果。你可以切换国家或地区，查看不同货币、语言和支付方式下的展示效果。

<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="不同国家或地区下的预览效果" width="1280" height="832" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-04.png" />
</Frame>

<Note>
  某些样式字段可能不会在当前预览中立即体现。这通常不是配置未生效，而是因为不同国家、地区或产品类型的收银台页面结构不同。如果当前预览页面不包含对应元素，该样式不会显示。你可以切换到其他国家、地区或产品类型继续检查。
</Note>

## 配置子商户样式

如果你的账户下有子商户（SubMID），主商户（MID）的配置默认会应用到所有子商户。

<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="关闭统一配置后显示子商户列表" width="1280" height="838" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-02.png" />
</Frame>

如需为子商户单独配置样式：

<Steps>
  <Step title="关闭统一配置">
    关闭 **Apply MID config to all SubMIDs**。
  </Step>

  <Step title="编辑子商户">
    在子商户列表中点击 **Edit**。
  </Step>

  <Step title="配置样式">
    按与主商户相同的方式配置 **Features** 和 **Style**。
  </Step>

  <Step title="保存配置">
    保存后，该子商户状态会显示为 **Customized**。
  </Step>
</Steps>

单独配置子商户不会影响其他子商户。

<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="进入子商户独立配置页面" width="1833" height="1202" data-path="images/developer-docs/integration/checkout/portal-customization/page-04-image-03.png" />
</Frame>

如需恢复某个子商户使用主商户配置，在子商户列表中点击 **Reset** 并确认。

<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="重置子商户配置" width="1280" height="834" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-01.png" />
</Frame>

<Warning>
  如果重新启用统一配置，已有的子商户自定义样式会被清除，所有子商户会重新使用主商户配置。
</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="重新启用统一配置前的确认" width="1280" height="841" data-path="images/developer-docs/integration/checkout/portal-customization/page-05-image-02.png" />
</Frame>

## 保存并发布

页面中的修改只用于当前预览，不会自动应用到实际订单。

点击 **Save & Publish** 后：

1. 当前配置会被保存。
2. 后续新创建的订单会使用最新配置。

如果修改后没有点击 **Save & Publish**，实际下单时仍会使用上一次已保存的配置。

<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 & Publish 按钮" width="1280" height="837" data-path="images/developer-docs/integration/checkout/portal-customization/page-06-image-01.png" />
</Frame>

## 权限说明

| 角色              | 查看配置 | 修改并保存 |
| --------------- | ---- | ----- |
| Super Admin     | 支持   | 支持    |
| Admin           | 支持   | 支持    |
| General         | 支持   | 不支持   |
| Read-only       | 支持   | 不支持   |
| Dev             | 支持   | 不支持   |
| Dispute Manager | 不支持  | 不支持   |
