微信公众号支付（二）H5调起支付

上一篇讲到统一下单，得到微信返回的预支付交易会话标识prepay_id，那么下单完成后要做的就是在html页面调起支付窗口。

查看官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6，即可看到h5调起支付需要的参数。

而且还说明了javascript的写法，主要是onBridgeReady()方法的封装。注意，如果某个页面如pay.html需要进行支付，那么此js就应该卸载这个pay.html中，而且微信官方还说明如下：注意：WeixinJSBridge内置对象在其他浏览器中无效。

因此，我在pay.html中的配置如下，配置完成后再微信手机端进行页面浏览

$scope.onBridgeReady = function () {
    $http.post("/wechat/createSign", $scope.payOrder).then(function (data) {
        var order = data.data.data;
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": order.appid,     //公众号名称，由商户传入
                "timeStamp": order.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": order.nonce_str, //随机串
                "package": "prepay_id=" + order.prepay_id,
                "signType": "MD5",         //微信签名方式
                "paySign": order.sign   //微信签名
            }, function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    //alert("微信支付成功!");
                    $http.post("/wechat/toPaySuccessUrl").then(function (data) {
                        window.location.href = data.data.data + "?orderNo=" + order.out_trade_no;
                    })
                    // window.location.href = "http://qiansheng.imwork.net/paydone.html?orderNo=" + order.out_trade_no;
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    //alert("用户取消支付!");

                } else {
                    alert("支付失败!");
                }
            });
    })
}

appId，timeStamp，nonceStr，signType等参数都可以通过ajax从后台获取。这些基本都是写死的数据。但是唯独一点，package里面有个prepay_id，这个参数是上一篇文章中统一下单后，微信返回给我们的参数。在后台直接设置即可。但是最坑最坑的一点来了，就是这里面的paySign，就是签名。这个可不是第一次统一下单得到的签名。而是统一下单完成后，根据返回参数，再一次生成的新签名。这里微信官方文档没有提到，所以非常坑人。

参考文档：

二次签名：

二次签名需要appId，timeStamp，nonceStr，package，singType等参数。其实也就是H5支付需要的参数。

//下单返回
SortedMap<Object, Object> secondParam = new TreeMap<>();
secondParam.put("appId", Constant.APPID);
secondParam.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
secondParam.put("nonceStr", order.getNonce_str());
secondParam.put("package", "prepay_id=" + order.getPrepay_id());
secondParam.put("signType", Constant.SIGN_TYPE);
//二次签名
String sign = SignUtils.createSign("UTF-8", secondParam);

二次签名后，后台再一次组装ajax需要的参数。paySign就是二次签名的签名！！！！！！

如下是我从后台组装的对象，标红的都是ajax需要的，然后将这个对象转换为json即可。前台pay.html对值进行填充。

到这里，H5调起支付就完成了。

开发过程可能会遇到以下问题：

1.H5调起支付的时候提示签名错误

解决办法：十有八九是package里面的prepay_id错了，还有就是没有进行二次签名

2.提示调起支付时，提示“当前页面url未注册”

由于2017年8月1日微信官方把关于支付的信息转移到了商户平台：公众平台微信支付公众号支付授权目录、扫码支付回调URL配置入口已于8月1日迁移至商户平台（pay.weixin.qq.com ）

所以进入以下位置：

登录微信商户平台-产品中心-开发配置，配置支付授权路径。如果掉起支付的页面在域名/pay.html中，那么就在此添加授权路径，如我的掉起支付的页面在www.weixinPay.com/pay.html 中，那么授权目录就配置为htt://www.weixinPay.com/

注意：后面的 / 一定要加上，表示该路径下的页面都可以调起微信的支付接口。

微信公众号支付（二）H5调起支付

猜你喜欢