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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript 不只是脚本
May 30 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
vue.js实现照片放大功能
Jun 23 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
解析Python中while true的使用
2015/10/13 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
零件设计自荐信范文
2013/11/27 职场文书
材料会计岗位职责
2014/03/06 职场文书
房地产广告策划方案
2014/05/15 职场文书
初婚初育证明范本
2014/11/24 职场文书
教师理论学习心得体会
2016/01/21 职场文书
离婚协议书范文2016
2016/03/18 职场文书