跳转到主要内容

结账概览

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 显示在结账页面。支持 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。

商店信息

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

多语言支持

结账页面自动以客户浏览器语言显示:
语言代码
英语en
简体中文zh
日语ja

处理与结果

提交支付后:
  1. 卡片验证 — Luhn 校验、有效期、CVC 验证
  2. 3D Secure — 银行验证(如发卡行要求)
  3. 授权 — 向卡片扣款
  4. 订单创建 — 记录到系统
成功页面: 订单确认号、收据邮件通知、后续步骤、客户门户链接。 失败页面: 清晰的错误说明、建议操作、重试按钮、联系支持选项。

错误处理

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

测试结账

使用测试模式体验结账流程,无需真实扣款。
卡片卡号结果
Visa 成功4242 4242 4242 4242成功
拒绝4000 0000 0000 0002被拒
需要 3DS4000 0027 6000 31843D 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.”
此声明是记录商合规要求,帮助客户理解支付关系。