微信JSAPI支付

最近接到新的需求，需要在公众号引入微信支付。之前微信支付方式使用过Native当面付以及H5支付。Native支付有两个弊端所在：

其一，Navicat支付最终会生成一个微信端链接，格式为：weixin://xxx，我们微信直接访问链接没毛病成功打开支付界面，但是支付的时候就报错了：当前交易不支持点击消息链接发起。

其二：将支付链接转化成二维码扫码支付。第二个弊端出现了，将图片保存到本地通过微信扫描本地二维码又报错了：不支持从相册中选择二维码。

那H5支付有何弊端呢？H5支付在外部浏览器正常使用，会直接从外部浏览器跳转到微信完成支付。在H5项目中我们一直正常使用H5微信支付，接到公众号支付的时候第一反应直接使用H5支付，这样用户使用浏览器打开一样可以使用微信支付，但是当我们支付接入才发现H5支付的弊端：只能在外部浏览器使用H5支付，在微信内无法使用微信支付。所以这时候最合适的支付方式就是JSAPI支付了。

因为没有接触过公众号开发，第一反应当然是先看看支付文档：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

直接根据文档进行开发，首先前往微信商户平台设置支付目录：

公众号需要设置授权域名：

接下来先看看JSAPI支付业务流程：

服务端其实就是创建订单，然后调用统一下单接口。这里我们看下统一下单接口文档：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

文档中有个参数openid，对于这个参数文档的解释是：trade_type=JSAPI时（即JSAPI支付），此参数必传，此参数为微信用户在商户对应appid下的唯一标识。

所以我们可以整理出整体的逻辑：

1.前端跳转授权界面，用户授权成功获取到code后调接口换取用户openid。
2.服务端保存用户预支付订单。
3.服务端调用统一下单接口，然后将参数返回给客户端。
4.客户端调起支付，支付成功执行支付回调。

前端跳往授权界面，跳转的参数要求我们可以看看：

这里参数需要注意的就是redirect_uri参数，用户授权成功会跳转到redirect_uri，后面会拼接code参数。redirect_uri必须是我们刚才设置的公众号授权域名下的地址，并且需要经过urlEncode。

点击授权后，调用接口用code换取用户openid。贴下关键代码：

通过本接口我们可以成功获取到用户的openid。我们可以测试下：

可以看到用户openid成功获取。然后我们为用户创建预支付订单，这边只贴下关键代码：

商品数据保存成功，调用统一下单接口取得统一下单接口返回的参数信息：

我们可以打印下返回的参数信息：

到这里只剩下最后一步客户端发起支付，我们看下微信内H5调起支付的文档：

首先先按照签名加密规则将参数加密生成签名paySign。加密算法规则如下：

先实现下签名生成算法：

在用户点击微信支付按钮的时候调用服务端接口创建预支付订单并且返回统一下单接口参数给客户端：

然后客户端调起支付，WeixinJSBridge内置对象只会在微信浏览器内生效，所以在其他浏览器打开会报错。贴下关键代码：

我们可以测试是否能调起支付界面：

当我们完成支付的时候，微信服务器会异步执行我们统一订单接口设置的回调方法，回调方法需要特别注意的是微信回调给微信端返回格式为xml格式：

当我们支付完成的同时，微信会给客户端返回get_brand_wcpay_request:ok，客户端可以直接在支付完成的时候跳转到指定的界面，到这里成功完成JSAPI支付：