微信公众号支付（开发文档）笔记

我的思路

说实话，看完官方文档后我还是一脸懵逼的。

我是谁，这是哪，我在干什么？

我觉得很有必要把自己在阅读官方文档过程中的困惑和疑问记录下来，也方便自己以后查阅。

让我们先来看看场景到底是怎么样的。

1.具体场景

假设现在已经存在一个微信公众号，里面内嵌了第三方的网页。

1. 用户点击进入网页；
2. 用户选择好了需要购买的商品，点击支付按钮；
3. 前端调用微信的支付控件，用户开始输入密码；
4. 密码验证通过，支付成功。商户后台得到支付成功的通知；
5. 返回商户页面，显示购买成功；

所以，身为一个前端开发工程师，我们的任务主要还是

3.调用微信的支付控件（重点）
5.显示购买成功的商户页面

那么，
①如何才能调用微信的支付控件？
②调用微信的支付控件需要哪些要求（证书？签名？域名？）？
③可以发送哪些数据？
④可以获得哪些数据？
⑤怎么操作？

官方上是这么介绍设计商户页面的逻辑的：

（1）发起支付时，在网页调用JavaScript的getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程
（2）用户成功支付后，商户的前端会收到JavaScript的返回值。商户可以直接跳转到支付成功的静态页面进行展示。
（3）商户后台收到来自微信开放平台的支付成功回调通知，标志该笔订单支付成功

从这个设计逻辑里可以注意两点：
1.微信支付的调用接口是getBrandWCPayRequest
2.前端调用支付接口会得到返回值，但是支付是否成功决定于后台得到回调通知

然而看到这里是不是还是感觉毫无头绪？
别慌…我也是。
但是官方文档又提供了一个业务流程，清晰得展示了从用户点击到支付成功，商户前台、后台以及微信服务器之间是如何交互的。
让我们先看一下吧。

2.业务流程

具体的业务流程在这张图上已经非常清楚了，作为前端开发工程师，需要重点关注一下白色的部分。
有这么几个需要关注下的步骤：

1.网页内请求生成支付订单，商户后台系统会返回一些支付参数（prepay_id，paySign等）
2.用户点击发起支付，网页开始调用JSAPI接口请求支付，微信后台检查了参数合法性和授权域权限后返回给前台验证结果，要求支付授权，这时候用户按照提示输入密码，微信后台再次验证，这时候后台和前端得到反馈的步骤是异步并行的，前端展示给用户，支付结束
3.微信跳回H5页面，查询商户后台支付结果，返回支付结果

从这个步骤中我又得到了几点结论：

1.在网页调用JSAPI支付接口之前，还需要生成一个支付订单发送给后台
2.微信后台会验证两次，第一次是用户点击发起支付后，先验证参数合法性和域名是否被授权，第二次是验证用户输入的支付密码。

现在对整体步骤有个大概的了解，但是更多的是依旧模糊，继续阅读思考。
同样也多生成了下列这些疑问：

⑥订单如何生成并发布给后台
⑦该发布怎么样的参数以及如何给定被授权的域名

3.H5调起支付API

在上述文章内容我们已经知道了微信支付接口是getBrandWCPayRequest，so go on！

首先要注意一点：
getBrandWCPayRequest是接口，但是这个接口是在WeixinJSBridge对象下的，而WeixinJSBridge对象只在微信浏览器中才有。

让我们看一下getBrandWCPayRequest这个接口需要哪些参数（以下参数全是必填），以及这些参数如何获得：

appId（公众号id）

appId是商户注册具有支付权限的公众号成功后即可获得的唯一公众号ID，类型是String（16）。

例子：

wx8888888888888888

timeStamp（时间戳）

timeStamp时间戳是当前的时间，类型是String（32）。
标准北京时