vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题


Posted in Javascript onApril 14, 2020

web端的微信支付可分为JSAPI与H5

JSAPI使用场景为微信内部,而H5支付则是使用在非微信下的外部浏览器。

1.JSAPI

在微信内部可以直接唤起微信浏览器的内置对象 WeixinJSBridge
废话不多说直接上代码:

// 调用后端接口拿到JSAPI支付所需参数,我在beforeRouteEnter的时候调用。
api.apply.jsApiPay(obj).then(res => {
     if (res.data.code === '0000') {
      vm.params = res.data.bean
     } else {
      alert('微信支付调起失败!')
     }
    }).catch(err => {
     alert(err)
    })

// 点击支付时候调用
if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
     document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(this.params), false)
    } else if (document.attachEvent) {
     document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(this.params))
     document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(this.params))
    }
   } else {
    this.onBridgeReady(this.params)
   }


onBridgeReady (params) {
   const that = this
   WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    {
     appId: params.appId, // 公众号名称,由商户传入
     timeStamp: params.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
     nonceStr: params.nonceStr, // 支付签名随机串,不长于 32 位
     package: params.prepay_id, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
     signType: params.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
     paySign: params.paySign // 支付签名
    },
    function (res) {
     if (res.err_msg === 'get_brand_wcpay_request:ok') {
      that.queryOrder() // 这里是查询订单是否支付完成,然后执行成功和失败的业务逻辑
     } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
      alert('支付失败!')
     }
    }
   )
  },

在微信支付的回调函数中,当res.err_msg 为

get_brand_wcpay_request:ok 时,支付状态不一定准确,因此需要调用后端的查询订单接口,查询是否支付完成,然后再执行相应的逻辑。

2、H5支付

h5相对简单,前端只需要跳转到后端返回的链接即可

api.apply.h5Pay({
      title: ''
      orderNum: '',
      expireMinute: 10,
      redirectUrl: `${window.location.origin}/pay/card?orderId=${vm.orderId}`
     }).then(res => {
      vm.h5PayUrl = res.data.bean
      // 查询订单
     }).catch(err => {
      alert(err)
     })

第一步,请求后端接口,需要传支付的标题,订单号,支付时间,重定向链接。

第二部,们只需要点击支付按钮时候跳转至后端返回链接即可。

window.location.href = this.h5PayUrl

需要注意的是H5支付查询订单需要用户去手动触发,因此需要增加一个确定订单的弹层。如图:

vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

查询订单是否支付成功与JSAPI一致~

到此这篇关于vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题的文章就介绍到这了,更多相关vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 #Javascript
JS错误处理与调试操作实例分析
Apr 13 #Javascript
JS正则表达式常见函数与用法小结
Apr 13 #Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 #Javascript
You might like
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js获取域名的方法
2015/01/27 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
使用vue实现各类弹出框组件
2019/07/03 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
见习期自我鉴定
2014/01/31 职场文书
员工晚婚的请假条
2014/02/08 职场文书
优秀员工评语
2014/02/10 职场文书
学习礼仪心得体会
2014/09/01 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
大专护理专业自荐信
2015/03/25 职场文书
听证通知书
2015/04/24 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
好员工观后感
2015/06/17 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书