微信 H5 支付流程以及一些坑

Posted 2020-10-17 前端博客

原文：https://blog.niceue.com/front-end-development/wechat-h5-payment-process-as-well-as-some-pits.html

最近做的 SPA 网站集成了微信支付，使用的是微信 H5 调起支付API接口。做完后对微信 H5 支付的流程有了进一步的了解，在前后端调试接口的过程中也遇到了一些问题，在这里记录下来。

支付流程

1. 在订单页 ajax 请求后端发起下单，后端挂起请求
2. 后端根据订单号结合微信支付相关配置参数向微信服务器发起统一下单
3. 下单成功，微信通知前面传递的 notify_url，返回 prepay_id (预支付交易会话标识)
4. 后端返回前端 JSAPI 调用的参数
5. 前端使用 JSSDK 的 wx.chooseWXPay 发起支付

wx.chooseWXPay({
  timestamp: ‘‘,   // 支付签名时间戳
  nonceStr: ‘‘,    // 支付签名随机串
  package: ‘‘,     // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
  signType: ‘MD5‘, // 签名方式
  paySign: ‘‘,     // 支付签名
})

这里看起来是 5 步，但其实还少了一步。调用“统一下单”接口的时候需要微信用户的 openid。

openid 是什么？

官方解释

加密后的微信号，每个用户对每个公众号的 openid 是唯一的。对于不同公众号，同一用户的 openid 不同

这个 openid 只能在微信环境通过重定向拿到。但是在下单的时候用的是 ajax 请求，还用重定向用户体验就比较差。所以需要在进入微信的时候就通过重定向拿到 openid 缓存起来，后面就可以直接使用了。所以入口页面就要做点小动作。

获取 openid

官方有OpenID的获取指引。对于 H5 应用，获取方式分 3 步走：

1. 后端重定向到获取 code 接口

后端可以定义一个 /wechat/redirect 接口，例如：

http://yoursite.com/wechat/redirect?url=home_url 

用这个地址重定向获取 code 地址，其中的 url 参数为最终的重定向地址，在拿到 openid 后跳转到该 url

2. 获取 code：

接口地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec

接口参数：

• appid: 公众账号ID
• redirect_uri: 接收 code 的回调地址（请UrlEncode）
• response_type: 固定值 code
• scope: 应用授权作用域，填 snsapi_base 或者 snsapi_login（可获取用户信息，如头像、昵称等）
• state: 用于保持请求和回调的状态，防止 csrf 攻击，可设置为简单的随机数加 session 进行校验

提示：snsapi_login 会跳转到授权页让用户授权
微信接着会重定向三次，第三次重定向返回到 redirect_uri 地址，并且带上了 code 参数

3. 通过 code 获取 openid 和 access_token

接口地址

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

获取到 openid 后注意在 session 中缓存起来

一些需要注意的坑

1. 获取 code 的接口地址

在OpenID的获取指引文档，请注意黑色标题“微信公众平台”和“微信开放平台”。两个地方获取 code 的接口地址不一样，但参数是一样的。最开始后端看错了文档使用的是“网站应用微信登录”文档里面提供的获取 code 的接口，这样子怎么都是调不通的。

// 微信公众平台是
https://open.weixin.qq.com/connect/oauth2/authorize
// 微信开放平台是
https://open.weixin.qq.com/connect/qrconnect

2. 后端签名用 timeStamp，而前端调用支付接口使用全小写 timestamp

微信官方网页端调起支付API这个接口文档参数却误导观众，写的是驼峰的 timeStamp
后端为了方便返回给前端的也是 timeStamp，所以在前端需要转换
解决办法：

if (!data.timestamp) data.timestamp = data.timeStamp

3. ios 和 android 版微信对“支付授权目录”的检测不同

http://yousite.com/mobile/#!/checkout

以上路径，iOS 微信识别正确：http://yousite.com/mobile/
而 Android 微信识别出的目录是：http://yousite.com/mobile/#!/checkout
这应该是 Android 版微信的 Bug
解决办法是在 # 前添加一个 ?：http://yousite.com/mobile/?#!/checkout