微信小程序 使用微信支付功能實現在線支付訂單
阿新 • • 發佈：2018-10-11
navi order lose ray 如果 image 全部 extern base 
以前做過PC頁面微信支付，但是這次在小程序 直接調用微信支付功能還是方便很多
先放個微信官方API鏈接：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5
先說說整個下單支付流程的整體思路，
0，準備工作：
一，appId，開發帳號中註冊時的appId。
二，sdkContent，後臺返回的包含有金額，支付方式等信息的數據包。
三，key值，商戶申請微信支付功能時所配置的密鑰
準備好後，
1，首先選擇下單金額和支付方式【這裏默認只有微信支付一個】，拿到金額和支付方式和用戶唯一識別碼【登陸時就放入微信緩存中】，發送到後端下單接口生成訂單號
2，拿到返回的訂單號和用戶唯一識別碼，再到後臺現金充值接口拿到sdkContent，也就是一會在下一步微信支付中要用到的package參數，
3，將開發帳號中註冊時的appId【註意：區別於後臺之間通訊用的appId，兩不同也不通用】，時間戳，隨機串，簽名方式和數據包按微信簽名規則拼接成字符串，後面接上key值 【key值 ：商戶申請微信支付功能時所配置的密鑰】
使用MD5方式進行加密，再將成生的加密字符中的字母全部換成大寫，然後將加密串與appId，時間戳，隨機串，簽名方式和數據包調用wx.requestPayment(OBJECT)發起微信支付
如果規則符合，基本就可以支付成功了
註意要點：appid不要弄錯，sdkContent別名要換成微信指定的prepay_id， 參數名大小寫，key值放在尾部，其他參數按序排列，加密完成後字母全部大寫
第一步：下單
subRecharge: function (e) { //充值下單 var that = this var amount = Number(that.data.onPrice); //金額 [單位：分] if (amount==‘‘){ that.errorShow(‘請選擇充值金額‘); return; } var appid = getApp().globalData.appid; //appid var timestamp = Date.parse(newDate());//獲取當前時間戳 timestamp = timestamp / 1000; var version = getApp().globalData.version; //版本號 var sign = getApp().globalData.sign; //簽名 var userIdEnc = wx.getStorageSync(‘userIdEnc‘); //獲取本地緩存中的userIdEnc //用戶唯一識別碼 var loginDevice = wx.getStorageSync(‘loginDevice‘);//獲取本地緩存中的loginDevice var data = { "appId": appid, "timestamp": timestamp, "version": version, "userIdEnc": userIdEnc, "amount": amount }; var url = getApp().globalData.url; //接口路徑 var key = getApp().globalData.appkey; //加密k值 var encryption = utils.encryption(key, data) //算出簽名 sign = encryption;//賦值給簽名 data.sign = sign; data = JSON.stringify(data); // console.log(‘算出簽名的data結果：‘, data) var header = { ‘content-type‘: ‘application/json‘, ‘cookie‘: "devimark=" + loginDevice + ";" + "usenc=" + userIdEnc, }; wx.request({ //請求用充值下單接口 method: "post", url: url + ‘/order/recharge/createAmountOrder‘, data: data + ‘@#@‘ + appid, header: header, dataType: "json", success: function (res) { // console.log("充值成功", res) if (res.data.code == ‘0000‘) { //下單成功 that.setData({ systemOrderNo: res.data.data.systemOrderNo //返回充值訂單編號 }); that.cashPay(); //調用支付方法 } else if (res.data.code == ‘2014‘){ //2014 用戶沒有登錄 wx.navigateTo({ url: ‘../../pages/logs/logs‘, }) }else{ wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) } }, fail: function (res) { console.log("充值失敗", res) wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) } }) }
第二步：使用訂單號獲取支付數據包【含第三步：調用微信支付接口】
cashPay: function(){ // 現金充值 var that = this // var amount = Number(that.data.onPrice); //金額 var systemOrderNo = that.data.systemOrderNo;//充值訂單號 var cashPayWayId = getApp().globalData.cashPayWayId; //現金支付方式ID var appid = getApp().globalData.appid; //appid var timestamp = Date.parse(new Date());//獲取當前時間戳 timestamp = timestamp / 1000; var version = getApp().globalData.version; //版本號 var sign = getApp().globalData.sign; //簽名 var userIdEnc = wx.getStorageSync(‘userIdEnc‘); //獲取本地緩存中的userIdEnc //用戶唯一識別碼 var loginDevice = wx.getStorageSync(‘loginDevice‘);//獲取本地緩存中的loginDevice var data = { "appId": appid, "timestamp": timestamp, "version": version, "systemOrderNo": systemOrderNo, "cashPayWayId": cashPayWayId }; var url = getApp().globalData.url; //接口路徑 var key = getApp().globalData.appkey; //加密k值 var encryption = utils.encryption(key, data) //算出簽名 sign = encryption;//賦值給簽名 data.sign = sign; data = JSON.stringify(data); // console.log(‘算出簽名的data結果：‘, data) var header = { ‘content-type‘: ‘application/json‘, ‘cookie‘: "devimark=" + loginDevice + ";" + "usenc=" + userIdEnc, }; wx.request({ //請求用現金支付接口 method: "post", url: url + ‘/pay/cash/cashPay‘, data: data + ‘@#@‘ + appid, header: header, dataType: "json", success: function (res) { // console.log("現金支付成功", res) if (res.data.code == ‘0000‘) { //現金支付成功 var sdkContent = ‘prepay_id=‘+res.data.data.sdkContent; var wxappid = getApp().globalData.wxappid; //appid var timestamp = Date.parse(new Date());//獲取當前時間戳 timestamp = timestamp / 1000; timestamp = timestamp.toString(); var nonceStr = utils.getNum(); //隨機串 var signType = ‘MD5‘; var paykey = getApp().globalData.paykey; var paySign = { "appId": wxappid, "nonceStr": nonceStr, "package": sdkContent, "signType": signType, "timeStamp": timestamp,} var objKeySort = utils.objKeySort(paySign); //排序 paySign = utils.splicingString(objKeySort); //按微信支付驗簽規則拼接字符串 paySign = paySign + "&key=" + paykey; //尾部添加key值 【商戶密鑰】 console.log("sort_ASCII", objKeySort); console.log("paySign", paySign); var md5 = require(‘../../utils/js/md5.js‘); //md5加密 var md5Pw = md5.hexMD5(paySign); paySign = md5Pw.toUpperCase(); //按微信支付驗簽規則將簽名字母轉大寫 console.log(paySign); console.log(timestamp, nonceStr, sdkContent, paySign); wx.requestPayment( { ‘timeStamp‘: timestamp, ‘nonceStr‘: nonceStr, ‘package‘: sdkContent, ‘signType‘: ‘MD5‘, ‘paySign‘: paySign, ‘success‘: function (res) { // console.log(1); wx.navigateTo({ url: ‘../../pages/rechargeSuccess/rechargeSuccess‘,//充值成功頁 }) }, ‘fail‘: function (res) { wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) }, ‘complete‘: function (res) { wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) } }) // console.log("0000", res.data.data.systemOrderNo) } else if (res.data.code == ‘2014‘) { //2014 用戶沒有登錄 wx.navigateTo({ url: ‘../../pages/logs/logs‘, }) } else { wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) } }, fail: function (res) { console.log("充值失敗", res) wx.navigateTo({ url: ‘../../pages/rechargeFailure/rechargeFailure‘,//充值失敗頁 }) } }) },
註意檢查簽名加密前的順序和大小寫
appId=wxd678efh567hg6787&nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&package=prepay_id=wx2017033010242291fcfe0db70013231072&signType=MD5&timeStamp=1490840662&key=qazwsxedcrfvtgbyhnujmikolp111111
其中有用到的一些數據處理方法，封裝在util.js中方便全局調用，這裏也給貼上
//key值順序排序的函數 function objKeySort(obj) {//排序的函數 var newkey = Object.keys(obj).sort(); //先用Object內置類的keys方法獲取要排序對象的屬性名，再利用Array原型上的sort方法對獲取的屬性名進行排序，newkey是一個數組 var newObj = {};//創建一個新的對象，用於存放排好序的鍵值對 for (var i = 0; i < newkey.length; i++) {//遍歷newkey數組 newObj[newkey[i]] = obj[newkey[i]];//向新創建的對象中按照排好的順序依次增加鍵值對 } return newObj;//返回排好序的新對象 } function splicingString(obj){ //封裝全局拼接微信支付驗簽字符串 var str = ‘‘; var arr = Object.keys(obj); var j = arr.length; var k = 0; for (var i in obj) { k++; // console.log("aa.length::", j, k) if (j == k) { str += i + "=" + obj[i] } else { str += i + "=" + obj[i] + "&" } // console.log(i,‘--‘,aa[i]); } return str; // console.log(str) } function getNum() { //隨機生成32位隨機數 var chars = [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘, ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘, ‘g‘, ‘h‘, ‘i‘, ‘j‘, ‘k‘, ‘l‘, ‘m‘, ‘n‘, ‘o‘, ‘p‘, ‘q‘, ‘r‘, ‘s‘, ‘t‘, ‘u‘, ‘v‘, ‘w‘, ‘x‘, ‘y‘, ‘z‘]; var nums = ""; for (var i = 0; i < 32; i++) { var id = parseInt(Math.random() * 61); nums += chars[id]; } return nums; } module.exports = { formatTime: formatTime, // Bytes2Str: Bytes2Str, // Str2Bytes: Str2Bytes, encryption: encryption, getNum: getNum, objKeySort: objKeySort, sort_ASCII: sort_ASCII, splicingString: splicingString }
MD5加密文件
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt * See http://pajhome.org.uk/site/legal.html for details. */ /* * Add integers, wrapping at 2^32. This uses 16-bit operations internally * to work around bugs in some JS interpreters. */ function safe_add(x, y) { var lsw = (x & 0xFFFF) + (y & 0xFFFF) var msw = (x >> 16) + (y >> 16) + (lsw >> 16) return (msw << 16) | (lsw & 0xFFFF) } /* * Bitwise rotate a 32-bit number to the left. */ function rol(num, cnt) { return (num << cnt) | (num >>> (32 - cnt)) } /* * These functions implement the four basic operations the algorithm uses. */ function cmn(q, a, b, x, s, t) { return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b) } function ff(a, b, c, d, x, s, t) { return cmn((b & c) | ((~b) & d), a, b, x, s, t) } function gg(a, b, c, d, x, s, t) { return cmn((b & d) | (c & (~d)), a, b, x, s, t) } function hh(a, b, c, d, x, s, t) { return cmn(b ^ c ^ d, a, b, x, s, t) } function ii(a, b, c, d, x, s, t) { return cmn(c ^ (b | (~d)), a, b, x, s, t) } /* * Calculate the MD5 of an array of little-endian words, producing an array * of little-endian words. */ function coreMD5(x) { var a = 1732584193 var b = -271733879 var c = -1732584194 var d = 271733878 for (var i = 0; i < x.length; i += 16) { var olda = a var oldb = b var oldc = c var oldd = d a = ff(a, b, c, d, x[i + 0], 7, -680876936) d = ff(d, a, b, c, x[i + 1], 12, -389564586) c = ff(c, d, a, b, x[i + 2], 17, 606105819) b = ff(b, c, d, a, x[i + 3], 22, -1044525330) a = ff(a, b, c, d, x[i + 4], 7, -176418897) d = ff(d, a, b, c, x[i + 5], 12, 1200080426) c = ff(c, d, a, b, x[i + 6], 17, -1473231341) b = ff(b, c, d, a, x[i + 7], 22, -45705983) a = ff(a, b, c, d, x[i + 8], 7, 1770035416) d = ff(d, a, b, c, x[i + 9], 12, -1958414417) c = ff(c, d, a, b, x[i + 10], 17, -42063) b = ff(b, c, d, a, x[i + 11], 22, -1990404162) a = ff(a, b, c, d, x[i + 12], 7, 1804603682) d = ff(d, a, b, c, x[i + 13], 12, -40341101) c = ff(c, d, a, b, x[i + 14], 17, -1502002290) b = ff(b, c, d, a, x[i + 15], 22, 1236535329) a = gg(a, b, c, d, x[i + 1], 5, -165796510) d = gg(d, a, b, c, x[i + 6], 9, -1069501632) c = gg(c, d, a, b, x[i + 11], 14, 643717713) b = gg(b, c, d, a, x[i + 0], 20, -373897302) a = gg(a, b, c, d, x[i + 5], 5, -701558691) d = gg(d, a, b, c, x[i + 10], 9, 38016083) c = gg(c, d, a, b, x[i + 15], 14, -660478335) b = gg(b, c, d, a, x[i + 4], 20, -405537848) a = gg(a, b, c, d, x[i + 9], 5, 568446438) d = gg(d, a, b, c, x[i + 14], 9, -1019803690) c = gg(c, d, a, b, x[i + 3], 14, -187363961) b = gg(b, c, d, a, x[i + 8], 20, 1163531501) a = gg(a, b, c, d, x[i + 13], 5, -1444681467) d = gg(d, a, b, c, x[i + 2], 9, -51403784) c = gg(c, d, a, b, x[i + 7], 14, 1735328473) b = gg(b, c, d, a, x[i + 12], 20, -1926607734) a = hh(a, b, c, d, x[i + 5], 4, -378558) d = hh(d, a, b, c, x[i + 8], 11, -2022574463) c = hh(c, d, a, b, x[i + 11], 16, 1839030562) b = hh(b, c, d, a, x[i + 14], 23, -35309556) a = hh(a, b, c, d, x[i + 1], 4, -1530992060) d = hh(d, a, b, c, x[i + 4], 11, 1272893353) c = hh(c, d, a, b, x[i + 7], 16, -155497632) b = hh(b, c, d, a, x[i + 10], 23, -1094730640) a = hh(a, b, c, d, x[i + 13], 4, 681279174) d = hh(d, a, b, c, x[i + 0], 11, -358537222) c = hh(c, d, a, b, x[i + 3], 16, -722521979) b = hh(b, c, d, a, x[i + 6], 23, 76029189) a = hh(a, b, c, d, x[i + 9], 4, -640364487) d = hh(d, a, b, c, x[i + 12], 11, -421815835) c = hh(c, d, a, b, x[i + 15], 16, 530742520) b = hh(b, c, d, a, x[i + 2], 23, -995338651) a = ii(a, b, c, d, x[i + 0], 6, -198630844) d = ii(d, a, b, c, x[i + 7], 10, 1126891415) c = ii(c, d, a, b, x[i + 14], 15, -1416354905) b = ii(b, c, d, a, x[i + 5], 21, -57434055) a = ii(a, b, c, d, x[i + 12], 6, 1700485571) d = ii(d, a, b, c, x[i + 3], 10, -1894986606) c = ii(c, d, a, b, x[i + 10], 15, -1051523) b = ii(b, c, d, a, x[i + 1], 21, -2054922799) a = ii(a, b, c, d, x[i + 8], 6, 1873313359) d = ii(d, a, b, c, x[i + 15], 10, -30611744) c = ii(c, d, a, b, x[i + 6], 15, -1560198380) b = ii(b, c, d, a, x[i + 13], 21, 1309151649) a = ii(a, b, c, d, x[i + 4], 6, -145523070) d = ii(d, a, b, c, x[i + 11], 10, -1120210379) c = ii(c, d, a, b, x[i + 2], 15, 718787259) b = ii(b, c, d, a, x[i + 9], 21, -343485551) a = safe_add(a, olda) b = safe_add(b, oldb) c = safe_add(c, oldc) d = safe_add(d, oldd) } return [a, b, c, d] } /* * Convert an array of little-endian words to a hex string. */ function binl2hex(binarray) { var hex_tab = "0123456789abcdef" var str = "" for (var i = 0; i < binarray.length * 4; i++) { str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) + hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF) } return str } /* * Convert an array of little-endian words to a base64 encoded string. */ function binl2b64(binarray) { var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" var str = "" for (var i = 0; i < binarray.length * 32; i += 6) { str += tab.charAt(((binarray[i >> 5] << (i % 32)) & 0x3F) | ((binarray[i >> 5 + 1] >> (32 - i % 32)) & 0x3F)) } return str } /* * Convert an 8-bit character string to a sequence of 16-word blocks, stored * as an array, and append appropriate padding for MD4/5 calculation. * If any of the characters are >255, the high byte is silently ignored. */ function str2binl(str) { var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks var blks = new Array(nblk * 16) for (var i = 0; i < nblk * 16; i++) blks[i] = 0 for (var i = 0; i < str.length; i++) blks[i >> 2] |= (str.charCodeAt(i) & 0xFF) << ((i % 4) * 8) blks[i >> 2] |= 0x80 << ((i % 4) * 8) blks[nblk * 16 - 2] = str.length * 8 return blks } /* * Convert a wide-character string to a sequence of 16-word blocks, stored as * an array, and append appropriate padding for MD4/5 calculation. */ function strw2binl(str) { var nblk = ((str.length + 4) >> 5) + 1 // number of 16-word blocks var blks = new Array(nblk * 16) for (var i = 0; i < nblk * 16; i++) blks[i] = 0 for (var i = 0; i < str.length; i++) blks[i >> 1] |= str.charCodeAt(i) << ((i % 2) * 16) blks[i >> 1] |= 0x80 << ((i % 2) * 16) blks[nblk * 16 - 2] = str.length * 16 return blks } /* * External interface */ function hexMD5(str) { return binl2hex(coreMD5(str2binl(str))) } function hexMD5w(str) { return binl2hex(coreMD5(strw2binl(str))) } function b64MD5(str) { return binl2b64(coreMD5(str2binl(str))) } function b64MD5w(str) { return binl2b64(coreMD5(strw2binl(str))) } /* Backward compatibility */ function calcMD5(str) { return binl2hex(coreMD5(str2binl(str))) } module.exports = { hexMD5: hexMD5 }View Code
最後，成功調取微信支付功能！
微信小程序 使用微信支付功能實現在線支付訂單