以前做过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(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, "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 }

最后,成功调取微信支付功能!

微信小程序 使用微信支付功能实现在线订单支付的更多相关文章

  1. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  2. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  3. 使用Appium 测试微信小程序和微信公众号方法

    由于腾讯系QQ.微信等都是基于腾讯自研X5内核,不是google原生webview,需要打开TBS内核Inspector调试功能才能用Chrome浏览器查看页面元素,并实现Appium自动化测试微信小 ...

  4. 微信小程序结合微信公众号进行消息发送

    微信小程序结合微信公众号进行消息发送 由于小程序的模板消息已经废弃了,官方让使用订阅消息功能.而订阅消息的使用限制比较大,用户必须得订阅.需要获取用户同意接收消息的权限.用户必须得和小程序有交互的时候 ...

  5. 微信小程序--仿微信小程序朋友圈Pro(内容发布、点赞、评论、回复评论)

    微信小程序--仿微信小程序朋友圈Pro(内容发布.点赞.评论.回复评论) 项目开源地址M朋友圈Pro 求个Star 项目背景 ​ 基于原来的开源项目 微信小程序仿朋友圈功能开发(发布.点赞.评论等功能 ...

  6. 微信小程序(微信应用号)开发ide安装解决方法

    这两天整个技术圈都炸锅了,微信小程序(微信应用号)发布内测,首批200家收到邀请,但是没受邀请的同学,也不用担心,下面介绍一下解决方法. 首先需要下载ide,昨天只需要下载0.9版本的编辑器并替换文件 ...

  7. 微信小程序(原名微信应用号)开发工具0.9版安装教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名 ...

  8. 微信小程序之微信登陆 —— 微信小程序教程系列(20)

    简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...

  9. 微信小程序(微信应用号)组件讲解[申明:来源于网络]

    微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html

随机推荐

  1. ipvsadm分发MySQL读请求

    在MySQL的部署场景中,经常使用HAproxy和ipvs来作为读请求转发的网关.ipvs的好处在于本身不需要daemon的方式来运行,而是直接作为kernel的服务来提供:当ipvs和应用程序服务器 ...

  2. paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之onehot coding styles(encoded-parameter style with registered outputs不推荐但是经常有人写这样的代码)

    这样写法,不利与综合,case语句中比较也是full-vector比较.

  3. 【android】安卓的权限提示及版本相关

    Only dangerous permissions require user agreement. The way Android asks the user to grant dangerous ...

  4. Python使用ORM控制MongoDB(MongoEngine)

    简介: MongoEngine是一个对象文档映射器(ODM),相当于一个基于SQL的对象关系映射器(ORM) pymongo来操作MongoDB数据库,但是直接把对于数据库的操作代码都写在脚本中,这会 ...

  5. python数据类型之列表(list)和其常用方法

    列表是python常用数据类型之一,是可变的,可由n = []创建,也可由n = list()创建,第一种方法更常用. 常用方法总结: # 创建方法 n = [] 或者 n = list() # in ...

  6. HDU - 1864 最大报销额 (背包)

    题意: 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编 ...

  7. BZOJ 2721: [Violet 5]樱花

    (X-N)(Y-N)=N^2 #include<cstdio> using namespace std; const int mod=1e9+7; int n,cnt,isprime[10 ...

  8. HDU 5525 Product 数论

    题意: 给出一个长度为\(n(1 \leq n \leq 10^5)\)的序列\(A_i\),\(N=\prod\limits_{i=1}^{n}i^{A_i}\).求\(N\)的所有约数的乘积. 分 ...

  9. Django two

    http://www.cnblogs.com/yuanchenqi/articles/6083427.html Django: 1.安装Django pip install  django 2.创建p ...

  10. loj2275 「JXOI2017」颜色

    枚举右端点,然后看左端点合法情况. 先预处理每个颜色 \(i\) 的最大出现位置 \(max_i\) 和最小出现位置 \(min_i\).对于枚举右端点在一个位置 \(i\),凡是 \(max_k & ...