前端在H5页面唤起微信支付(H5支付)

前言

公司产品之前是在公众号之内访问,使用微信JSDK调用微信支付。后需要在浏览器之中访问,调用H5支付。前端使用框架是VUE + VANT

提示:以下是本篇文章正文内容,下面案例可供参考

首先了解什么是H5支付,链接地址:微信H5支付说明文档

一、在支付页面通过后端接口获取H5支付链接

pay() {
    let This = this;
    this.$indicator.open(); //loading...
    let params = {
        proposalNo: this.$route.query.orderNo,
        orderType: '2', // 1投保单 2订单
        payType: this.isWeixin() ? '': '3'
    }
    initiatePayment(params).then(res => {
        if (res.code == 200) {
            This.$indicator.close();
            localStorage.setItem("payVisiable", true)
            location.href = res.data.mwebUrl // 获取支付链接直接跳转微信
        }
    }).catch(error => {
        This.$indicator.close();
        This.$toast(error)
    })
    
}

接下来说下,在过程中遇到的坑!!!

1、使用上边的代码跳转到微信之后,用户支付成功或失败都会跳转到发起支付的这个页面,发起支付的页面地址是https://xxx.xxxxx.cn/channel/a/#/studyH5?policyNo=1111&planCode=2222,支付完成或支付失败后,跳转的页面就变成了 https://xxx.xxxxx.cn/channel/a/#/,问题来了,页面加载不出来了。

解决方法:

//在跳转支付链接后,拼接微信回跳地址
location.href = res.data.mwebUrl + '&redirect_url=' + encodeURIComponent(window.location.href)

重点  跳转地址需要encodeURIComponent

二、支付成功/失败后,在微信跳转会的页面增加弹层,让用户去触发查询保单是否生成的按钮,跳转相应支付成功/失败页面

前端在H5页面唤起微信支付(H5支付)_第1张图片

// 查询支付结果
seachPayResult() {
    let This = this
    if(!localStorage.getItem("outOrderNo")) return
    var orderNo = JSON.parse(localStorage.getItem("outOrderNo"))
    getPayStatus(orderNo).then(res => {
        This.payVisiable = false //弹窗消失
        if(res.status != '1'){
            window.location.href = `${this.$_config.URL.unpaid}?orderNo=${orderNo}&code=Y38&channelCode=${this.$route.query.channelCode}`
        } else {
            localStorage.removeItem("outOrderNo")
            window.location.href = `${this.$_config.URL.success}?orderNo=${orderNo}&code=Y38&channelCode=${this.$route.query.channelCode}`
        }
    }).catch(error => {})
}

总结

以上就是今天要分享的内容,仅是自己在开发中所遇到的问题。在此分享给小伙伴,也是给自己做个笔记。谢谢~~

你可能感兴趣的:(微信,vue.js,前端,javascript)