h5通过ping++集成几种支付前端vue.js

此文章为记录学习使用。如有谬误，烦请各位大佬指教（鞠躬
介绍 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: '缴费结果' } },

【h5通过ping++集成几种支付】然后我们在支付结果页就可以通过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 = channelif(!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() },

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