微信支付之 H5

H5 微信支付

场景

• 手机浏览器
• 申请入口 : 登录商户平台 -> 产品中心 -> 我的产品 -> 支付产品 -> H5支付
• 支付案例 : 华为商城 . 小米商城

业务流程

• 商户 : H5商城网站, 并且已经过 ICP备案
• 用户 :
  1. H5网页中, 选商品, 发起购买流程 -> 提交订单
  2. 进入微信客户端, 输入支付密码
  3. 支付成功, 用户收到支付凭证, 同时商户后台收到支付成功的通知

开发指引

1. 用户下单 给商户, 使用微信进行支付
2. 商户后台 向 微信支付 发起请求 (统一下单接口) , 交易类型 : trade_type = MWEB
3. 统一下单接口 返回支付相关参数给 商户后台, 如 支付跳转url, 商户通过 url 调起微信支付中间页
4. 中间页进行 H5权限校验, 安全性检查 (常见错误)
5. 支付成功, 商户后台 会收到微信侧的 异步通知
6. 用户在微信支付收银台完成支付 或取消支付, 返回商户页面 (默认返回支付发起页面)
7. H5网页 中, 引导用户发起支付结果查询
8. 商户后台判断是否收到 微信 支付结果通知, 没有 , 后台调用订单查询接口
9. 展示最终 订单支付结果 给用户

常见问题

回调页面

• MWEB_URL 上拼接 redirect_url = 回调地址
• 地址需进行urlencode处理
• .由于设置redirect_url后,回跳指定页面的操作可能发生在：
  a、微信支付中间页调起微信收银台后超过5秒
  b、用户点击“取消支付”或支付完成后点击“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图

其它常见错误, 查看微信官方文档

• https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4#