微信h5支付/jsapi支付/小程序支付
一. 介绍------------------------------------------------------------------
微信支付官方开发文档: https://pay.weixin.qq.com/wiki/doc/api/index.html
二.配置
下面俺 就来讲讲 常用的三种微信支付,
当然!! 首先你要去微信平台 配置在微信商户平台(pay.weixin.qq.com)设置您的JSAPI支付支付目录 h5支付 等等!!
(例子jsapi 官方地址 开发步骤:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3) 下图
三.常用的三种支付 详解 ( jsapi支付(微信内部浏览器) / 小程序支付 / h5支付 (微信外部浏览器) !!)
1.小程序支付 (很简单, 环境====> 微信 环境)
首先 调用 后台下单接口, 下单成功之后 会返回 支付的参数
// res:{
// appid: "wxXXXXX"
// error: "00"
// msg: "下单成功"
// nonceStr: "xxxxx"
// orderNum: "20191102150216"
// package: "prepay_id=wx33333333"
// paySign: "14CF8AE4666666E8D1CAF"
// timeStamp: "1666187704"
// }
小程序 文档 https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) {成功跳转什么界面 ,自己定},
fail (res) {失败跳转什么界面, 自己定 }
})
2. jsapi支付 (环境 微信 内部 浏览器)
引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
注意: web-view 内嵌 h5 目前不支持支付!!! web-view 功能有限, 可以参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
jsapi支付 :用户通过微信扫码、关注公众号等方式进入商家H5页面,并在微信内调用JSSDK完成支付
//WeixinJSBridge 是微信内置对象,支付功能只能在微信端才能使用 调用这个方法 wxpay 购买就行
wxPay(appId,timeStamp,nonceStr,package,paySign){
if(typeof WeixinJSBridge == "undefined") {
if(document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if(document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
//执行下面方法
//传入下面参数,这些参数需要从后台获取 (下单接口获取, 问后台要)
this.onBridgeReady(appId,timeStamp,nonceStr,package,paySign)
}
},
//jsapi方法
onBridgeReady(appId,timeStamp,nonceStr,package,paySign) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": appId, //需要在微信绑定商户号,成功之后会生成有appid
"timeStamp": timeStamp, //时间戳,自1970年以来的秒数,前端需要从后台获取该数据
"nonceStr": nonceStr, //随机串,前端需要从后台获取该数据
"package": package,//前端需要从后台获取该数据
"signType": "MD5", //微信签名方式,默认为"MD5",也可以从后台获取
"paySign": paySign //微信签名,前端需要从后台获取该数据
},
function(res) {
//这个步骤非常重要,调试期间会报上相应的错误信息,因为微信调试工具是无法实际支付的,并且微信上是无法调试的,只能在这里alert
console.log(res.err_msg);
if(res.err_msg == "get_brand_wcpay_request:ok") { console.log("购买成功")
} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
else{
console.log("购买失败") }
}
);
}
3. H5支付 (环境===> 微信 外部 浏览器) 更简单了, 基本都交给后台, 下单之后 后台会返给你链接, 你点击链接 就跳转支付了
解释: 用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付
微信官方体验链接:https://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微信外浏览器打开。
H5支付参考链接:https://www.jianshu.com/p/6b9acdd10de6
====>
res:{
code: "200",
msg: "下单成功",
mweb_url: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096"
}
点击链接就会唤起微信支付;
大致的流程就和微信的文档一致。如果看不懂的话,那就通俗的来讲就是:你在下单时,要给后台发请求,后台通过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url
,这个路径就是用来调起微信应用发起支付操作的。(这里要说明的就是由于h5支付不能主动回调,所以需要个主动查询的操作,这时会需要你又一个确认界面来进行主动查询订单状态。这里是个坑一会儿再说),调起支付界面之后进行支付操作,期间你什么都不用管,因为这都是微信的事。你需要的就是在你付完钱之后查看你的钱买你要的东西到底有没有成功(你要是不加的话,谁知道成功没,估计顾客会打死你,付完钱就茫然了,不知道到底钱到哪去了→_→)
常见错误
一、回调页面
正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面。
如,您希望用户支付完成后跳转至https://www.wechatpay.com.cn,则可以做如下处理:
假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
***则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn***
(有颜色的部分就是你要添加最后想要跳转进行别的操作的页面,一般就是确认订单状态的页面)
注意:
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在:
1,微信支付中间页调起微信收银台后超过5秒
2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图
----------------------------------------------------------------------------------------------------------------------------------------------------
有问题和建议都可以留言哦,俺经常会看的
感谢 各位老板 小额打赏: (有问题call俺)
"购买成功"
微信h5支付/jsapi支付/小程序支付的更多相关文章
- 微信小程序支付、小程序支付功能、小程序支付方法、微信小程序支付方法
相信大家在做小程序的时候不可避免的会碰到支付功能小程序的支付和pc的是有区别的小程序的支付方法为 wx.requestPayment wx.requestPayment({ timeStamp: '' ...
- 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...
- 微信小程序支付全问题解决
这几天在做小程序的支付,没有用官方的SDK,这里就纯用官方的文档搞一发. * 注作者使用的PHP,不过支付流程都是这样 开发前必读 主要流程 小程序前端发送求参请求 接受请求封装 "统一下单 ...
- .NET Core 微信小程序支付——(统一下单)
最近公司研发了几个电商小程序,还有一个核心的电商直播,只要是电商一般都会涉及到交易信息,离不开支付系统,这里我们统一实现小程序的支付流程(与服务号实现步骤一样). 目录1.开通小程序的支付能力2.商户 ...
- 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结
最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...
- uni-app - 支付(app支付、小程序支付、h5(微信端)支付)
App支付.小程序支付.h5(微信端)支付 APP支付(内置) appPay.js /** * 5+App支付,仅支持支付宝以及微信支付 * * 支付宝Sdk集成,微信sdk未集成 * * @para ...
- 微信小程序支付(JSAPI支付)
开发环境:.NET MVC+ ORM框架(EF) 一.参考文档: 1.微信JSAPI支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api. ...
- 微信小程序支付简单小结与梳理
前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东 ...
- [转]微信小程序支付简单小结与梳理
本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物 ...
随机推荐
- git flow 工作流程以及常用命令
一.分支介绍 master 也是产品分支,只有一个,一般情况下不会在这个分支上进行代码操作 develop 只有一个,新特性的开发是基于 develop 开发的,但是不能直接在 develop 上进行 ...
- think php 3种验证方式
方式一:独立验证 // 验证1.独立验证 //验证的规则 $rule = [ 'name' => 'require|max:25', 'username' => 'require', 'p ...
- jq 页面添加布局
要求: 1)实现如上图页面布局(10分) 2)实现选择城市所添加的内容追加到你喜欢哪个城市下(10分) 3)实现选择游戏所添加的内容追加到你喜欢哪款游戏下(10分) 4)新增的数据字体颜色设置为粉色( ...
- React学习小结(一)
一.React的发展 facebook在构建instagram网站的时候遇见两个问题: 1.数据绑定的时候,大量操作真实dom,性能成本太高 2.网站的数据流向太混乱,不好控制 于是facebook起 ...
- [动态规划] 适合DJ银行的日子
[动态规划] 适合DJ银行的日子 前言:开始的时候用常规模拟做的超时了,然后看官方题解,大致意思就是连续n天单调可以用动态规划的思想 你和一群强盗准备打劫银行.给你一个下标从 0 开始的整数数组 se ...
- 翻译 | Kubernetes 将改变数据库的管理方式
作者:Álvaro Hernández 当技术决策人考虑在 Kubernetes 上部署数据库时,面临的第一个问题就是:"Kubernetes 有应对有状态服务的能力吗?"多年来的 ...
- 写给开发人员的实用密码学(七)—— 非对称密钥加密算法 RSA/ECC
本文部分内容翻译自 Practical-Cryptography-for-Developers-Book,笔者补充了密码学历史以及 openssl 命令示例,并重写了 RSA/ECC 算法原理.代码示 ...
- 在数据结构与算法中 传值方式(C语言)
传值方式 前言 当初学顺序链表的时候,书上就出现了这样的语言,如下所示: Status InitList_Sq(SqList &L) { //构造一个空的线性表L. L.elem = (Ele ...
- ArcMap操作随记(4)
1.统计各省份公路长度 [标识]→[汇总]→[视图][创建] 2.用户登录分配 [创建渔网]→[连接] 3.城市超市影响范围 [创建泰森多边形]→[标识]→[汇总] 4.三维可视化分析 [构造视线]→ ...
- Net中事件的用法之二
1.委托与事件的区别 事件对权限做了控制 1.委托可以直接调用 事件不可以直接调用 2.委托允许外面直接赋值 事件不允许外面直接赋值 2.事件与委托的实例比较 using System; using ...