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

编辑：宝哥软件园来源：互联网时间：2021-12-19

新天龙八部

角色扮演 | 1.85G

评分

立即下载

最近我们需要在微信小程序中使用在线支付功能，所以我看了一下官方文档，发现在小程序中实现微信支付非常方便。如果你之前开发过服务号下的微信支付，你会发现小程序中微信支付的开发过程和服务号中的完全一样。我来说说小程序的开发过程和注意事项。

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

1.开通微信支付和微信商户号的流程和开通微信支付带服务号的流程一样，没什么好说的。

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

2.获取用户的openid主页。我们需要从applet的客户端js获取当前用户的openid。我们可以通过调用wx.login方法获取用户的代码，然后开发人员服务器使用登录证书代码获取openid。

wx . log in({ success : function(RES){ if(RES . code){//发起网络请求wx . request({ URL : ' 3359 your网站/onlogin '，方法3360' post '，数据： { code: res.code }，success 3360 function(RES){ var OpenID=RES . data . OpenID；}，Fail :函数(err){ console . log(err)} } else { console . log('无法获取用户登录状态！'RES . errmsg)} })；var code=req . param(' code ')；请求({ URL : ' https://API . weixin . QQ . com/SNS/jscode 2 session？appid=' appid ' secret=' secret ' js _ code=' code ' grant _ type=authorization _ code '，method: 'GET' }，函数(err，response，body) { if(！err response . statuscode==200){ RES . JSON(JSON . parse(body))；} });3.获取预付费_id、验证paySign的流程与微信支付在服务号上的流程相同。它分为客户端和服务器端。首先，让我们看看服务号中的客户端js。我们使用以下代码来调整支付功能。

函数jsapi调用(){ weixinjisbridge。invoke ('getbrandwcpayrequest '，{'appid' : ' '，//微信官方账号名称，商家传入' timestamp' 3360 ' '，//timestamp，1970年以来的Seconds' nonce str' : '，//随机字符串' package ' : ' predate _ id=%=predate _ id % '，' signtype' 3360

quot;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步，小程序的微信支付功能就接上了，下面是测试的支付效果图

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