近日,因工作需要开始研究在小程序上面实现微信支付功能,经过自己研究加上参考网上前辈的部分代码,终于实现了。期间遇到过很多坑,故在此笔记供自己和有需要的朋友参考。
开发环境: 微信小程序+nodejs(eggjs框架)
参数准备: 微信商户平台申请支付功能,获得商户ID(商户号)、商户key(API KEY)、获得openId、Appsecret()AppSecret是APPID对应的接口密码)
请求流程:
1. 小程序调用wx.request请求到后台(含一些支付信息,如金额、交易名称等)
2.后台在收到前台小程序请求后,按微信支付开发文档的要求进行拼接,然后调用统一下单API发送请求到微信获取签名(这个签名个人理解主要是为了验证报文信息是否被篡改)
3.连同生成的签名及一些重要信息在后台加密后生成一个签名(后文称第二次签名),连同第二次签名已经信息返回给 1 中的小程序request请求。
4.小程序前台收到返回的成功信息后,调用API wx.requestPayment发送请求,成功后会条用微信的支付,让输入密码。(开发环境会生成一个二维码,然开发者微信扫描后才会调用微信支付输入密码界面),最后更新请求结果反馈给页面。
跳坑指南:
两次签名时候都需要输入小程序ID(appId),但是两次签名参数中小程序ID变量名不一样,第一次是全部小写,第二次是第二个单词的首字母大写appId。如此处写错,会提示“支付验证签名失败”{因为签名的目的就是为了验证信息是否被篡改,此处变量名称变了,自然就对不上了}
以下为代码,供参考:(为了测试,交易金额信息直接在后台写死了)
//小程序前台事件函数 xx.js wxPay:function(){ //发送请求到后台,获取prepay_id console.log("&&&&&", app.gData.userInfo.openId); wx.request({ url: app.gData.iServerUrl + \'/getPrepayId\', method: \'GET\', data: { openId: app.gData.userInfo.openId}, header: { \'content-type\': \'application/json\' }, success: function (res) { console.log("payment:",res); if (res.data.status == 100) { var payModel = res.data; wx.requestPayment({ \'timeStamp\': payModel.timestamp, \'nonceStr\': payModel.nonceStr, \'package\': payModel.package, \'signType\': \'MD5\', \'paySign\': payModel.paySign, success: function (res) { console.log("success+++",res); wx.showToast({ title: \'支付成功\', icon: \'success\', duration: 2000 }) }, fail: function (res) { console.log("fail+++", res); } }) } } }) }
//后台eggjs xxservice.js 中的方法 async getPrepayId(parm) { var {ctx,res }= this; var openid = parm.openId; var str = app.config.getWxPayOrdrID(); var spbill_create_ip = \'192.168.3.11\'//ctx.header.host.replace(/::ffff:/, \'\'); // 获取客户端ip var body = \'测试支付\'; // 商品描述 var notify_url = \'https://localhost:7001/api/v1/getPrepayId\' // 支付成功的回调地址 可访问 不带参数 var nonce_str = str; // 随机字符串 var out_trade_no = str; // 商户订单号 var total_fee = \'1\'; // 订单价格 单位是 分 var timestamp = Math.round(new Date().getTime()/1000); // 当前时间 console.log("nonce_str",str); var ret ={ appid:app.config.wx.appid, mch_id:app.config.wx.Mch_id, nonce_str:nonce_str, body:body, out_trade_no:out_trade_no, total_fee:total_fee, spbill_create_ip:spbill_create_ip, notify_url:notify_url, openid:openid, trade_type: \'JSAPI\', key:app.config.wx.Mch_key } // 签名 var sign = paysign.paysignjsapi(ret); var bodyData = \'<xml>\'; bodyData += \'<appid>\' + app.config.wx.appid + \'</appid>\'; // 小程序ID bodyData += \'<body>\' + body + \'</body>\'; // 商品描述 bodyData += \'<mch_id>\' + app.config.wx.Mch_id + \'</mch_id>\'; // 商户号 bodyData += \'<nonce_str>\' + nonce_str + \'</nonce_str>\'; // 随机字符串 bodyData += \'<notify_url>\' + notify_url + \'</notify_url>\'; // 支付成功的回调地址 bodyData += \'<openid>\' + openid + \'</openid>\'; // 用户标识 bodyData += \'<out_trade_no>\' + out_trade_no + \'</out_trade_no>\'; // 商户订单号 bodyData += \'<spbill_create_ip>\' + spbill_create_ip + \'</spbill_create_ip>\'; // 终端IP bodyData += \'<total_fee>\' + total_fee + \'</total_fee>\'; // 总金额 单位为分 bodyData += \'<trade_type>JSAPI</trade_type>\'; // 交易类型 小程序取值如下:JSAPI bodyData += \'<sign>\' + sign + \'</sign>\'; bodyData += \'</xml>\'; // 微信小程序统一下单接口 var returnValue = {}; var urlStr = \'https://api.mch.weixin.qq.com/pay/unifiedorder\'; const rst = await ctx.curl(urlStr, { // 必须指定 method method: \'POST\', data: bodyData }); let signBody = rst.data.toString(); if (!rst.error && rst.status == 200) { console.log("test1 &&&&"); parseString(signBody, function (err, result) { if (result.xml.return_code[0] == \'SUCCESS\') { returnValue.msg = \'操作成功\'; returnValue.status = \'100\'; returnValue.out_trade_no = out_trade_no; // 商户订单号 // 小程序 客户端支付需要 nonceStr,timestamp,package,paySign 这四个参数 returnValue.nonceStr = result.xml.nonce_str[0]; // 随机字符串 returnValue.timestamp = timestamp.toString(); // 时间戳 returnValue.package = \'prepay_id=\' + result.xml.prepay_id[0]; // 统一下单接口返回的 prepay_id 参数值 var wxSign = { appId: app.config.wx.appid, //小程序ID nonceStr: returnValue.nonceStr, //随机串 package: returnValue.package, //数据包 signType: \'MD5\', //签名方式 timeStamp: returnValue.timestamp, //时间戳 key:app.config.wx.Mch_key } returnValue.paySign = paysign.paysignjsapi(wxSign); // 签名 } else{ returnValue.msg = result.xml.return_msg[0]; returnValue.status = \'102\'; } }); } return returnValue; }
//自己写的拼报文及md5加密,两次生成签名时都会调用,所有写成了一个独立的方法 paysign.js
\'use strict\'; const crypto = require(\'crypto\'); //const request = require(\'axios\'); function paysignjsapi(params) { let param = params; var key=\'\'; var ret ={}; // console.log("param.key",param.key); if(param.key){ key = param.key; delete param.key; ret = param; }else{ ret = param; } var str = raw(ret); //将参数拼接成字符串 str = str + \'&key=\'+key; console.log("MD5Str:",str); var md5Str = crypto.createHash(\'md5\').update(str).digest(\'hex\'); md5Str = md5Str.toUpperCase(); ; return md5Str; }; //字符排序连接 function raw(args) { var keys = Object.keys(args); keys = keys.sort(); var newArgs = {}; keys.forEach(function(key) { // newArgs[key.toLowerCase()] = args[key]; newArgs[key] = args[key]; }); var str = \'\'; for(var k in newArgs) { str += \'&\' + k + \'=\' + newArgs[k]; } str = str.substr(1); return str; }; module.exports={ paysignjsapi }