微信 H5 支付流程以及一些坑
原文:https://blog.niceue.com/front-end-development/wechat-h5-payment-process-as-well-as-some-pits.html
最近做的 SPA 网站集成了微信支付,使用的是微信 H5 调起支付API接口。做完后对微信 H5 支付的流程有了进一步的了解,在前后端调试接口的过程中也遇到了一些问题,在这里记录下来。
支付流程
- 在订单页 ajax 请求后端发起下单,后端挂起请求
- 后端根据订单号结合微信支付相关配置参数向微信服务器发起统一下单
- 下单成功,微信通知前面传递的 notify_url,返回 prepay_id (预支付交易会话标识)
- 后端返回前端 JSAPI 调用的参数
- 前端使用 JSSDK 的
wx.chooseWXPay
发起支付
wx.chooseWXPay({
timestamp: '', // 支付签名时间戳
nonceStr: '', // 支付签名随机串
package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
signType: 'MD5', // 签名方式
paySign: '', // 支付签名
})
这里看起来是 5 步,但其实还少了一步。调用“统一下单”接口的时候需要微信用户的 openid。
openid 是什么?
加密后的微信号,每个用户对每个公众号的 openid 是唯一的。对于不同公众号,同一用户的 openid 不同
这个 openid 只能在微信环境通过重定向拿到。但是在下单的时候用的是 ajax 请求,还用重定向用户体验就比较差。所以需要在进入微信的时候就通过重定向拿到 openid 缓存起来,后面就可以直接使用了。所以入口页面就要做点小动作。
获取 openid
官方有OpenID的获取指引。对于 H5 应用,获取方式分 3 步走:
1. 后端重定向到获取 code 接口
后端可以定义一个 /wechat/redirect
接口,例如:
http://yoursite.com/wechat/redirect?url=home_url
用这个地址重定向获取 code 地址,其中的 url 参数为最终的重定向地址,在拿到 openid 后跳转到该 url
2. 获取 code:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec
接口参数:
appid
: 公众账号IDredirect_uri
: 接收 code 的回调地址(请UrlEncode)response_type
: 固定值 codescope
: 应用授权作用域,填 snsapi_base 或者 snsapi_login(可获取用户信息,如头像、昵称等)state
: 用于保持请求和回调的状态,防止 csrf 攻击,可设置为简单的随机数加 session 进行校验
提示:snsapi_login 会跳转到授权页让用户授权
微信接着会重定向三次,第三次重定向返回到 redirect_uri 地址,并且带上了 code 参数
3. 通过 code 获取 openid 和 access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
获取到 openid 后注意在 session 中缓存起来
一些需要注意的坑
1. 获取 code 的接口地址
在OpenID的获取指引文档,请注意黑色标题“微信公众平台”和“微信开放平台”。两个地方获取 code 的接口地址不一样,但参数是一样的。最开始后端看错了文档使用的是“网站应用微信登录”文档里面提供的获取 code 的接口,这样子怎么都是调不通的。
// 微信公众平台是
https://open.weixin.qq.com/connect/oauth2/authorize
// 微信开放平台是
https://open.weixin.qq.com/connect/qrconnect
2. 后端签名用 timeStamp
,而前端调用支付接口使用全小写 timestamp
微信官方网页端调起支付API这个接口文档参数却误导观众,写的是驼峰的 timeStamp
后端为了方便返回给前端的也是 timeStamp,所以在前端需要转换
解决办法:
if (!data.timestamp) data.timestamp = data.timeStamp
3. iOS 和 Android 版微信对“支付授权目录”的检测不同
http://yousite.com/mobile/#!/checkout
以上路径,iOS 微信识别正确:http://yousite.com/mobile/
而 Android 微信识别出的目录是:http://yousite.com/mobile/#!/checkout
这应该是 Android 版微信的 Bug
解决办法是在 #
前添加一个 ?
:http://yousite.com/mobile/?#!/checkout
微信 H5 支付流程以及一些坑的更多相关文章
- ***新版微信H5支付技术总结(原创)
新版微信H5支付官方文档: https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1 H5支付是指商户在微信客户端外 ...
- 微信支付之微信H5支付(坑,ajax不支持重定向跳转)
这里讲的是 微信h5支付, 是微信以外的手机浏览器调用微信h5支付 h5支付: H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起 ...
- 微信H5支付坑一--手续费未结算
简单随笔小记: 场景:在微信H5支付的过程中,无论怎么支付完成,在微信商户后台查询手续费依然未扣除,当时手续费账户月为5元. 解决方法:起初无论怎么测试都不知道代码到底问题出在哪里了,想一下手续费账户 ...
- 微信H5支付 遇到坑的一些解决方法
解决办法 1. 商家参数格式有误,请联系商家解决 a.对于前后端分离的开发模式 前端发起请求 服务端请求微信h5支付统一下单接口 返回参数mweb_url 给前端 然后前端调起微信h5支付 b.注意的 ...
- 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结
最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...
- PHP微信H5支付开发
近来公司项目要求用到微信H5开发,因为微信开发文档处处都是坑,我也走了不少弯路,现在就把H5支付的过程记录一下,已备后用!! 首先 先去商户平台申请开通 H5支付!!!! 我们从微信官方下载H5支付d ...
- 黄聪:详解申请微信h5支付方法,开通微信h5网页支付接口(转)
版权声明:图文并茂的微信小程序教程!欢迎转载,请保留作者名字和链接:商业合作请联系子恒老师助理 QQ : 2334512685 https://blog.csdn.net/towtotow/artic ...
- 详解申请微信h5支付方法,开通微信h5网页支付接口(转)
现在大街小巷的商家都在使用微信支付,但是一些商家使用的是个人微信收款,这个虽然很便利,但是如果你想要数据统计汇总,让客户在网络上在线付款,就需要用到微信的h5支付. 微信h5支付 今天子恒老师跟你分享 ...
- 解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转)
问题分析 正常的H5支付流程如下 按照上面的支付流程会出现 App -> 微信 -> 支付 -> 点击 完成 -> safari访问redirect_url设置的URL,这种流 ...
随机推荐
- vs2015 打开项目自动运行 npm install
问题:VS2015(visual studio 2015) 打开项目自动运行 npm install 解决办法: 打开工具-选项-项目与解决方案--外部web工具 去掉npm勾选 还有如果文件g ...
- spring boot开发笔记——mybatis
概述 mybatis框架的优点,就不用多说了,今天这边干货主要讲mybatis的逆向工程,以及springboot的集成技巧,和分页的使用 因为在日常的开发中,当碰到特殊需求之类会手动写一下s ...
- LOJ#6387 「THUPC2018」绿绿与串串 / String (Manacher || hash+二分)
题目描述 绿绿和 Yazid 是好朋友.他们在一起做串串游戏. 我们定义翻转的操作:把一个串以最后一个字符作对称轴进行翻转复制.形式化地描述就是,如果他翻转的串为 RRR,那么他会将前 ∣R∣−1个字 ...
- Java 字符串类型常用方法
常用方法 获取字符串长度 public int length() 字符串Unicode操作 这部分用的不多,不是很清楚,先记载在这. //获取指定索引处的元素对应的unciode编码 public i ...
- 详解Android数据存储技术
前言 学习Android相关知识,数据存储是其中的重点之一,如果不了解数据,那么让你跟一款没有数据的应用玩,你能玩多久呢?答案是这和没有手机几乎是差不多的.我们聊QQ,聊微信,看新闻,刷朋友圈等都是看 ...
- XStream进行xml和bean互转
加入pom <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>x ...
- Unicode 字符串排序规则(一):如何确定单个字符的顺序
一.一个具体的例子引发的问题 当今是国际化的时代,多种语言可能同时显示在屏幕上.比如一个人可能喜欢听华语歌.英文歌.韩文歌和日语歌,又比如他的联系人中有中国人.英国人.日本人.韩国人以及有英文名字的中 ...
- 机器学习技法笔记:02 Dual Support Vector Machine
Roadmap Motivation of Dual SVM Lagrange Dual SVM Solving Dual SVM Messages behind Dual SVM Summary
- [NOIP模拟赛] 序列
Description 给定一个1~n的排列x,每次你可以将x1~xi翻转.你需要求出将序列变为升序的最小操作次数.有多组数据. Input 第一行一个整数t表示数据组数. 每组数据第一行一个整数n, ...
- linux arm 交叉编译ACE(ubuntu16.04)
解压ace包 tar zxvf ACE_6.1.0.tar.gz 在终端设置环境变量 sudo gedit /etc/profile 在打开的内容添加 export ACE_ROOT=/home/xx ...