微信小程式開發(五)小程式支付-統一下單
阿新 • • 發佈：2019-02-04
準確來說小程式的支付在上個月就已經做完了，只是那個時候專案原型和UI還沒出來就沒正式動工。現在專案快做完了，就有時間寫部落格了。
在做小程式支付希望你已經熟讀微信的文件微信支付-小程式-手機端和微信支付-小程式-後臺。且你已經有了
AppID: "wx****************", // 小程式ID
Secret: "********************************", // 小程式Secret
Mch_id: "**********", // 商戶號
Mch_key: "********************", // 商戶key關於上面的這4個數據的獲取，請自行在自己的賬號中獲取和設定。且你已經有了使用者的openid。 《微信小程式開發(四)獲取使用者openid》。
小程式介面
wx.requestPayment({
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){
},
'fail':function(res){
}
})小程式介面就暴露這一個方法。這個方法有4個引數是需要後臺去獲取的。
其實大部分工作都是後臺的事情。
後端實現
後端主要是統一下單的這個介面https://api.mch.weixin.qq.com/pay/unifiedorder
這裡主要就是幾個簽名演算法：
統一下單簽名
// 生成簽名
function paysignjsapi(appid,body,mch_id,nonce_str,notify_url,openid,out_trade_no,spbill_create_ip,total_fee) {
var ret = {
appid: appid,
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: 'JSAPI' 小程式paySign
function paysignjs(appid, nonceStr, package, signType, timeStamp) {
var ret = {
appId: appid,
nonceStr: nonceStr,
package: package,
signType: signType,
timeStamp: timeStamp
};
var str = raw1(ret);
str = str + '&key='+key;
return cryptoMO.createHash('md5').update(str).digest('hex');
};
function raw1(args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function(key) {
newArgs[key] = args[key];
});
var str = '';
for(var k in newArgs) {
str += '&' + k + '=' + newArgs[k];
}
str = str.substr(1);
return str;
};統一下單後端實現
var wxConfig = require('../wx_pay/wx_x_config');
var cryptoMO = require('crypto'); // MD5演算法
var parseString = require('xml2js').parseString; // xml轉js物件
var key = wxConfig.Mch_key;
/*
* 根據openid 發起微信支付
*/
router.all('/api/wxpay/unifiedorder', function(req, res, next) {
var param = req.query || req.params;
var openid = param.openid;
var spbill_create_ip = req.ip.replace(/::ffff:/, ''); // 獲取客戶端ip
var body = '測試支付'; // 商品描述
var notify_url = 'https://www.hgdqdev.cn/api/wxpay' // 支付成功的回撥地址 可訪問 不帶引數
var nonce_str = getNonceStr(); // 隨機字串
var out_trade_no = wxConfig.getWxPayOrdrID(); // 商戶訂單號
var total_fee = '1'; // 訂單價格 單位是 分
var timestamp = Math.round(new Date().getTime()/1000); // 當前時間
var bodyData = '<xml>';
bodyData += '<appid>' + wxConfig.AppID + '</appid>'; // 小程式ID
bodyData += '<body>' + body + '</body>'; // 商品描述
bodyData += '<mch_id>' + wxConfig.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
// 簽名
var sign = paysignjsapi(
wxConfig.AppID,
body,
wxConfig.Mch_id,
nonce_str,
notify_url,
openid,
out_trade_no,
spbill_create_ip,
total_fee
);
bodyData += '<sign>' + sign + '</sign>';
bodyData += '</xml>';
// 微信小程式統一下單介面
var urlStr = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request({
url: urlStr,
method: 'POST',
body: bodyData
}, function (error, response, body) {
if (!error && response.statusCode == 200) {
var returnValue = {};
parseString(body, 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 引數值
returnValue.paySign = paysignjs(wxConfig.AppID, returnValue.nonceStr, returnValue.package, 'MD5',timestamp); // 簽名
res.end(JSON.stringify(returnValue));
} else{
returnValue.msg = result.xml.return_msg[0];
returnValue.status = '102';
res.end(JSON.stringify(returnValue));
}
});
}
})
});wxConfig程式碼：
/* 微信引數AppID 和 Secret */
var wxConfig = {
AppID: "wx****************", // 小程式ID
Secret: "********************************", // 小程式Secret
Mch_id: "**********", // 商戶號
Mch_key: "********************", // 商戶key
// 生成商戶訂單號
getWxPayOrdrID: function(){
var myDate = new Date();
var year = myDate.getFullYear();
var mouth = myDate.getMonth() + 1;
var day = myDate.getDate();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var msecond = myDate.getMilliseconds(); //獲取當前毫秒數(0-999)
if(mouth < 10){ /*月份小於10 就在前面加個0*/
mouth = String(String(0) + String(mouth));
}
if(day < 10){ /*日期小於10 就在前面加個0*/
day = String(String(0) + String(day));
}
if(hour < 10){ /*時小於10 就在前面加個0*/
hour = String(String(0) + String(hour));
}
if(minute < 10){ /*分小於10 就在前面加個0*/
minute = String(String(0) + String(minute));
}
if(second < 10){ /*秒小於10 就在前面加個0*/
second = String(String(0) + String(second));
}
if (msecond < 10) {
msecond = String(String(00) + String(second));
} else if(msecond >= 10 && msecond < 100){
msecond = String(String(0) + String(second));
}
var currentDate = String(year) + String(mouth) + String(day) + String(hour) + String(minute) + String(second) + String(msecond);
return currentDate;
}
};
module.exports = wxConfig;例項
// 支付按鈕點選事件
payTap: function(){
var self = this;
wx.request({
url: 'https://www.hgdqdev.cn/api/wxpay/unifiedorder',
data: {
openid: self.data.openid // 這裡正常專案不會只有openid一個引數
},
success: function(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) {
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 2000
})
},
'fail': function (res) {
}
})
}
},
fail: function(){
}
})
},