近日,因工作需要開始研究在小程序上面實現微信支付功能,經過自己研究加上參考網上前輩的部分代碼,終於實現了。期間遇到過很多坑,故在此筆記供自己和有需要的朋友參考。
開發環境: 微信小程序+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 }