位置: 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程序,实现简易计算机)

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

  • 腾讯视频刺激战场活动在哪里(腾讯刺激战场官方下载)

    腾讯视频刺激战场活动在哪里(腾讯刺激战场官方下载)

  • 电脑flash插件出现异常怎么办(电脑flash插件是什么意思)

    电脑flash插件出现异常怎么办(电脑flash插件是什么意思)

  • airpods壳子取不下来(airpods外壳套进去取不出来)

    airpods壳子取不下来(airpods外壳套进去取不出来)

  • 华为手机微信小程序在哪(华为手机微信小程序怎么添加到桌面)

    华为手机微信小程序在哪(华为手机微信小程序怎么添加到桌面)

  • 抖音删了还能找回来吗(抖音删除还能找到吗)

    抖音删了还能找回来吗(抖音删除还能找到吗)

  • 拼多多账号可以同时登录吗(拼多多账号可以多个设备登录吗)

    拼多多账号可以同时登录吗(拼多多账号可以多个设备登录吗)

  • 笔记本电脑贴纸对笔记本有影响吗(笔记本电脑贴纸有必要吗)

    笔记本电脑贴纸对笔记本有影响吗(笔记本电脑贴纸有必要吗)

  • 查找id对方有提醒吗(查找id定位对方)

    查找id对方有提醒吗(查找id定位对方)

  • pbfmoo是什么手机型号(pbfm00是什么型号手机)

    pbfmoo是什么手机型号(pbfm00是什么型号手机)

  • 表格隐藏后恢复不了(表格隐藏恢复隐藏颜色怎么恢复)

    表格隐藏后恢复不了(表格隐藏恢复隐藏颜色怎么恢复)

  • ip协议属于什么层(ip协议又称为什么协议)

    ip协议属于什么层(ip协议又称为什么协议)

  • 已经退款成功的订单可以恢复吗(已经退款成功的订单怎么看物流)

    已经退款成功的订单可以恢复吗(已经退款成功的订单怎么看物流)

  • 微信下载后安装不上怎么办(微信下载后安装失败)

    微信下载后安装不上怎么办(微信下载后安装失败)

  • nova5与nova5pro外观区别(nova5和nova5pro外观一模一样吗)

    nova5与nova5pro外观区别(nova5和nova5pro外观一模一样吗)

  • 微信封面一天只能换一次吗(微信封面一天只显示一次)

    微信封面一天只能换一次吗(微信封面一天只显示一次)

  • 华为手机收藏夹在什么位置(华为手机收藏夹的东西怎么拷到电脑)

    华为手机收藏夹在什么位置(华为手机收藏夹的东西怎么拷到电脑)

  • 手机如何切换输入法(手机如何切换输入语言)

    手机如何切换输入法(手机如何切换输入语言)

  • 手机怎么看中央直播(手机怎么看中央8台)

    手机怎么看中央直播(手机怎么看中央8台)

  • ios13卡通头像设置(iphone卡通头像怎么设置)

    ios13卡通头像设置(iphone卡通头像怎么设置)

  • 华为荣耀7可以双卡吗(华为荣耀7可以玩光遇吗)

    华为荣耀7可以双卡吗(华为荣耀7可以玩光遇吗)

  • ios不越狱修改位置(免越狱修改位置)

    ios不越狱修改位置(免越狱修改位置)

  • 抖音极速版怎么发视频(抖音极速版怎么提现到微信)

    抖音极速版怎么发视频(抖音极速版怎么提现到微信)

  • 钉钉如何使用(钉钉如何使用八位会议号进入)

    钉钉如何使用(钉钉如何使用八位会议号进入)

  • 中级财务管理与注会财务管理
  • 税务师考试各科老师推荐
  • 进口关税怎么做分录
  • 未确认融资费用和长期应付款
  • 红字专用发票能作废吗
  • 金蝶未结账是否可以重新起账
  • 30万的车税可以抵多少钱
  • 小企业准则固定资产折旧每月折旧多折了
  • 生产过程中报废怎么核算成本
  • 挂账留底税额如何抵扣?
  • 避税方法一般有几种
  • 已经给员工交了社保能退吗
  • 个人股东无偿借款给企业
  • 个人账户付款可以开公司发票吗
  • 网上买普票安全吗
  • 行政单位租个人房子能用收据下账吗
  • 采用审计软件有什么优缺点
  • 股权更改需要什么费用
  • 增值税发票确认时间
  • 一般纳税人增票流程
  • 吸收合并企业的情形
  • 如何将旧版本软件卸载
  • 三大期间费用属于什么类
  • 腾讯电脑管家的信任区在哪里
  • mac本host文件
  • 税控设备抵减增值税会计处理
  • 房屋租赁合同中租金大写
  • 吃鸡到底用什么显卡性价比最高?
  • PHP:zip_entry_close()的用法_Zip函数
  • 使用php进行mysql数据库编程的基本步骤
  • 董事费如何计算个人所得税
  • php array_slice 取出数组中的一段序列实例
  • php对象是什么类型的数据
  • 结转完工产品成本的会计分录
  • 职工福利能开专票吗
  • 股东分红放到哪个会计科目
  • 个人所得税经营所得
  • 退回的个税手续费计入什么科目
  • 应收票据及应收账款周转率计算公式
  • 房租押金需要缴税吗
  • 月初没报完税可以开发票吗
  • 技术服务费可以计入成本吗
  • 累计扣除包括哪些
  • 赔付支出包括
  • 母公司与子公司税务关系
  • 社保退回的钱怎么做会计分录
  • 收到所得税退税的账务处理
  • 仓管需要会计证吗
  • 工业企业生产什么
  • sqlserver优化方案
  • mysql安装与配置的步骤与常用命令
  • sql server的主数据库是( )
  • 快速插入大量数据的asp.net代码(Sqlserver)
  • win7安装mysql8.0.17
  • window系统怎么查看
  • win2003设置自动重启
  • redhat gui
  • win10选择一个选项
  • uca1
  • linux小技巧
  • 苹果发布会亮点速览
  • centos7误删除怎么恢复
  • win10显示win8
  • win7 安装系统
  • win7累计更新补丁包
  • shell脚本 定义变量
  • javascript的面向对象
  • 鼠标焦点离开触发查询
  • incaseformat查杀
  • div+css网页布局方法
  • jquery.Callbacks的实现详解
  • python制作windows安装程序
  • 自动删除文件脚本bat
  • unity soket
  • 欢迎使用来电提醒业务是什么意思
  • js 数组处理
  • 方块大作战百科
  • 可以跨区办理税务ukey更换吗
  • 浅谈企业所得税论文
  • 房地产预缴土增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设