主 题
一句话：H5 收银台最难的不是 UI，而是搞清楚当前在哪个 App 的内置浏览器里。
写在前面
业务流程（简述）：商户在收单系统入网 → 审核通过后备案微信/支付宝/云闪付通道 → 绑定聚合收款码 → 用户扫码输入金额完成支付。
本文记录 H5 收银台在多容器、多通道下的产品限制与工程 workaround。Demo 来自 gin-zone 项目收银页。
体验：H5 收银台
源码：gin-zone/client/.../cashier
支付环境矩阵
| 打开环境 | 微信支付 | 支付宝 | 云闪付 | 备注 |
|---|---|---|---|---|
| 微信内置浏览器 | ✅ 仅微信 | ❌ 难拉起 | 受限 | 禁止随意跳其他 App |
| 支付宝内置浏览器 | ❌ | ✅ 仅支付宝 | 受限 | 同微信策略 |
| 系统浏览器 / 银行 App | 可多种 | 可多种 | 官方页 | 需用户选择支付方式 |
结论 1：不要指望「一个 H5 页在所有 App 内都能随意切换微信/支付宝 SDK」——容器策略第一优先。
常见 workaround
1. 小程序中转拉起 App 支付
微信/支付宝 H5 不能直接调起原生支付时，可：
- H5 请求后端生成小程序 URL Scheme / 链接
window.open(scheme)打开小程序- 小程序内再调起小程序支付
适用于系统浏览器打开 H5、需要跳微信/支付宝支付的场景。
2. 云闪付
通常跳转云闪付官方 H5/App，自定义页面能力有限，按银联文档对接。
3. 手机银行 App
下单时由银行服务返回 H5 引导链接，页面内嵌操作说明，用户按指引完成跳转。
结果页与「点金计划」
| 通道 | 自定义支付结果页 |
|---|---|
| 微信 | 需开通点金计划（含平台广告模块，需评估 UI） |
| 支付宝 | 相对直接跳转商户结果页 |
产品上要提前确认：是否必须品牌结果页，还是可用官方默认页。
测试 vs 生产：商户主体
测试环境（银联测试商户号）：
- 小程序支付测试时，小程序主体/名称常与入网商户名称一致
- 微信商家助手认证名称也需对齐
生产环境（银行服务商模式）：
- 银行主体小程序可服务其下多个商户，不必每商户单独小程序
联调前与收单机构确认当前环境规则，避免「测试通过、生产失败」。
工程细节
- 支付按钮防抖：重复点击会重复下单
- 订单状态轮询：H5 返回后以前端轮询 + 后端 notify 双保险
- 小程序 webview 打开 H5：需配置业务域名（可配顶级域名）
- URL Scheme 拉小程序：非个人主体小程序 + 服务端生成 scheme
小结
- 先画「用户在哪个 App 里打开 H5」决策树，再选支付 API
- 微信/支付宝内置浏览器 = 单通道；跨 App 靠小程序或官方跳转
- 测试商户主体约束 ≠ 生产规则
- 收银台代码可参考 gin-zone
packageB/.../cashier
全部评论(2)