折腾了一个多礼拜,终于将微信支付完成了,遇到很多坑,但回想起来,只要严格按照微信的文档开发,还是可以顺利的完成的,只不过自己在开发过程中犯了些错误,而跟微信对接,微信又没有提供友好的返回信息,导致跟踪问题的时间较长。
我们的场景如下:在线下展示产品,客户扫码后,进行支付,收到订单后,再发产品到客户指定的地址。
实现如下:
1、将链接:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=yourAppId&redirect_uri=yourPageUrl&response_type=code&scope=snsapi_base&state=123#wechat_redirect
生成二维码,其中appid就是开发者的appid,redirect_uri就是开发者展示商品的页面的url。客户用微信扫描这个二维码后,会返回一个code,并将页面跳转到指定的redirect_url,将code作为参数附在后面:
http://www.test.com?code=****&state=123;
2、进入商品页后,有了code就可以发起h5的支付,可参考:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1
接口如下:
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入
"timeStamp":" 1395712654", //时间戳,自1970年以来的秒数
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串
"package" : "prepay_id=u802345jgfjsdfgsdg888",
"signType" : "MD5", //微信签名方式:
"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
}
);
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
调用这个接口之前,需要调用统一下单接口,可参考:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
以获取prepay_id。
这里遇到的问题:
1、签名需要跟微信提供的验证页面里面进行比较,不要出错了;
2、支付的签名需要重新签,不能用统一支付的签名;
3、参数名的大小写一定要严格按照微信的说明写。