vue h5 对接支付宝,微信支付,微信js支付

请叫我海龟先生 等级 428 1 1

vue h5 实现支付(支付宝,微信)

h5端实现支付难度不大,只是有些小的点需要注意下,其他的看文档撸就行了。 支付宝很简单,后端返回一个 html ,前端插入调用就行了,微信支付分两种:1、微信内支付(jsapi,微信内浏览器)2、微信外支付(h5支付)。

一、支付宝支付

// 前端啥都不用管,交给后端去干,返回 html 调用点击就好了
// 插入 v-html
this.alipayWap = payRes.data.body
// dom 就绪
await this.$nextTick()
// 调用点击
this.$refs.alipayWap.children[0].submit()

支付宝支付,支付成功后,后端可以配置回跳地址( 貌似ios和微信一样,需要用户自己去返回 ),但是没法在url上拼接参数( 我的后端是这么说多,咱不管 ),可以单独设置一个支付成功页面

二、微信支付 ---- h5 微信外

微信外其他浏览器支付也简单,由后端去干,返回一个 url 前端去跳转,然后拉起微信支付,同时可以在url上拼接支付成功后回跳的地址( 需要 encode 编码,有个点要注意,文档描述,当没有调起微信支付,或者超过5s,微信任然会跳转到拼接的地址上,关于这点文档有详细描述,同时 vue 哈希路由模式,微信回跳会把 # 后全部干掉,等于直回跳个域名,所以能不用哈希就不用哈希模式

// tips: 如果实在用了 哈希模式,可以自己拼接,把#省去,浏览器在访问时,会自动加上
let redirect_url = `${this.w_origin}/xxx/?PayType=h5wx`
window.location.replace(`${payRes.url}&redirect_url=${encodeURIComponent(redirect_url)}`)
// 同时,尽量用 window.location.replace

三、微信内支付

微信内支付就简单多了,利用微信内置对象,加上后端返回的一些信息就可以了,前提是要微信授权获取openid (这个也分两种,1、跳转授权页 2、静默授权,只获取code,后端凭借code换取openid,也称静默授权,其实看的到登录的 loding 圈),获取code和微信外支付差不多,都是跳转微信提供的地址,拼接回调地址,所以哈希永远的痛

// 调用微信内支付
        callWxPay(data) {
            let that = this
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(data), false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(data));
                    document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(data));
                }
            } else {
                this.onBridgeReady(data);
            }
        },
        // 微信浏览器支付
        onBridgeReady(payData) {
            let that = this
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": payData.appId,
                //公众号名称,由商户传入     
                "timeStamp": payData.timeStamp,
                //时间戳,自1970年以来的秒数     
                "nonceStr": payData.nonceStr,
                //随机串     
                "package": payData.packageString,
                "signType": payData.signType,
                //微信签名方式:     
                "paySign": payData.paySign //微信签名 
            },
            function(res) {
                that.$router.push( { name: "PayInfo"} )
                // if (res.err_msg == "get_brand_wcpay_request:ok") {
                //     // 使用以上方式判断前端返回,微信团队郑重提示:
                //     //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                //     that.$router.push( { name: "PayInfo"} )
                // }else{
                //     // 微信支付失败
                //     that.$router.push({ name:"PayInfo"})
                // }
            });
        }
收藏
评论区