美文网首页微信小程序小程序微信小程序开发实战
让你的微信小程序具有在线支付功能

让你的微信小程序具有在线支付功能

作者: IT小C | 来源:发表于2017-03-08 17:04 被阅读46025次

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点。


    1.开通微信支付和微信商户号
    这个过程就和开通服务号的微信支付过程一样,没有什么可以说的。

    2.获得用户的openid
    首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code,然后开发者服务器使用登录凭证 code 获取 openid。

    wx.login({
          success: function(res) {
            if (res.code) {
              //发起网络请求
              wx.request({
                url: 'https://yourwebsit/onLogin',
                method: 'POST',
                data: {
                  code: res.code
                },
                success: function(res) {
                    var openid = res.data.openid;
                },
                fail: function(err) {
                    console.log(err)
                }
              })
            } else {
              console.log('获取用户登录态失败!' + res.errMsg)
            }
          }
        });
    
    var code = req.param("code");
            request({
                url: "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code",
                method: 'GET'
            }, function(err, response, body) {
                if (!err && response.statusCode == 200) {
                    res.json(JSON.parse(body));
                }
            });
    

    3.获取prepay_id和支付签名验证paySign
    这一步的过程就和服务号里的微信支付过程一样,分为客户端和服务器端
    首先来看一下客户端js
    在服务号里,我们是通过如下的代码来调起支付功能

    function jsApiCall()
            {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    {
                       "appId":"",     //公众号名称,由商户传入     
                       "timeStamp":"",         //时间戳,自1970年以来的秒数     
                       "nonceStr":"", //随机串     
                       "package":"prepay_id=<%=prepay_id%>",     
                       "signType":"MD5",         //微信签名方式:     
                       "paySign":"<%=_paySignjs%>" //微信签名
                    },
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                        if( res.err_msg =="get_brand_wcpay_request:ok"){
                            alert("支付成功!");
                        }else{
                            alert("支付失败!");
                        }
                    }
                );
            }
    

    在小程序里,我们是通过wx.requestPayment方法来调起支付功能,当然在这之前,我们先要获取prepay_id。

                  wx.request({
                        url: 'https://yourwebsit/service/getPay', 
                        method: 'POST',
                        data: {
                          bookingNo:bookingNo,  /*订单号*/
                          total_fee:total_fee,   /*订单金额*/
                          openid:openid
                        },
                        header: {
                            'content-type': 'application/json'
                        },
                        success: function(res) {
                            wx.requestPayment({
                              'timeStamp':timeStamp,
                              'nonceStr': nonceStr,
                              'package': 'prepay_id='+res.data.prepay_id,
                              'signType': 'MD5',
                              'paySign': res.data._paySignjs,
                              'success':function(res){
                                  console.log(res);
                              },
                              'fail':function(res){
                                  console.log('fail:'+JSON.stringify(res));
                              }
                            })
                        },
                        fail: function(err) {
                            console.log(err)
                        }
                    })
    

    那在服务器端主要要实现的是prepay_id的获取和签名paySign

            var bookingNo = req.param("bookingNo");
            var total_fee = req.param("total_fee");
            var openid = req.param("openid");
            var body = "费用说明";
            var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
            var formData = "<xml>";
            formData += "<appid>appid</appid>"; //appid
            formData += "<attach>test</attach>";
            formData += "<body>" + body + "</body>";
            formData += "<mch_id>mch_id</mch_id>"; //商户号
            formData += "<nonce_str>nonce_str</nonce_str>";
            formData += "<notify_url>notify_url</notify_url>";
            formData += "<openid>" + openid + "</openid>";
            formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";
            formData += "<spbill_create_ip>spbill_create_ip</spbill_create_ip>";
            formData += "<total_fee>" + total_fee + "</total_fee>";
            formData += "<trade_type>JSAPI</trade_type>";
            formData += "<sign>" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, 'JSAPI') + "</sign>";
            formData += "</xml>";
            request({
                url: url,
                method: 'POST',
                body: formData
            }, function(err, response, body) {
                if(!err && response.statusCode == 200) {
                    var prepay_id = getXMLNodeValue('prepay_id', body.toString("utf-8"));
                    var tmp = prepay_id.split('[');
                    var tmp1 = tmp[2].split(']');
                    //签名
                    var _paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[0], 'MD5',timeStamp);
                    var o = {
                        prepay_id: tmp1[0],
                        _paySignjs: _paySignjs
                    }
                    res.send(o);
                }
            });
    

    下面是用到的函数

    function paysignjs(appid, nonceStr, package, signType, timeStamp) {
        var ret = {
            appId: appid,
            nonceStr: nonceStr,
            package: package,
            signType: signType,
            timeStamp: timeStamp
        };
        var string = raw1(ret);
        string = string + '&key='+key;
        console.log(string);
        var crypto = require('crypto');
        return crypto.createHash('md5').update(string, 'utf8').digest('hex');
    };
    
    function raw1(args) {
        var keys = Object.keys(args);
        keys = keys.sort()
        var newArgs = {};
        keys.forEach(function(key) {
            newArgs[key] = args[key];
        });
    
        var string = '';
        for(var k in newArgs) {
            string += '&' + k + '=' + newArgs[k];
        }
        string = string.substr(1);
        return string;
    };
    
    function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) {
        var ret = {
            appid: appid,
            attach: attach,
            body: body,
            mch_id: mch_id,
            nonce_str: nonce_str,
            notify_url: notify_url,
            openid: openid,
            out_trade_no: out_trade_no,
            spbill_create_ip: spbill_create_ip,
            total_fee: total_fee,
            trade_type: trade_type
        };
        var string = raw(ret);
        string = string + '&key='+key;
        var crypto = require('crypto');
        return crypto.createHash('md5').update(string, 'utf8').digest('hex');
    };
    
    function raw(args) {
        var keys = Object.keys(args);
        keys = keys.sort()
        var newArgs = {};
        keys.forEach(function(key) {
            newArgs[key.toLowerCase()] = args[key];
        });
    
        var string = '';
        for(var k in newArgs) {
            string += '&' + k + '=' + newArgs[k];
        }
        string = string.substr(1);
        return string;
    };
    
    function getXMLNodeValue(node_name, xml) {
        var tmp = xml.split("<" + node_name + ">");
        var _tmp = tmp[1].split("</" + node_name + ">");
        return _tmp[0];
    }
    

    这样简单3步,小程序的微信支付功能就接上了,下面是测试的支付效果图


    相关文章

      网友评论

      • 5097c2665288:可以发一份服务端的代码吗,我学习一下!谢谢!1033442972@qq.com
      • c80173cf1d14:您好,老师,我的小程序已发布,想添加微信支付功能,请问用您这代码怎么调用。
      • 411c866d45e3:可以发一份服务端的代码吗,我学习一下!谢谢!935192470@qq.com
      • 302784b0c05d:能给一份服务端的代码给我学习一下吗?谢谢1263800580@qq.com
      • ff182cf48457:朋友,你好!请问后台服务是用什么来写的?
      • 3977fe12a7b7:万分感谢楼主,楼主能发一份服务端的代码给我学习一下吗?谢谢 524529064@qq.com
      • 杀个程序猿祭天:data: {
        bookingNo:bookingNo, /*订单号*/
        total_fee:total_fee, /*订单金额*/
        }
        这个订单号怎么获取的??????
      • CallMeSoul:你好,想问下notify_url是用来干嘛的呢?是为了支付成功后发模板消息给用户的么?
        学以致用123:微信给 notify_url 发消息,回传微信支付流水号等信息
      • a5479e64a6f7:在做毕设,个人可以拿到这个接口吗?还有就是怎么实现退款呀,
      • 23b19043f42d:那请问小程序开通支付功能后要手续费吗?
      • 育智者:楼主大神,能来一份服务端代码吗?1139018783@qq.com
      • 894bea0ff8c1:万分感谢楼主,楼主能发一份服务端的代码给我学习一下吗?谢谢 13854690@qq.com
      • 228184e07b94:正好在学这块 能发份代码给我看下么 楼主 746084021@qq.com
      • 53d6491cb590:服务器代码能发给我一份吗?735408024@qq.com
      • f0d782e0c3a1:万分感谢楼主,楼主能发一份服务端的代码给我学习一下吗?谢谢 769038407@qq.com
      • 4bd708684d27:请问你支付完成后支付结果通知能执行到notify_url里么?我试了下支付成功了,但是没访问到notify_url里面
        4bd708684d27:我的notify_url 没带参数,可访问
      • fa9928bf6c54:拜谢!!大神发一份服务器端代码到邮箱 或微信2672873026@qq.com 微 信 dy1681688,谢谢
      • c7e295b17d26:你好,怎么我的小程序没有开通支付功能的选项?即你第二张图的功能
      • 6e494256e4e2:可以发一份案例给我吗
      • d09aa75400cf::pray: 如果小程序已经绑定已有的商户号了,现在想解绑这个重新申请一个新的商户号可以吗?如何解绑呢?
      • Guia:请问小程序里边的支付只能用微信支付吗?不能使用像易宝这样其他支付通道
      • e0a700f22be6:我现在有一个微信小程序,可以在线帮不同的商家卖东西(一次只能浏览一个商家的商品),我想实现A商家的产品卖出后钱直接进入A的支付账户(绑定了A的银行卡),B商家的产品卖出后钱直接进入B的支付账户(绑定了B的银行卡)。

        微信公众号是可以实现这个功能的(通过微信支付服务号绑定多个子账户);
        那么,微信小程序中怎么才能实现这样的功能吗?
        f56400d01ecd:前辈好,请问这问题你解决了么??我最近也在做这个功能,想到用微信企业转账,但是要频繁充值,请问还有别的更好的办法么? 微信 WHBlDIAN584520
      • 160aff2b659a:谢谢分享 我刚学这个 有点不太懂 可以发下源码到我邮箱吗?万分感谢1412774565@qq.com
      • houpfchn:你好,我在用code去后台请求openid的时候,获取openid时err: 40029 "errmsg:invalid code,请问您在当时开发的时候是否遇到过这个问题呢??请教了
        325ff24ff156:40029的错是你的 AppSecret被重置了或者code过期了
        823847a5a306:你好!可以发下源码到我邮箱吗?万分感谢392202929@qq.com
        7be7762517f3: @铁人007 code有过期时间
      • 顺情风:我最近在做一个小程序,在支付方面遇到了点问题,希望您可以指教一下。
        第一:就是用的openid我保存下来,一直用,那样支付订单就不用再去调用微信登录接口了,这样想对嘛?
        第二:就是用户确认支付后,后台怎么接收到这个结果的?
        请了解的各位帮忙解释一下。。。
        7be7762517f3:特定客户针对特定小程序的openid是唯一不变的,所以你存下来是可以的。
        用户支付成功后,微信后台会向你的服务器推送成功数据。
      • 顺情风:确实写的不错,给楼主赞一个!!!
      • 小k博客:能加个微信或者扣扣吗
        IT小C:@小k博客 好的,114413511,微信和qq都是这个
      • cd0293b119a3:棒棒哒
      • 8cea87776aae:求大神发一份服务器端代码到邮箱 2667220790@qq.com
        拜谢!!
      • ce091d1bd49d:引用的crypto文件能发给我一下吗?276294319@qq.com
      • 追梦天涯:服务器代码能不能发我一份呢,感谢楼主
      • 8544d73a7370:有没有现成的文件传我一份,我刚学不太会弄,邮箱45897941@qq。com
      • 望仔超甜:你好,麻烦问下订单号怎么生成啊?
        bigfacewo:@Paranoiadra 随机生成一个呗
        望仔超甜:@隔壁陈叔叔 那这个怎么拿到啊?
        IT小C:@Paranoiadra 订单号就是你自己电商系统里的订单号
      • 知晓程序:你好!我们是爱范儿旗下专注于小程序生态的公众号知晓程序(微信号 zxcx0101)。我们很赞赏你的文章,希望能获得转载授权。授权后,你的文章将会在知晓程序社区(minapp.com)、爱范儿、AppSo 等渠道发布。此外,由于第三方同步抓取功能,您的内容也可能会被同步发表到今日头条、搜狐、网易号等,我们会注明来源和作者姓名。

        非常感谢~~~
      • xunuo0x:感谢:pray:
      • 艾逸涵:谢谢分享

      本文标题:让你的微信小程序具有在线支付功能

      本文链接:https://www.haomeiwen.com/subject/mjgbgttx.html