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

最近开发微信小程序进入到支付阶段,一直以来从事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练手小程序、微信小程序javascript、javascript简单小程序、javascript整人小程序,以便于您获取更多的相关知识。

时间: 2024-10-02 03:56:38

微信小程序进行微信支付的步骤昂述_javascript技巧的相关文章

微信小程序中单位rpx和rem的使用_javascript技巧

前言 这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起      微信小程序官方文档      >web app变革之rem      >rpx单位官方文档      >rpx单位基础介绍 如果看完上面几篇文章,我们开始进入正题吧~~ 一.rem的使用 1) js中导入下面这段代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationcha

微信小程序加载更多 点击查看更多_javascript技巧

本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子: index.wxml代码如下 <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> <view class="duanzi-vie

微信小程序设置http请求的步骤详解_相关技巧

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请

微信小程序搭建及解决登录失败问题_相关技巧

等了好久的小程序,终于在近日曝光了.现在就带大家来尝尝鲜.以下是一张随便看看的图. 一.构建微信小程序的步骤 下载开发工具 考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc. 破解的步骤就是:将破解压缩包的两个文件,放到如下图路径: 这个是MAC路径: 应用程序->微信web开发者工具->显示包内容 /Resources/app.nw/app/dist/compone

微信小程序 scroll-view组件实现列表页实例代码_JavaScript

scroll-view组件介绍 scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("lis

微信小程序 require机制详解及实例代码_JavaScript

微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

微信小程序下载工具及调试详解_相关技巧

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录 启动工具时,

微信小程序 HTTPS报错整理常见问题及解决方案_JavaScript

微信小程序 HTTPS报错常见问题及解决方案 微信小程序开放公测已经一个多月了,因官方需求文档要求后台使用HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.越来越多的开发者纷纷使用SSL证书实践微信小程序的应用情况,但仍然会碰到各类问题.本文列举了SSL证书常见的报错和解决办法,供开发者参考. 常见问题一 在微信小程序内测的过程中,几乎每个开发者们在实践的过程中都遇到了下图的报错: 原因及解决办法: 这是因为wx.request 发起的是 https 请求,微信小程序读取大部分是请求A

微信小程序 wx.uploadFile无法上传解决办法_JavaScript

微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