让你的微信小程序具有在线支付功能
前言
最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙，下面我就具体说一下小程序里微信支付的开发流程和注意点。
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 3569: DZY Loves Chinese II [高斯消元XOR 神题]
http://www.lydsy.com/JudgeOnline/problem.php?id=3569 题意:多次询问一个无向连通图当图中某k条边消失时这个图是否联通 强制在线 太神啦啦啦啦啦啦啦啦 ...
- Win10无法使用小娜搜索本地应用问题的解决方案
小娜介绍 win10的Cortana小娜是一个功能非常强大的语音和搜索助手,用户可以通过小娜助手搜索任意的文件和应用软件,不过有用户发现win10的小娜搜索不到已安装的本地软件,那么win10小娜助手 ...
- python爬虫（2）——编写一个爬虫
一.URL的编码与解码 在python2中包含的urllib和urllib2,都是接受URL请求相关的模块.但是在python3中,却没有urllib2.实际上urllib2的功能在python3中可 ...
- vue 使用Jade模板写html，stylus写css
vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...
- shell实现centos7双网卡修改网卡名eth0,eth1,并设置网络
#!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...
- React设计思想
熟悉一个新技术的关键是熟悉他的特色和理念 React框架本身和我们常用的JavaScript MVC框架,如:AngularJS,Backbone,Ember等,没有直接的可比性.在React的官方博 ...
- Java多线程推荐使用的停止方法和暂停方法
判断线程结束和让线程结束 package cn.lonecloud.Thread.study; /** * 用于循环1000次的线程 * @Title: Run1000Thread.java * @P ...
- nxlog4go Log Levels and Pattern Layout
Log levels nxlog4go provides log levels as below: type Level int const ( FINEST Level = iota FINE DE ...
- FIO性能测试
FIO参数中,ioengine使用libaio,并发jobs数固定为1,通过iodepth来控制压力.分别测试随机读.随机写,作为读写的性能基准.不测试顺序读写,不测试混合读写. 1.测试IOPS峰值 ...
- qdoc.exe
qdoc.exe Usage: qdoc [options] file1.qdocconf ... # Qt文档生成器 Qt documentation generator # 设置 Options: ...