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判断输入是否为数字的具体实例
Aug 03 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
javascript中setInterval的用法
Jul 19 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
jQuery使用方法
Feb 04 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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获取网络上文件
2006/10/09 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Javascript 对象的解释
2008/11/24 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python局部赋值的规则
2013/03/07 Python
Python中itertools模块用法详解
2014/09/25 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python冲顶大会 快来答题!
2018/01/17 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python文件编写好后如何实践
2020/07/07 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
python 如何对logging日志封装
2020/12/02 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
银行实习生的自我评价
2014/01/13 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
安全月活动总结
2014/05/05 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
红楼梦读书笔记
2015/06/25 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android