微信支付

微信支付的开发终于告一段落,重新总结一下微信支付在微信端和APP端的开发流程吧~

 

微信端

 

一、业务流程

读懂业务流程很重要,可以帮你理清思路,在后期的调试中,排查错误出现的位置。

微信内网页支付时序图

作为前端,我只需要发两次请求即可完成基本的业务流程:

一次是在未支付前,向我的后台发送用户购买的商品的相关信息,由后台整理数据后,发送给微信完成预支付,成功后,返回给前端prepay_id,playSign,timeStamp,nonceStr等信息。

第二次是在第一次请求成功并正确获取数据后,由前端调用getBrandWCPayRequest接口,向微信发送支付请求,接收到微信返回的成功返回值后,显示成功支付页面。

恩,前端就这样啦~

 

二、实际操作流程

1、引入微信jsSDK(微信的其他功能需要)

说明文档:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4

2、设置测试、正式目录,调试白名单

微信内网页支付设置栏目入口

注:

1)目录要设置为调用支付的页面,去掉最有一个‘/’后的url。

2)ios和andorid上的url处理稍有不同,详情参考:http://www.cnblogs.com/jun3101s/p/5587815.html

 

3、获取微信授权(需要再支付之前完成)

4、生成预付单(在用户支付前)

这里需要前后端的配合,前端收集相关信息发送给后端,后端需要调用微信的统一下单接口,生成预付单后,返回给前端prepay_id,playSign,timeStamp,nonceStr等信息。

注: 后台生成签名时,字段名是小驼峰命名的。

统一下单接口:

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

5、调用微信支付接口

整理后端返回的预付单信息,然后调用网页端支付接口。

网页端支付API:

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

参考代码

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();
}

注:

1)所有字段均为string类型;

2)微信网页上参考代码的"get_brand_wcpay_request:ok"的“:”为中文符号,需要换成英文符号。

3)个人建议,为了更好的看到微信端的错误信息,可以打印res.err_desc。微信返回的信息如下:

{

err_msg: "get_brand_wcpay_request:fail",

err_desc: "当前页面的URL未注册:http://xxx/xxxxx/xxx/index.html#aa/bbb/cc",

err_code: "3"

}

6、成功提示或失败提示: 按照参考代码将事件的回调写在相应的位置就OK啦。

 

APP端

我使用的cordova插件,插件地址:https://www.npmjs.com/package/cordova-plugin-wechat

一、业务流程

在流程上,APP端与微信网页端基本一致,都需要先生成预付订单,然后在调用支付接口。

不同的是,APP端在生成签名时不需要获取用户的openId,但是需要用户的手机端安装了微信客户端。

二、实际操作流程

1、安装cordova插件,安装方法见插件地址。

2、生成预付订单。

注:生成签名时,注意这里的字段名全是小写。

https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_12&index=2

3、调用插件的支付接口。

参考代码:

var params = {

    partnerid: '10000100', // merchant id

    prepayid: 'wx201411101639507cbf6ffd8b0779950874', // prepay id

    noncestr: '1add1a30ac87aa2db72f57a2375d8fec', // nonce

    timestamp: '1439531364', // timestamp

    sign: '0CB01533B8C1EF103065174F50BCA001', // signed string

};

 

Wechat.sendPaymentRequest(params, function () {

    alert("Success");

}, function (reason) {

    alert("Failed: " + reason);

});

注:只有在签名以后,插件才能正常使用哟~

好啦,总结完成~如有遗漏,还有大家补充。

posted @ 2016-06-07 15:03  v以恒  阅读(905)  评论(0编辑  收藏  举报