上一篇讲到统一下单,得到微信返回的预支付交易会话标识prepay_id,那么下单完成后要做的就是在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/
注意:后面的 / 一定要加上,表示该路径下的页面都可以调起微信的支付接口。