让你的微信小程序具有在线支付功能
前言
最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙，下面我就具体说一下小程序里微信支付的开发流程和注意点。
1.开通微信支付和微信商户号
这个过程就和开通服务号的微信支付过程一样，没有什么可以说的。
2.获得用户的openid
首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code,然后开发者服务器使用登录凭证 code 获取 openid。
wx.login({
success: function(res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://yourwebsit/onLogin',
method: 'POST',
data: {
code: res.code
},
success: function(res) {
var openid = res.data.openid;
},
fail: function(err) {
console.log(err)
}
})
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
});
var code = req.param("code");
request({
url: "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code",
method: 'GET'
}, function(err, response, body) {
if (!err && response.statusCode == ) {
res.json(JSON.parse(body));
}
});
3.获取prepay_id和支付签名验证paySign
这一步的过程就和服务号里的微信支付过程一样，分为客户端和服务器端
首先来看一下客户端js
在服务号里，我们是通过如下的代码来调起支付功能
function jsApiCall()
{
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId":"", //公众号名称，由商户传入
"timeStamp":"", //时间戳，自1970年以来的秒数
"nonceStr":"", //随机串
"package":"prepay_id=<%=prepay_id%>",
"signType":"MD5", //微信签名方式：
"paySign":"<%=_paySignjs%>" //微信签名
},
function(res){
WeixinJSBridge.log(res.err_msg);
if( res.err_msg =="get_brand_wcpay_request:ok"){
alert("支付成功!");
}else{
alert("支付失败!");
}
}
);
}
在小程序里，我们是通过wx.requestPayment方法来调起支付功能，当然在这之前，我们先要获取prepay_id。
wx.request({
url: 'https://yourwebsit/service/getPay',
method: 'POST',
data: {
bookingNo:bookingNo, /*订单号*/
total_fee:total_fee, /*订单金额*/
openid:openid
},
header: {
'content-type': 'application/json'
},
success: function(res) {
wx.requestPayment({
'timeStamp':timeStamp,
'nonceStr': nonceStr,
'package': 'prepay_id='+res.data.prepay_id,
'signType': 'MD5',
'paySign': res.data._paySignjs,
'success':function(res){
console.log(res);
},
'fail':function(res){
console.log('fail:'+JSON.stringify(res));
}
})
},
fail: function(err) {
console.log(err)
}
})
那在服务器端主要要实现的是prepay_id的获取和签名paySign
var bookingNo = req.param("bookingNo");
var total_fee = req.param("total_fee");
var openid = req.param("openid");
var body = "费用说明";
var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
var formData = "<xml>";
formData += "<appid>appid</appid>"; //appid
formData += "<attach>test</attach>";
formData += "<body>" + body + "</body>";
formData += "<mch_id>mch_id</mch_id>"; //商户号
formData += "<nonce_str>nonce_str</nonce_str>";
formData += "<notify_url>notify_url</notify_url>";
formData += "<openid>" + openid + "</openid>";
formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";
formData += "<spbill_create_ip>spbill_create_ip</spbill_create_ip>";
formData += "<total_fee>" + total_fee + "</total_fee>";
formData += "<trade_type>JSAPI</trade_type>";
formData += "<sign>" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, 'JSAPI') + "</sign>";
formData += "</xml>";
request({
url: url,
method: 'POST',
body: formData
}, function(err, response, body) {
if(!err && response.statusCode == ) {
var prepay_id = getXMLNodeValue('prepay_id', body.toString("utf-8"));
var tmp = prepay_id.split('[');
var tmp1 = tmp[].split(']');
//签名
var _paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[], 'MD5',timeStamp);
var o = {
prepay_id: tmp1[],
_paySignjs: _paySignjs
}
res.send(o);
}
});
下面是用到的函数
function paysignjs(appid, nonceStr, package, signType, timeStamp) {
var ret = {
appId: appid,
nonceStr: nonceStr,
package: package,
signType: signType,
timeStamp: timeStamp
};
var string = raw1(ret);
string = string + '&key='+key;
console.log(string);
var crypto = require('crypto');
return crypto.createHash('md5').update(string, 'utf8').digest('hex');
};
function raw1(args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function(key) {
newArgs[key] = args[key];
});
var string = '';
for(var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr();
return string;
};
function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) {
var ret = {
appid: appid,
attach: attach,
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: trade_type
};
var string = raw(ret);
string = string + '&key='+key;
var crypto = require('crypto');
return crypto.createHash('md5').update(string, 'utf8').digest('hex');
};
function raw(args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function(key) {
newArgs[key.toLowerCase()] = args[key];
});
var string = '';
for(var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr();
return string;
};
function getXMLNodeValue(node_name, xml) {
var tmp = xml.split("<" + node_name + ">");
var _tmp = tmp[].split("</" + node_name + ">");
return _tmp[];
}
这样简单3步，小程序的微信支付功能就接上了，下面是测试的支付效果图
让你的微信小程序具有在线支付功能的更多相关文章
- 微信小程序仿朋友圈功能开发（发布、点赞、评论等功能）
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- 微信小程序产品定位及功能介绍
产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...
- （三）微信小程序首页的分类功能和搜索功能的实现笔记
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 微信小程序开发平台新功能「云开发」快速上手体验
微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...
- 微信小程序又一爆炸功能上线-云开发
云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...
- 微信小程序中悬浮窗功能的实现（主要探讨和解决在原生组件上的拖动）
问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...
- 微信小程序开发入门教程（三）---小程序云开发支付功能
支付(shoukuan)功能真的很重要!由于我还没有商户号,以下代码未实际验证 1.服务端 进入云开发,新建云函数pay(应该也可以在开发者工具编写后上传) 编写后端代码index.js这里用到第三方 ...
- 微信小程序书简易支付
这里结合了上一篇的手机号登录接下来的实现功能 https://www.cnblogs.com/xiaoyantongxue/p/15472915.html 登录后进入课程选择页面 1:数据库填入数据 ...
随机推荐
- BZOJ 2752: [HAOI2012]高速公路(road) [线段树 期望]
2752: [HAOI2012]高速公路(road) Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1219 Solved: 446[Submit] ...
- 【转】TCP/IP和SOCKET的区别
要写网络程序就必须用Socket,这是程序员都知道的.而且,面试的时候,我们也会问对方会不会Socket编程?一般来说,很多人都会说,Socket编程基本就是listen,accept以及send,w ...
- 事务与隔离级别------《Designing Data-Intensive Applications》读书笔记10
和数据库打交道的程序员绕不开的话题就是:事务,作为一个简化访问数据库的应用程序的编程模型.通过使用事务,应用程序可以忽略某些潜在的错误场景和并发问题,由数据库负责处理它们.而并非每个应用程序都需要事务 ...
- HashMap----工作原理
先来些简单的问题 "你用过HashMap吗?" "什么是HashMap?你为什么用到它?" 几乎每个人都会回答"是的",然后回答HashMa ...
- PHP7 Xdebug配置方式
方式一 到http://xdebug.org/files/php_xdebug-2.4.1-7.0-vc14.dll下载最新版的XDebug文件. 下载之后放到PHP7根目录下的ext子目录下. PH ...
- MTU介绍以及在windows和linux下怎么设置MTU值
最大传输单元MTU(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个参数通常与通信接口有关(网络接口卡 ...
- ireport报表学习
常用组件介绍: 制作一个报表一般四个组件比较常用,下面分别介绍 Rectangle:用于画表格的样式,整个表格的样式使用次组件做出来的,本控件表现为一个黑色矩形框,多个黑色矩形框排在一起可以组合出来任 ...
- 如何解决jQuery easyui中locale文件下easyui-lang-zh_CN中文乱码问题
1.在保存eclipse项目的目录下找到引入easyui-lang-zh_CN.js 2.用记事本打开该js文件,若打开后的中文正常,直接复制,粘贴到项目中的该js文件中,保存 3.若打开后中文出现乱 ...
- Linux定时任务深入学习
为当前用户创建cron服务 1. 键入 crontab -e 编辑crontab服务文件 例如 文件内容如下: */2 * * * * /bin/sh /home/admin/jiaoben/bu ...
- textarea只允许上下调节尺寸
对于extarea,因为如果不做限制的话,它是可以自由调节尺寸的,对于这一点我相信用户是非常喜欢的,因为每个人都有自己认为合适的尺寸,但是对于前端来说就比较头疼了,因为随意调节宽高,就会破坏整体布局, ...