• 微信支付


    微信支付的开发终于告一段落,重新总结一下微信支付在微信端和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);

    });

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

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

  • 相关阅读:
    无缝衔接 gRPC 与 dubbo-go
    阿里员工一天有26小时,怎么做到的?
    小米流式平台架构演进与实践
    基于 Flink 构建 CEP 引擎的挑战和实践
    实时计算在贝壳的实践
    阿里巴巴大规模应用Flink的踩坑经验:如何大幅降低 HDFS 压力?
    我要上官网,上云案例征集活动启动啦! 提交案例,得大奖!【阿里云】
    【原】git常用命令笔记
    【原】使用vue2+vue-router+vuex写一个cnode的脚手架
    【原】老生常谈-从输入url到页面展示到底发生了什么
  • 原文地址:https://www.cnblogs.com/jun3101s/p/5567022.html
Copyright © 2020-2023  润新知