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


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 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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
PHP 中dirname(_file_)讲解
2007/03/18 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
vue 组件简介
2020/07/31 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
python实现八大排序算法(1)
2017/09/14 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python标识符命名规范原理解析
2020/01/10 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
文化活动实施方案
2014/03/28 职场文书
质量承诺书怎么写
2014/05/24 职场文书
新郎结婚保证书
2015/02/26 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书