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


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 输入框内容格式验证代码
Feb 11 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
js实现车辆管理系统
Aug 26 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
华为慧通笔试题
2016/04/22 面试题
负责人任命书范本
2014/06/04 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
门球健将观后感
2015/06/16 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Python之matplotlib绘制折线图
2022/04/13 Python