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

# 收银台

> 优化转化率的两步收银台流程

## 收银台概览

Waffo Pancake 使用**两步收银台流程**，专为提高转化率设计。该设计先收集客户信息，再收集支付信息，降低放弃率并支持精准的税费计算。

***

## 收银台 URL

收银台页面使用基于会话的 URL 结构：

```
https://checkout.waffo.ai/{store-slug}/{product-slug}
```

| 组成部分         | 说明                  |
| ------------ | ------------------- |
| `store-slug` | 您商店的唯一 URL 标识       |
| `sessionId`  | 客户发起收银台时创建的收银台会话标识符 |

<Note>
  收银台会话在服务端生成，包含产品、定价和货币信息。
</Note>

***

## 两步流程

<Steps>
  <Step title="消费者信息" icon="user">
    收集邮箱、国家和账单信息，用于税费计算和订单处理。
  </Step>

  <Step title="支付" icon="credit-card">
    输入卡片信息或使用 Apple Pay / Google Pay 完成支付。
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/waffo/fAGQ8sa2qycWEk2d/images/checkout/checkout-step1.png?fit=max&auto=format&n=fAGQ8sa2qycWEk2d&q=85&s=e7454a2c64f08d42fe0fa1ac4084b712" alt="收银台页面 — 消费者信息" width="1440" height="900" data-path="images/checkout/checkout-step1.png" />
</Frame>

### 第 1 步：消费者信息

收集税费计算和订单处理所需的信息。

**必填字段：**

| 字段   | 用途             |
| ---- | -------------- |
| 邮箱地址 | 收据、账户创建、客户门户访问 |
| 国家   | 确定税务管辖区        |

**条件字段（基于国家）：**

| 字段  | 何时显示                  |
| --- | --------------------- |
| 邮编  | 大多数国家（美国、加拿大、英国等）     |
| 省/州 | 美国、加拿大、澳大利亚、印度及其他适用国家 |

**企业购买选项：**
客户可以勾选"我以企业身份购买"来提供：

* 企业名称
* 税号（用于增值税/税务豁免）

### 第 2 步：支付

<Frame>
  <img src="https://mintcdn.com/waffo/YbM_n4_eoBfrCsTT/images/checkout/checkout-step2.png?fit=max&auto=format&n=YbM_n4_eoBfrCsTT&q=85&s=e424a83d42c68d5946214be7f18cbbb7" alt="收银台页面 — 支付" width="1440" height="900" data-path="images/checkout/checkout-step2.png" />
</Frame>

<CardGroup cols={2}>
  <Card title="银行卡支付" icon="credit-card">
    * 卡号
    * 有效期 (MM/YY)
    * CVC/CVV
    * 持卡人姓名
  </Card>

  <Card title="数字钱包" icon="wallet">
    * Apple Pay（iOS、Safari）
    * Google Pay（Android、Chrome）
    * 生物识别一键支付
  </Card>
</CardGroup>

**订单摘要**显示在支付表单旁，包含产品名称、图片、小计、税费和总计。

***

## 订阅收银台

对于订阅产品，额外显示计费信息：

| 元素     | 示例                  |
| ------ | ------------------- |
| 计费频率   | "按月计费"              |
| 周期金额   | "\$29.00/月"         |
| 下次计费日期 | 从今天开始计算             |
| 试用期    | "7 天免费试用"（如产品已启用试用） |

***

## 自定义

通过仪表盘中的收银台设置，让收银台页面匹配您的品牌。

### Logo

上传自定义 Logo 显示在收银台页面。支持 PNG、JPG 和 SVG 格式。

### 主题模式

<CardGroup cols={2}>
  <Card title="浅色模式" icon="sun">
    白色背景，深色文字。适合大多数品牌。
  </Card>

  <Card title="深色模式" icon="moon">
    深色背景，浅色文字。现代美学。
  </Card>
</CardGroup>

在浅色和深色模式预设之间切换。每种模式维护各自的颜色值。

### 颜色设置

| 设置      | 字段名称                      | 默认值（浅色） | 默认值（深色） |
| ------- | ------------------------- | ------- | ------- |
| **主色**  | `checkoutColorPrimary`    | #7CCB02 | #ADFF85 |
| **背景色** | `checkoutColorBackground` | #FFFFFF | #0A1A1F |
| **卡片色** | `checkoutColorCard`       | #F3F4F6 | #0A1A1F |
| **文本色** | `checkoutColorText`       | #111827 | #FFFFFF |

### 边框圆角

通过 `checkoutBorderRadius` 设置控制 UI 元素的圆角程度。默认值为 `8px`。选项范围从 0px（直角）到 16px（超大圆角）。

<Note>
  确保文本和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。
</Note>

### 商店信息

| 选项     | 说明            |
| ------ | ------------- |
| 商店名称   | 显示在页头         |
| 支持邮箱   | 供客户咨询         |
| 服务条款链接 | 链接到您的服务条款（必填） |
| 隐私政策链接 | 链接到您的隐私政策（必填） |

***

## 多语言支持

收银台页面自动以客户浏览器语言显示：

| 语言   | 代码 |
| ---- | -- |
| 英语   | en |
| 简体中文 | zh |
| 日语   | ja |

***

## 处理与结果

提交支付后：

1. **卡片验证** -- Luhn 校验、有效期、CVC 验证
2. **3D Secure** -- 银行验证（如发卡行要求）
3. **授权** -- 向卡片扣款
4. **订单创建** -- 记录到系统

**成功页面：** 订单确认号、收据邮件通知、后续步骤、客户门户链接。

**失败页面：** 清晰的错误说明、建议操作、重试按钮、联系支持选项。

***

## 错误处理

| 错误      | 原因        | 客户操作     |
| ------- | --------- | -------- |
| 卡片被拒    | 余额不足或银行拦截 | 换一张卡     |
| 无效卡片    | 卡号错误      | 检查并重新输入  |
| 卡片过期    | 卡片已过有效期   | 使用有效卡片   |
| CVC 不匹配 | 安全码错误     | 重新输入 CVC |
| 3DS 失败  | 银行验证失败    | 联系银行     |

***

## 测试收银台

使用[测试模式](/zh/features/test-mode)体验收银台流程，无需真实扣款。

| 类型             | 卡号                    | 结果 |
| -------------- | --------------------- | -- |
| Visa 信用卡       | `4576 7500 0000 0110` | 成功 |
| Mastercard 信用卡 | `2226 9000 0000 0110` | 成功 |
| Visa 信用卡       | `4576 7500 0000 0220` | 拒绝 |

<Note>
  测试模式通过横幅提示："Test Mode - No real charges will be made"
</Note>

***

## 记录商声明

在收银台页面底部，客户会看到：

> "This order is processed by our online reseller & Merchant of Record, Waffo Pancake, who also handles order-related inquiries and returns."

此声明是记录商合规要求，帮助客户理解支付关系。