微信小程序进行微信支付的步骤昂述


Posted in Javascript onDecember 01, 2016

最近开发微信小程序进入到支付阶段,一直以来从事App开发,所以支付流程还是熟记于心的。但是微信小程序的支付就有点奇怪了,应用的创建是在公众号里,但是文档的介绍却在公众号中无法找到直接入口,甚是不解,而且小程序的师傅到底是属于公众号支付范畴还是app支付范畴也成疑问。下面是小程序支付文档的入口(嵌套在小程序api中):

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

小程序支付步骤:

1,预支付

2,根据预支付数据+签名——>发起支付

3,支付回调

下面对这3个步骤进行简单描述:

1,预支付。该接口通过前端提交需支付的信息(订单号、价格等)给开发者服务器,开发者服务器在提交到微信,而后返回真正前端需要进行支付的一些信息;eg:

开发者服务器的预支付接口:

https://()htm?total_fee=100&cid=6001&orderCodes=2016120119
{
"sign":"A2****************A6",
"timestamp":"14****************68",
"package":"Sign=WXPay",
"partnerId":"14****************02",
"appid":"wx****************ab",
"nonceStr":"9f****************37",
"prepayId":"wx****************54"
}

2,发起支付(需要注意的是发起支付是不需要上传appid,

但是签名paySign需要appid ,而且放在第一个)

wx.requestPayment({ 
nonceStr: res.data.nonceStr, 
package: "prepay_id="+res.data.prepayId, 
signType: 'MD5', 
timeStamp: res.data.timestamp, 
paySign: sign,//<strong><span style="color:#ff0000;">五个字段参与签名(区分大小写):appId,nonceStr,package,signType,timeStamp(需要注意的是,这5个参数签名排序的顺序按照ASCII字典序排序)</span></strong> 
success: function(res){ 
console.log("支付成功"); 
}, 
fail: function() { 
}, 
complete: function() { 
} 
})

生成签名sign

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1&t=20161122

微信小程序MD5加密工具下载地址:https://code.csdn.net/snippets/2019875/master/download

var MD5Util = require('../../../utils/md5.js');
var sign = ''; 
//<strong><span style="color:#ff0000;">顺序按照ASCII字典序排序</span></strong> 
var signA = "appId="+app.appId+"&nonceStr="+res.data.nonceStr+"&package=prepay_id="+res.data.prepayId+"&signType=MD5&timeStamp="+res.data.timestamp; 
var signB = signA+"&key="+app.key; 
sign = MD5Util.MD5(signB).toUpperCase();

生成签名上面是我的代码,不是很清晰, 下面列出来官方文档的详细描述:

假设传送的参数如下:

appid: wxd930ea5d5a258f4f(需要注意的是appid 在wx.requestPayment({})发起支付是不上传,但是签名时需要)
mch_id: 10000100
device_info: 1000
body: test
nonce_str: ibuaiVcKdpRxkhJA

第一步:对参数按照key=value的格式,并按照参数名ASCII字典序排序如下:

stringA="appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100&nonce_str=ibuaiVcKdpRxkhJA";

第二步:拼接API密钥:

stringSignTemp="stringA&key=192006250b4c09247ec02edce69f6a2d"
sign=MD5(stringSignTemp).toUpperCase()="9A0A8659F005D6984697E2CA0A9CF3B7"

此时的sign 用于wx.requestPayment 上传参数paySign。

最终得到最终发送的数据:

<xml> 
<appid>wxd930ea5d5a258f4f</appid> 
<mch_id>10000100</mch_id> 
<device_info>1000<device_info> 
<body>test</body> 
<nonce_str>ibuaiVcKdpRxkhJA</nonce_str> 
<sign>9A0A8659F005D6984697E2CA0A9CF3B7</sign> 
<xml>

以上所述是小编给大家介绍的微信小程序进行微信支付的步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jquery 插件学习(四)
Aug 06 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
js清空form表单中的内容示例
May 20 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
React实现评论的添加和删除
Oct 20 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
Vue.JS入门教程之事件监听
Dec 01 #Javascript
You might like
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python用GET方法上传文件
2015/03/10 Python
Python多线程编程简单介绍
2015/04/13 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python 绘制可视化折线图
2020/07/22 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
介绍一下gcc特性
2012/01/20 面试题
金融专业应届生求职信
2013/11/02 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
娱乐节目策划方案
2014/06/10 职场文书