乐趣区

关于前端:h5通过ping集成几种支付

jiezi

此文章为记录学习应用。如有舛误，烦请各位大佬指教（鞠躬

介绍

h5 页面，集成了

  • 微信浏览器环境领取（wx_pub）
  • 支付宝手机网站领取（alipay_wap）
  • 微信小程序领取（wx_lite）
  • app 领取（与我司 app 交互，由 app 调起微信 appwx/ 支付宝 appalipay领取）

领取流程

先附上文档👉PING++ H5 SDK 接入指南

大抵流程如下：
筹备后端接口参数 => 调起后端接口获取 ping++ charge 对象 => 拿 charge 对象调用ping++ sdk => 获取ping++ 领取后果 / 解决领取后果

环境判断

因为是 h5 嵌在各种平台外面，所以须要判断以后是哪个平台。至于怎么判断的，自行解决哈哈哈哈

created() {
    const channels = [
      {
        icon: 'ic_wechat',
        title: '微信领取',
        tips: '举荐装置微信 5.0 及以上版本的用户应用',
        name: 'wx_pub'
      },
      {
        icon: 'ic_alipay',
        title: '支付宝领取',
        tips: '举荐有支付宝账户的用户应用',
        name: 'alipay_wap'
      },
    ]
    if(this.$env.wechatApplet) {
      this.paySubChannel = 'wx_lite' // 默认理论领取渠道
      this.paySubChannels = [] // 理论可选的领取渠道数组} else if(this.$env.wechat) {
      this.paySubChannel = 'wx_pub'
      this.paySubChannels = channels.slice(0, 1)
    } else if(this.$env.alipay) {
      this.paySubChannel = 'alipay_wap'
      this.paySubChannels = channels.slice(1)
    } else { // app
      this.paySubChannel = ''
      this.paySubChannels = channels
    }
  },

筹备后端接口参数以获取 ping++ charge 对象

在调用后盾接口获取 ping++ charge 对象前，一些不同渠道领取的所需参数要筹备好。

tips: params是申请后端接口须要的参数对象

wx_pub领取

if(this.paySubChannel === 'wx_pub') {params.openId = getOpenId() // 对于 openId 如何获取本篇不探讨
}

alipay_wap领取

因为 ping++ 会在 successUrl 前面增加参数 ?result=success/fail 等等，导致咱们无奈在这里先配置参数：

params.successUrl = `${window.location.origin}/#/payResult?serialNo=${this.payInfo?.serialNo}`

所以采纳 动静路由 的模式去传递领取后果页所需的参数：

if(this.paySubChannel === 'alipay_wap') {params.successUrl = `${window.location.origin}/#/payResult/${this.payInfo?.serialNo}/${this.otherProp}`
}

路由配置

{
  path: '/payResult/:serialNo/:otherProp',
  name: 'payResult',
  component: () => import('views/common/payResult/index.vue'),
  meta: {title: '缴费后果'}
},

而后咱们在领取后果页就能够通过 this.$route.params 获取到 serialNo otherProp 这两个参数。所以你的业务如果须要带 token 能够间接加个 /:token。查看文档# 动静路由获取更多对于动静路由的常识 o(~▽~) ブ

wx_lite领取

背景：h5嵌在小程序 webview 里边

h5代码：

// 先引入 wx sdk
import wx from 'weixin-js-sdk'

if(this.paySubChannel === 'wx_lite') { // 间接重定向到小程序领取页
  wx.miniProgram.redirectTo({url: `/pages/webview/pay?params=${JSON.stringify(params)}`
  })
}

而后所有流程交给小程序本人解决，即：筹备后端接口参数 => 调起后端接口获取 ping++ charge 对象 => 拿 charge 对象调用ping++ sdk => 获取ping++ 领取后果 / 解决领取后果。

留神：小程序领取 params 也须要openId，这个能够在小程序里边获取。

与 app 交互，让 app 调起领取

这个很简略，就是把参数给到 app，让app 调起对应微信 / 支付宝领取即可。

咱们页面是有让用户抉择微信还是支付宝领取的，所以选定后，把 ping ++ charge 对象给app：

async handleAppPay(params) {
  try {
    let channel
    switch (this.paySubChannel) {
      case 'wx_pub':
        channel = 'wx'
        break;
      case 'alipay_wap':
        channel = 'alipay'
        break;
      default:
        break;
    }
    params.paySubChannel = channel
    
    if(!this.pingPayParams) {const { data} = await api.req(JSON.stringify(params), 'payRequest')
      this.pingPayParams = data
    }
    
    // appPay 是与 app 交互的一个协定
    appPay({PingParam: JSON.stringify(this.pingPayParams),
    })
    // 注册让 app 回调的 js 函数
    methodCalledByNative('handlePayResult', (result) => this.handlePayResult(result))
    this.$on("hook:beforeDestroy", () => (window.handlePayResult = null));
  } catch (error) {console.log(error)
  }
},

获取 Ping++ 领取后果 / 解决领取后果

支付宝网页领取实现会间接走successUrl，下面曾经解决了

// app/ 微信 js api/ 微信小程序领取完会走这里
async handlePayResult(result) {console.log('ping++ 领取后果：', result);
  switch (result) {
    case 'success':
      this.$router.push({
        name: 'payResult',
        params: {
          otherProp: this.otherProp,
          serialNo: this.payInfo.serialNo
        }
      })
      break
    case 'fail':
      this.$router.push({
        name: 'payResult',
        params: {result: 'fail'}
      })
      break
    case 'cancel':
      console.log('勾销领取')
      break
    case 'invalid':
      this.$toast.fail(this.paySubChannel === 'wx_pub' ? '用户没有装置微信' : '用户没有装置支付宝')
      break
    default:
      break
  }
},

领取后果页

async created() {const { serialNo, otherProp, result} = this.$route.params
    if(result === 'fail') { // 能够间接展现领取失败
      return
    }
    this.otherProp = otherProp
    this.serialNo = serialNo
    this.queryPayResult()},

此文章为记录学习应用。如有舛误，烦请各位大佬指教（鞠躬

退出移动版