结账概览
Waffo Pancake 使用两步结账流程,专为提高转化率设计。该设计先收集客户信息,再收集支付信息,降低放弃率并支持精准的税费计算。
结账 URL
结账页面使用基于会话的 URL 结构:
https://your-domain.com/store/{store-slug}/checkout/{sessionId}
| 组成部分 | 说明 |
|---|
store-slug | 您商店的唯一 URL 标识 |
sessionId | 客户发起结账时创建的结账会话标识符 |
两步流程
第 1 步:客户信息
收集税费计算和订单处理所需的信息。
必填字段:
| 字段 | 用途 |
|---|
| 邮箱地址 | 收据、账户创建、客户门户访问 |
| 国家 | 确定税务管辖区 |
条件字段(基于国家):
| 字段 | 何时显示 |
|---|
| 邮编 | 大多数国家(美国、加拿大、英国等) |
| 省/州 | 美国、加拿大、澳大利亚、印度及其他适用国家 |
企业购买选项:
客户可以勾选”我以企业身份购买”来提供:
第 2 步:支付
银行卡支付
- 卡号
- 有效期 (MM/YY)
- CVC/CVV
- 持卡人姓名
数字钱包
- Apple Pay(iOS、Safari)
- Google Pay(Android、Chrome)
- 生物识别一键支付
订单摘要显示在支付表单旁,包含产品名称、图片、小计、税费和总计。
订阅结账
对于订阅产品,额外显示计费信息:
| 元素 | 示例 |
|---|
| 计费频率 | ”按月计费” |
| 周期金额 | ”$29.00/月” |
| 下次计费日期 | 从今天开始计算 |
| 试用期 | ”7 天免费试用”(如产品已启用试用) |
自定义
通过仪表盘中的结账设置,让结账页面匹配您的品牌。
Logo
上传自定义 Logo 显示在结账页面。支持 PNG、JPG 和 SVG 格式。
主题模式
在浅色和深色模式预设之间切换。每种模式维护各自的颜色值。
颜色设置
| 设置 | 字段名称 | 默认值(浅色) | 默认值(深色) |
|---|
| 主色 | checkoutColorPrimary | #7CCB02 | #ADFF85 |
| 背景色 | checkoutColorBackground | #FFFFFF | #0A1A1F |
| 卡片色 | checkoutColorCard | #F3F4F6 | #0A1A1F |
| 文本色 | checkoutColorText | #111827 | #FFFFFF |
| 次要文本色 | checkoutColorTextSecondary | #8C8C8C | #8C8C8C |
边框圆角
通过 checkoutBorderRadius 设置控制 UI 元素的圆角程度。默认值为 8px。选项范围从 0px(直角)到 16px(超大圆角)。
确保文本和背景颜色之间有足够的对比度以保证可访问性。WCAG 建议对比度至少为 4.5:1。
商店信息
| 选项 | 说明 |
|---|
| 商店名称 | 显示在页头 |
| 支持邮箱 | 供客户咨询 |
| 服务条款链接 | 链接到您的服务条款(必填) |
| 隐私政策链接 | 链接到您的隐私政策(必填) |
多语言支持
结账页面自动以客户浏览器语言显示:
处理与结果
提交支付后:
- 卡片验证 — Luhn 校验、有效期、CVC 验证
- 3D Secure — 银行验证(如发卡行要求)
- 授权 — 向卡片扣款
- 订单创建 — 记录到系统
成功页面: 订单确认号、收据邮件通知、后续步骤、客户门户链接。
失败页面: 清晰的错误说明、建议操作、重试按钮、联系支持选项。
错误处理
| 错误 | 原因 | 客户操作 |
|---|
| 卡片被拒 | 余额不足或银行拦截 | 换一张卡 |
| 无效卡片 | 卡号错误 | 检查并重新输入 |
| 卡片过期 | 卡片已过有效期 | 使用有效卡片 |
| CVC 不匹配 | 安全码错误 | 重新输入 CVC |
| 3DS 失败 | 银行验证失败 | 联系银行 |
测试结账
使用测试模式体验结账流程,无需真实扣款。
| 卡片 | 卡号 | 结果 |
|---|
| Visa 成功 | 4242 4242 4242 4242 | 成功 |
| 拒绝 | 4000 0000 0000 0002 | 被拒 |
| 需要 3DS | 4000 0027 6000 3184 | 3D Secure 流程 |
测试模式通过横幅提示:“Test Mode - No real charges will be made”
记录商声明
在结账页面底部,客户会看到:
“This order is processed by our online reseller & Merchant of Record, Waffo Pancake, who also handles order-related inquiries and returns.”
此声明是记录商合规要求,帮助客户理解支付关系。