位置: IT常识 - 正文

app内嵌h5支付功能,跳转支付宝&微信,vue组件(h5支付功能)

编辑:rootadmin
app内嵌h5支付功能,跳转支付宝&微信,vue组件 一、功能梳理

推荐整理分享app内嵌h5支付功能,跳转支付宝&微信,vue组件(h5支付功能),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序内嵌h5支付,h5支付怎么设置,h5支付接口接入教程,h5支付功能,app h5支付,小程序内嵌h5支付,h5支付功能,h5支付功能,内容如对您有帮助,希望把文章链接给更多的朋友!

app内前h5涉及到支付的功能,ios非实物商品实付需要使用ios原生支付方式,实物商品则可以三方支付,主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接,前端进行跳转支付,同时需要实时查询用户的支付状态。

整个过程中复杂的部分在于查询用户支付状态的体验方面,需要保证用户在支付成功、支付失败、跳转支付宝、微信回来或者没有跳转支付宝微信等未知的行为下的用户体验。

组件内容为底部升起的支付选择弹窗,可以选择支付宝或者微信。

二、实现步骤app内嵌h5支付功能,跳转支付宝&微信,vue组件(h5支付功能)

用户进行下单操作,前端调用下单接口,成功则返回三方支付app跳转链接,前端进行跳转

跳转三方app同时进行查询订单接口轮训,实时获取订单状态,轮训时间定位30s,依据需求调整

用户如果支付时间超过了30s未返回我们app的情况下,需要针对此种情况进行处理,捕捉用户返回我们app的情况

三、组件可支配参数&事件设置

设置支持参数2个、事件4个,分别为

参数:

successStatus: {default: '1'}, // 支付成功的状态码,默认1errorStatus: {default: '2'} // 支付失败的状态码,默认2

事件:

@payMoney="payMoney" // 下单事件@payStatus="payStatus" //查询支付状态事件@succcessFunction="succcessFunction" // 成功支付操作@errorFunction="errorFunction" // 失败实付操作四、从支付app返回,事件捕获方法

为了防止用户在支付时间超过我们设置轮训时长情况,需要监听用户从支付app返回当前页面,来进行查询支付状态操作。方法为监听页面显示or隐藏事件

