微信支付到目前为止总有六种支付产品:

• 公众号支付
• app 支付
• 扫码支付
• H5 支付
• 小程序支付
• 刷卡支付

其中, 除刷卡支付以外, 其他的五种支付产品是 web 中经常使用的. 这五种支付产品的使用场景不同, 对应的支付流程的前置操作及拉起支付操作都不同.

查看文档可以看到, 无论哪一种支付产品, 都有几个相同的操作:

1. 申请预支付 ID, 根据支付产品的类型, 传入不同的参数
2. 接收微信支付通知, 不同的支付产品会返回不同的支付产品标识
3. 查询交易, 参数一致
4. 退款, 参数一致

所以通用的支付流程大概如下:

┌ ─ ─ ─ ─ ─ ─ ─ ┐    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
  apply payment  ─ ─▶  call wechat charge │─ ─▶  charge notification  
└ ─ ─ ─ ─ ─ ─ ─ ┘    └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─     └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘

不同的支付产品, 主要是在申请预支付交易之前有一些前置动作 (例如公众号支付需要获取 openid), 以及拉起支付的方式不同 (例如公众号支付只能在微信内支付, H5 支付只能在微信外浏览器拉起微信客户端进行支付.)

所以, 五种支付产品可以分类为两类:

1. JSAPI 类, 微信内使用, 支付前需要获取授权, 换取 openid. 包含: 公众号支付, 小程序支付
2. 非 JSAPI 类, 一般在微信外使用, 支付前不需要获取授权. 包含: 微信H5, 微信APP, 扫码支付.

H5 支付

使用场景

微信外浏览器拉起微信客户端支付

trade_type

MWEB

账号配置

1. 公众号网页授权域名
2. 商户号网页授权目录

支付流程

1. 调用统一下单, 获取 mweb_url
2. 将用户重定向至 mweb_url, 由微信提供的网页拉起微信客户端进行支付
3. 用户支付完成, 回到浏览器, 由微信提供的网页将用户重定向到 redirect_url

其中, 在 mweb_url 中, 微信会生成一个 weixin:// 开头的 url, 通过这个 url 拉起微信客户端

注意事项

1. 跳转到 mweb_url 时需要由浏览器跳转, 跳转到 mweb_url 后, 微信会检查 referer, 这个地址的 domain 必须同公众号配置的网页授权域名一致
2. spbill_create_ip 必传, 微信会检查跳转支付的用户 IP 是否与调用统一下单的时候传的 spbill_create_ip 一致
3. 跳转到 mweb_url 的时候, redirect_url 需要手动拼装到 mweb_url 上, 并且它的 domain 必须与公众号配置的网页授权域名一致
4. 用户支付完成后, 不一定会自动返回到浏览器
5. 只能微信外使用. 如果在应用内嵌中 web view 中使用, 需要注意应用是否支付 weixin 这个 scheme

进阶玩法

1. 跳转到 mweb_url 可以由服务器模拟, 抓取到 weixin:// 的 url, 通过自己的页面拉起微信客户端
2. 抓取 mweb_url 时, 注意 spbill_create_ip 应为你的服务器地址
3. 如果你的服务器是阿里云的ECS, 抓取 mweb_url 很慢, 甚至超时, 那么你可以买台腾讯云低配主机当代理, 并且将 spbill_create_ip 设置为你的代理机器的 IP

公众号支付

trade_type

JSAPI

账号配置:

1. 公众号网页授权域名
2. 商户号支付授权目录

支付流程

1. 跳转微信获取授权, 获取 code
2. 凭 code 获取 open id, 调用统一下单接口, 获取 prepay_id. 生成支付参数, 下发给页面
3. 页面拉起支付, 支付完成后跳转至支付结果页面

注意事项

1. 只能在微信内使用
2. 必须凭 open id 才能支付

app 支付

trade_type

APP

账号配置

扫码支付

小程序支付