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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python连接oracle数据库实例
2014/10/17 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
在python中做正态性检验示例
2019/12/09 Python
python基于event实现线程间通信控制
2020/01/13 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
高职助产应届生自荐信
2013/09/24 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
宿舍违规检讨书
2014/01/12 职场文书
教师远程培训感言
2014/03/06 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
感谢信模板大全
2015/01/23 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers