前端 h5实现自带浏览器支付功能

前端需要做的

这里使用vue 中的 mixin
第一步获取订单号,调用后端的接口获取订单号
在这里插入图片描述
第二步:调用后端的接口,后端给返回一个url地址,然后打开这个地址(这个地址是调用微信支付的地址,打开即调用)
在这里插入图片描述
这里使用decodeURIComponent的作用为了转码
支付成功之后需要返回原来的页面。这里需要区分一下安卓或者苹果
苹果手机会先跳转到微信里面,安卓的不需要跳转到微信内部,当前浏览器可以直接调起
所以需要再后端返回的url末尾加上redirect_url=要返回的地址(我目前开发只是再苹果端使用,可能安卓这样用也没有大碍)
参考
在这里插入图片描述
判断安卓 ios

 let ran = navigator.userAgent
              let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
              let isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

              if (isAndroid) {
                // 安卓代码块
                window.location.href = ress.data
              }
              if (isIOS) {
                // ios代码块
                window.location.href = redirect
              }

第三步:再调用微信链接的下方循环调用查询支付成功的接口,后端给的接口,成功后移除定时器
在这里插入图片描述
回调函数:可以做一些自己想要的动作(查询接口等)
强调一下如果回调函数没有执行建议加上定时器延迟执行一下
在这里插入图片描述

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值