<!-- Source: https://docs.infraio.xyz/zh-CN/checkout/overview -->
<!-- Last updated: 2026-10-04 -->

# 结账 概览

**托管收银台**是买家实际发送资金的页面。你不需要自己渲染资产选择
器、每笔订单独立收款地址(CREATE2)或二维码 — SDK 会打开我们的页面（地址为
`https://checkout.infraio.xyz/<session_key>`），UI 由我们负责。

## 三种模式

- [Popup](https://docs.infraio.xyz/zh-CN/sdks/javascript#popup) — 居中的浮层弹窗，默认约 560×780。商店页面保持不动。付款后弹窗 关闭时触发 `onSuccess`。默认模式。
- [Redirect](https://docs.infraio.xyz/zh-CN/sdks/javascript#redirect) — 硬跳转到结账页。适合会拦截弹窗的浏览器，或浮层体验生硬的移动 端网页。买家通过会话中的 `success_url` / `cancel_url` 返回。
- [Embed](https://docs.infraio.xyz/zh-CN/sdks/javascript#embed) — 嵌入你页面内的 iframe。适合你想端到端掌控布局、不希望出现上下 文切换的场景。通过 postMessage 自动调整大小。

## 选择模式的经验法则

| 如果…… | 使用 |
| --- | --- |
| 桌面端网页、默认电商场景 | **Popup** |
| 移动端网页 | **Redirect**（移动端经常拦截弹窗） |
| CSP 限制严格的管理后台 | **Redirect** |
| App 内 webview / 原生页面内结账 | **Embed** |
| 你想要完全自定义的买家流程，并使用白标页头 | **Embed** + `hideHeader` + 自行接入钱包连接 |

## 买家会看到什么

无论使用哪种模式，页面都会展示：

1. **订单摘要**（明细项、总额、币种）。如果你已经在自己一侧展示
   过，可以用 `hideSummary` 隐藏。
2. **资产选择器** — 列出你在商户设置中启用的链 × 资产组合。买家从
   中选择一个。
3. **独立收款地址 + 二维码 + 金额**，针对所选组合生成。买家可以扫码、
   连接钱包（WalletConnect 按钮），或使用你通过 SDK 预先接入的钱包
   直接付款。在 TRON、Solana 和 TON 上,买家直接向你的资金库钱包付款;见[直达钱包的网络](https://docs.infraio.xyz/zh-CN/concepts/chains#直达钱包的网络)。
4. **状态提示** — "Waiting for transfer"、"Tx detected (3/12
   confirmations)"、"Paid"。
5. **Cancel** 按钮（始终显示）→ 触发 `onCancel`。

## 自定义页面

| 选项 | 方式 | 限制 |
| --- | --- | --- |
| 隐藏订单摘要 | SDK 上设置 `hideSummary: true` | 买家仍能在充值面板中看到总额 |
| 隐藏 InfraIO Pay 页头 | SDK 上设置 `hideHeader: true` | 搭配 `walletAddress` 可实现完全白标 |
| 预先接入钱包 | `walletAddress` + `walletChainId` + `onSignRequest` | 跳过 WalletConnect 弹窗 |
| 语言 | SDK 上的 `locale` — 取值为 `en`、`vi`、`ja`、`ko`、`es`、`pt-BR`、`ru`、`tr`、`zh-CN`、`zh-TW` 之一 | 会本地化结账页**和**退款页面（以及钱包连接弹窗）。未知值或省略 → 回退到 `en` |
| Logo、品牌色 | 商户**仪表板 → Branding** | 全局生效，不按会话单独设置 |

## 返回 URL 的行为

在 **redirect** 模式下，买家总会返回以下两者之一：

- 会话中的 `success_url`（支付结算成功时）
- 会话中的 `cancel_url`（取消 / 放弃时）
- 如果你没有设置这些，SDK 会回退到打开结账页的那个页面，并附加
  `?session_id=…&status=success|cancel`

在 **popup** 和 **embed** 模式下不会发生页面跳转 — 控制权通过
`onSuccess` / `onCancel` 回到你的页面。用它们来决定接下来展示
什么 UI。

## CSP 与嵌入

如果你使用 **embed** 模式，你的 CSP 必须在 `frame-src` 中放行我们
的 origin：

```http
Content-Security-Policy:
  frame-src https://checkout.infraio.xyz https://checkout-dev.infraio.xyz;
```

这个 iframe 携带权限策略 `allow="payment; clipboard-write"` — 它
只能调用 Payment Request API 和写入剪贴板，仅此而已。请勿给 iframe 加
HTML 的 `sandbox` 属性，它会破坏钱包连接功能。该 iframe 的隔离性来自跨源
边界和你的 `frame-src` CSP。

## 移动端注意事项

移动端浏览器（尤其是 Safari）经常拦截弹窗。如果你的流量以移动端为主，
请使用 `mode: "redirect"`。在小屏幕上，弹窗浮层还会遮住键盘区域，
选择资产时会比较别扭。

## 白标品牌定制

完全白标需要：

1. SDK 上设置 `hideHeader: true`
2. 预先接入 `walletAddress`（买家看不到 WalletConnect）
3. 在商户仪表板的品牌设置中配置你的 Logo + 品牌色
4. （可选）为结账页设置自定义域名 — 例如用 `pay.your-shop.com`
   代替 `checkout.infraio.xyz`。CNAME 验证通过后，在仪表板中
   设置。

## 下一步

- [SDK → JavaScript](https://docs.infraio.xyz/zh-CN/sdks/javascript) — 按模式划分的完整
  选项参考。
- [概念 → 会话](https://docs.infraio.xyz/zh-CN/concepts/sessions) — 买家在页面上时，服务
  端发生了什么。
- [概念 → 链与资产](https://docs.infraio.xyz/zh-CN/concepts/chains) — 选择器中提供哪些链
  × 资产组合。