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