vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨。注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常重要。
一、支付宝h5支付
支付宝h5支付操作起来是超级简单的,前端关键代码如下:
this.$http.getTradeNo(lastParams).then(res=>{
this.$http.doPayAlipay({
oid: res.data, // 取到的交易订单号
url: yourBackUrl // 成功后的回调地址
}).then(resAlipay=>{
// 避免时间间隙造成的用户误操作,尽管拿到数据了仍然显示loading...直到跳转到支付宝的提供的页面
this.$toast.loading({
mask: true,
message: '加载中...'
});
// 取回来的是支付宝提供的一段自执行的form表单代码
// 这里我把这段代码插入页面中,并手动触发
const div = document.createElement('div');
div.innerHTML = resAlipay.data.form;
document.body.appendChild(div);
document.forms[0].submit();
})
})
由于安卓APP也调用了h5的支付页面,所以为了避免一些“尴尬的情况”,我们采用了支付宝官方提供的“手机网站支付转APP支付”方案,非常贴心的方案呢。
二、微信支付
微信的wap端支付分两种,一种是微信内的公众号支付,一种是微信外的H5支付。
首先:只有通过微信认证的服务号才具有支付接口的权限。
其次:设置正确的支付目录。确保实际支付时的请求目录与后台配置的目录一致,否则将无法成功唤起微信支付。在微信商户平台(pay.weixin.qq.com)设置您的公众号支付支付目录,设置路径:商户平台-->产品中心-->开发配置,如下图所示。公众号支付在请求支付的时候会校验请求来源是否有在商户平台做了配置,所以必须确保支付目录已经正确的被配置,否则将验证失败,请求支付不成功。
然后:设置授权域名。开发公众号支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。
1、公众号支付
公众号支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。
openid是微信用户在公众号appid下的唯一用户标识(appid不同,则获取到的openid就不同),可用于永久标记一个用户,同时也是微信公众号支付的必传参数。网页授权获取用户openid接口文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842,要获取openid的第一步便是需要用户同意授权,获取code,所以需要前端来处理,官方文档描述如下:
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开页面:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect(若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限)尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问;跳转回调redirect_uri,应当(必须)使用https链接来确保授权code的安全性。
参数
是否必须
说明
appid
是
公众号的唯一标识
redirect_uri
是
授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
response_type
是
返回类型,请填写code
scope
是
应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state
否
重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect
是
无论直接打开还是做页面302重定向时候,必须带此参数
如果用户同意授权,页面将跳转至redirect_uri/?code=CODE&state=STATE
我们可以把获取code的那个链接直接绑定到公众号的菜单上,只要用户点击菜单,就能跳到我们的应用url并且带上了code和state,那么我们就可以把这个code传给后端然后拿到openid存储到本地,最后需要用到时的时候再传过去就中了。基于此,我把获取openid的接口逻辑直接写到了路由的beforeEach钩子中(因为来路页面我并不能掌控)
// ...
router.beforeEach(function (to, from, next) {
// ...
if( checkClient.wechat() && !storage.get('openId') ){
if( to.query.code && to.query.state=='eqifei' ){
getOpenId({
code: to.query.code
}).then(res=>{
if(res.code==0){
storage.set('openId',res.data)
}
})
}else{
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?'+
'appid=服务号的appid&'+
'redirect_uri=授权后重定向的回调链接地址&'+
'response_type=code&scope=snsapi_base&state=eqifei#wechat_redirect'
}
}
// ...
})
// ...
发起支付的关键代码如下:
methods:{
doPaySubmit(){
// ...
this.$http.doWechatPay({
oid: '...',
trade_type: 'JSAPI',
openid: this.$tools.storage.get('openId')
}).then(resWechat=>{
this.weixinPay(resWechat.data)
})
// ...
},
weixinPay: function(data) {
var vm = this;
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady",vm.onBridgeReady(data),false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady",vm.onBridgeReady(data));
document.attachEvent("onWeixinJSBridgeReady",vm.onBridgeReady(data));
}
} else {
vm.onBridgeReady(data);
}
},
onBridgeReady: function(data){
var vm = this;
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: data.appid, //公众号名称,由商户传入
timeStamp: data.timestamp, //时间戳,自1970年以来的秒数
nonceStr: data.nonce_str, //随机串
package: data.prepay_id, //订单详情扩展字符串
signType: data.signType, //微信签名方式:
paySign: data.paySign, //微信签名
},
function(res) {
if(res.err_msg == "get_brand_wcpay_request:ok"){
// ...
}else{
alert("支付失败!");
}
}
);
}
}
2、H5支付
H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。注意:H5支付不建议在APP端使用,如需要在APP中使用微信支付,请接APP支付。
微信外的h5支付需要前端做的就简单多了,关键代码如下:
doPaySubmit(){
// ...
this.$http.doWechatPay({
oid: '',
trade_type: 'MWEB',
}).then(resWechat=>{
window.location.replace(resWechat.data.mweb_url+'&redirect_url='+encodeURIComponent(window.location.href+'&tip=yes'))
})
// ...
}
注意有坑:
1、需对redirect_url进行urlencode处理
2、由于设置redirect_url后,回跳指定页面的操作可能发生在:a.微信支付中间页调起微信收银台后超过5秒 b.用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作。
三、相关文档汇总
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付相关推荐
- 基于python的微信公众号开发教程_基于python的微信公众号开发教程
应广大python学员的期盼,九宝老师精心制作的"基于python的微信公众号开发"视频教程即将上线. 该课程秉承九宝培训一贯的"简单.高效.快速"的讲课原则, ...
- 微信公众号云服务器年服务费_微信公众号开发者接口费用高吗
微信公众号开发者接口费用高吗 很多企业都想开发自己公司的微信公众号,不过大家最关心的还是微信公众号开发价格问题.今天,微速云小编就为大家带来微信公众号开发者接口费用高吗,一起来了解一下吧. 微信公众号 ...
- 微信公众号开发接口语音下载解决方案
需求:利用微信公众号开发接口下载语音,展示并可以收听语音 1.利用微信公众平台开发接口下载语音文件至本机 /*** 下载多媒体文件* @param string $mediaId* @return s ...
- 最便捷的微信公众号文章下载器——基于Python爬虫
总结一下自己原创的一个"亲民取巧的"获取微信公众号文章的方法.(文末附有下载链接) 1需求分析 平时爱逛知乎,收藏了不少别人推荐的数据分析.机器学习相关的微信公众号(这里就不列举了 ...
- php公众号提现功能,微信公众号打赏的钱怎么提现_微信公众号打赏功能_微信公众号打赏从哪里取出来...
微信公众号打赏的钱怎么提现,微信公众号打赏功能.微信公众号之前打赏功能可以立即取现,但是最近出现了一些变动,会有人问微信公众号打赏为什么不能立刻取现?小编为大家带来了微信公众号打赏取现时间调整. 微信 ...
- 急急急求微信公众号开发接口-php如何实现获取用户发送的微信表情,并返回一个链接,用户点击进去链接就是刚才发的表情,用户可以保存表情?
求微信公众号开发接口-php如何实现获取用户发送的微信表情,并返回一个链接,用户点击进去链接就是刚才发的表情,用户就可以保存表情到手机? 需求描述 1.用户在公众号对话框发送微信表情(GIF) 2.公 ...
- 微信公众号平台接口开发:发送客服消息
官方接口介绍 发送文本信息 参数有4个, access_token这个就不用介绍了,就是之前得到的那个AccessToken,就是在这个接口里边当中参数用的 touser是关注了公众号的微信用户的op ...
- 微信公众号调用接口显示的错误码含义
微信公众号调用接口显示的错误码含义 返回码 说明 -1 系统繁忙,此时请开发者稍候再试 0 请求成功 40001 获取 access_token 时 AppSecret 错误, ...
- vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
最新文章
- 像鸟一样树上栖息、空中抓物,斯坦福给无人机安上爪子,登Science子刊封面
- Acwing756. 蛇形矩阵:模拟
- 武汉大学提出全球最大的口罩遮挡人脸数据集(附下载地址):RMFD
- CAS服务下单点登录(服务端与客户端)
- 主动防御型杀毒软件的技术探讨
- python拟牛顿法迭代点绘制_最速下降法、牛顿法、拟牛顿法,Python实现高维二次目标函数优化...
- MII/MDIO接口详解(转)
- 如何在Windows上设置BitLocker加密
- 现代软件工程系列 学生的精彩文章 (4) 为用户服务
- 7-87 吉老师的回归 (15 分)
- Python可视化 | Seaborn(01)
- a*算法的时间复杂度_数据结构与算法系列——时间、空间复杂度
- Linux的timerfd分析
- 怎么打开jsp文件目录_ppt转换成pdf怎么转?我选择这个办法
- 使用gsds绘制基因结构图_使用SnapGene viewer绘制比较基因簇结构图
- linux下c程序 daemon、fork与创建pthread的顺序问题
- Google 团队效能研究 | 为什么雇用最聪明的人是远远不够的? 1
- qq修改群名服务器失败,如何解决qq群名片改不了的问题
- imei模拟修改_自动修改android模拟设备号imei的小程序
- 阿铭Linux_网站维护学习笔记201903019
热门文章
- SAP Spartacus AuthService.getUserToken的实现
- 在SAP WebClient UI里使用AJAX进行异步数据读取
- SAP CRM interactive report的各种输入字段
- SAP Cloud for Customer和Hybris Commerce的session保护机制
- SAP UI5应用访问OData metadata的url和Destination
- How to judge if one OData model data is out of date
- R3 data related to category and hierarchy mapping logic in CRM
- SAP gateway的307重定向
- Cloud for Customer work center的数据是如何从ABAP Netweaver返回给前端的
- CRM和C4C里的组织架构 - Organizational Structure