reloadState () {// 添加监听器if (typeof document.hidden !== 'undefined') {this.hidden = 'hidden';this.visibilityChange = 'visibilitychange';} else if (typeof document.mozHidden !== 'undefined') {this.hidden = 'mozHidden';this.visibilityChange = 'mozvisibilitychange';} else if (typeof document.msHidden !== 'undefined') {this.hidden = 'msHidden';this.visibilityChange = 'msvisibilitychange';} else if (typeof document.webkitHidden !== 'undefined') {this.hidden = 'webkitHidden';this.visibilityChange = 'webkitvisibilitychange';}document.addEventListener(this.visibilityChange, this.forceUpdate);},forceUpdate () {if (document.visibilityChange === this.hidden) {} else {this.searchTimer();}},五、组件源码<template><div class="pay-info"><div class="pay-content"><span class="pay-left"><img class="pay-icon" src="../assets/zfb.png" alt=""> 支付宝支付</span><img class="radio-icon" src="../assets/radio2.svg" alt=""></div><div class="pay-content"><span class="pay-left"><img class="pay-icon" src="../assets/wx.png" alt=""> 微信支付</span><img class="radio-icon" src="../assets/radio2.svg" alt=""></div><div class="pay-button" @click="payFun"><span>支付</span></div><div class="loading-dom" v-if="loadingPay">支付中<van-loading color="#ffffff" style="margin-left: 5px"/></div></div></template><script type="text/javascript">export default {data () {return {isApp: !!browers.appUA,timer: null,loadingPay: false,orderNo: '', // 订单号payStatus: '' // 订单支付状态};},props: {successStatus: {default: '1'}, // 支付成功的状态码,默认1errorStatus: {default: '2'} // 支付失败的状态码,默认2},mounted () {this.$once('hook:beforeDestroy', () => {clearInterval(this.timer);this.timer = null;});},methods: {reloadState () {// 添加监听器if (typeof document.hidden !== 'undefined') {this.hidden = 'hidden';this.visibilityChange = 'visibilitychange';} else if (typeof document.mozHidden !== 'undefined') {this.hidden = 'mozHidden';this.visibilityChange = 'mozvisibilitychange';} else if (typeof document.msHidden !== 'undefined') {this.hidden = 'msHidden';this.visibilityChange = 'msvisibilitychange';} else if (typeof document.webkitHidden !== 'undefined') {this.hidden = 'webkitHidden';this.visibilityChange = 'webkitvisibilitychange';}document.addEventListener(this.visibilityChange, this.forceUpdate);},forceUpdate () {if (document.visibilityChange === this.hidden) {} else {this.searchTimer();}},payFun () {this.$emit('payMoney', (res) => {this.reloadState();// 下单接口的回调,执行轮训结果this.orderNo = res.order_no;this.loadingPay = true;this.searchPay();// 监听从其他app返回,为了解决从支付宝回来不轮训的问题setTimeout(() => {location.href = res.pay_address;}, 200);});},searchPay () {this.$emit('payStatus', (res) => {if (this.payStatus === '') {this.searchTimer();}// 下单接口的回调,执行轮训结果this.payStatus = res;});},searchTimer() {if (this.timer) {return;}if (this.orderNo) {let times = 0;this.searchPay();if (this.payStatus === '') {this.timer = setInterval(res => {times++;this.searchPay();if (this.payStatus === this.$props.successStatus) {clearInterval(this.timer);this.timer = null;this.loadingPay = false;document.removeEventListener(this.visibilityChange, this.forceUpdate);// 支付成功事件this.$emit('succcessFunction', (res) => {});}if (this.payStatus === this.$props.errorStatus) {clearInterval(this.timer);this.timer = null;this.loadingPay = false;document.removeEventListener(this.visibilityChange, this.forceUpdate);// 支付失败事件this.$emit('errorFunction', (res) => {});}if (times > 30) {this.$toast('未查询到支付状态,请重新支付');clearInterval(this.timer);this.timer = null;this.loadingPay = false;document.removeEventListener(this.visibilityChange, this.forceUpdate);}}, 1000);}}}}};</script><style lang="less" scoped>.pay-info {.pay-content {background: #fff;display: flex;align-items: center;justify-content: space-between;padding: 8px 0;font-size: 28px;color: #222;.pay-left {display: flex;align-items: center;}.pay-icon {width: 60px;height: 60px;margin-right: 10px}.radio-icon {width: 34px;height: 34px;}}.pay-button {width: 100%;text-align: center;margin-top: 30px;span {display: inline-block;background: #4e88f6;color: #fff;width: 100%;font-size: 32px;height: 88px;line-height: 88px;border-radius: 50px;display: inline-block;}}.loading-dom {width: 100%;height: 100vh;background: rgba(0,0,0,.5);color: #fff;text-align: center;font-size: 34px;font-weight: 500;position: fixed;display: flex;align-items: center;justify-content: center;top: 0;left: 0}}</style>六、父组件调用<Pay    @payMoney="payMoney"    @payStatus="payStatus"    @succcessFunction="succcessFunction"    @errorFunction="errorFunction"    :success-status='1'    :error-status='2'></Pay>// 下单事件payMoney (callback) {this.$axios.post(`url`, params).then((res) => {let data = res.data;if (Number(data.code) === 0) {// 执行支付操作,跳转url,结果回调给收银台组件this.currentOrder = data.data.order_no;callback(data.data);} else {this.$toast(data.message);}}).catch((e) => {});},// 轮训状态接口payStatus (callback) {this.$axios.get(`url`).then((res) => {let data = res.data;if (Number(data.code) === 0) {// 执行支付结果查询,结果回调给收银台组件callback(data.data.pay_result);if (data.data.list && data.data.list.length) {this.resultData = data.data.list;}} else {this.$toast(data.message);}}).catch((e) => {});},succcessFunction () {// 支付成功父组件操作事件this.$toast('支付成功');// 先弹出支付成功提示,延时1秒出结果弹窗setTimeout(() => {// 支付成功后刷新一下接口}, 1000);},errorFunction () {// 支付失败父组件操作事件this.$toast('支付失败,请重新发起支付');},
本文链接地址:https://www.jiuchutong.com/zhishi/298634.html 转载请保留说明!

上一篇:用JSP简单的写一个登录注册页面(编写jsp程序,实现简易计算机)

下一篇:视听场景理解经典任务(视听结合的景物描写)

  • 出差人员个人原因延迟返回
  • 影响年度损益的金额有哪些
  • 出售无形资产计入资产处置损益
  • 年终奖是否列入社保基数
  • 收到投资款需要缴纳增值税吗
  • 小规模纳税人水利基金怎么报税
  • 企业卫生费是指什么
  • 税收的基本特点有
  • 代扣代缴的车船税现金流量怎样分配
  • 质押费用计入什么科目
  • 商品非正常损耗收取的赔偿款账务处理怎么做?
  • 代扣个税手续费返还怎么申请
  • 公司收款收据
  • 银行抵债资产怎么管理
  • 公司购买办公用品计入什么科目
  • 房地产并购的税率是多少
  • 免税销售额怎么算出来的
  • 预付费服务是什么
  • 处置无形资产净收益
  • 企业所得税哪些不可以税前扣除
  • 农村合作社收到奖金分录
  • 母子公司之间转让房产
  • 装修公司购入材料计入什么科目
  • 公账转公账没有发票
  • 赠与合同公证收费标准
  • 瓶盖再来一瓶
  • 在建工程预付款可以计入费用么
  • linux系统命令查询
  • 公允价值变动损益借贷方向增减
  • 发票未认证丢失怎么补办
  • 适用加计抵减政策需要提交什么资料
  • 工地扬尘检测仪防尘缸怎么安装
  • php curl代理
  • 基于强化学习的智能机器人路径规划算法研究(附代码)
  • react生命周期详解
  • 扩散模型和gan的区别
  • system view命令
  • php读取excel数据
  • vue笔记大全
  • 国税申报系统操作流程
  • 不同会计制度资产负债表金额不一样
  • 小规模增值税结转账务处理
  • 租赁办公场所的法律规定
  • 为什么社保卡里有钱
  • 公司车辆固定资产管理办法
  • 小企业会计准则和企业会计准则的区别
  • 土地增值税采用
  • SQLServer 2008 :error 40出现连接错误的解决方法
  • sql20054n
  • sql 语句插入结果为select和值混合示例
  • 增值税纳税申报表在哪里查询
  • 对公账户余额和可用余额不一样
  • 运输公司的车辆如何计提折旧
  • 开红字发票需要做收回原发票吗?
  • 福利费的进项税额会计分录
  • 高新企业账目有什么不同
  • 收到的货款比实际货款多
  • 水利建设税怎么做账
  • 研发支出的定义
  • 处置固定资产和报废固定资产区别
  • 结转本月销售材料成本
  • 保险公司理赔款如何入账
  • 个人独资企业要报税吗
  • xampp网页服务器配置文件名
  • 电脑收藏夹文件恢复
  • linux系统讲解
  • mmc无法创建管理单元怎么办win11
  • pop3是什么意思中文
  • firefox document
  • 狗刨好学吗
  • crontab每秒执行一次命令
  • 在线linux模拟环境
  • JAVAscript字符串类型单引号和双引号意一样吗
  • npm 发布组件
  • @jsondeserialize
  • android点击事件传递机制
  • jquery获取php变量
  • 税务税收预测
  • 税务登记表格怎么填写
  • 婚育证明可以开假的吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设