让你的微信小程序具有在线支付功能
前言
最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙，下面我就具体说一下小程序里微信支付的开发流程和注意点。
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:数据库填入数据 ...
随机推荐
- Does Java pass by reference or pass by value?(Java是值传递还是引用传递) - 总结
这个话题一直是Java程序员的一个热议话题,争论不断,但是不论是你百度搜也好还是去看官方的文档中所标明的也好,得到的都只有一个结论:Java只有值传递. 在这里就不贴代码细致解释了,让我们来看看一些论 ...
- "_OBJC_CLASS_$_MAMapServices", referenced from: 的问题修复
今天将高德地图集成到ios模拟器编译出现了一个错误 Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MAMapServic ...
- [Python爬虫] Selenium爬取新浪微博客户端用户信息、热点话题及评论 (上)
转载自:http://blog.csdn.net/eastmount/article/details/51231852 一. 文章介绍 源码下载地址:http://download.csdn.net/ ...
- 观察者模式—jdk自带源码分析
一:观察者模式简介 二:jdk实现观察者模式的源码 三:实际例子 四:观察者模式的优点和不足 五:总结 一:观察者模式简介 有时又被称为发布(publish )-订阅(Subscribe)模式.模型- ...
- ECS的配置与使用
登录阿里云ECS,系统是centos7.2 在linux下通过useradd方式创建新用户,切换到该用户权限,发现-bash-4.2$ . 解决方法:先查看进程,关闭相关进程.然后使用useradd ...
- MyISAM 和InnoDB 讲解
1.InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定. 2.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持. ...
- Yii的URL助手
Url 帮助类 获得通用 URL 记住 URLs 检查相对 URLs Url 帮助类提供一系列的静态方法来帮助管理 URL. 获得通用 URL 有两种获取通用 URLS 的方法 :当前请求的 home ...
- 用一个简单的例子比较SVM，MARS以及BRUTO（R语言）
背景重述 本文是ESL: 12.3 支持向量机和核中表12.2的重现过程.具体问题如下: 在两个类别中产生100个观测值.第一类有4个标准正态独立特征\(X_1,X_2,X_3,X_4\).第二类也有 ...
- LeetCode第七天
==数组 Medium== 40.(162)Find Peak Element JAVA //斜率思想,二分法 class Solution { public int findPeakElement( ...
- LeetCode第五天
leetcode 第五天 2018年1月6日 22.(566) Reshape the Matrix JAVA class Solution { public int[][] matrixReshap ...