VUE_微信浏览器调用微信支付，h5调用微信支付，h5调用支付宝支付

朱雀 2023-01-13 15:59 477阅读 0赞

import {  Toast,Dialog  } from 'vant';
    //微信支付 兼容微信浏览器和h5
    wxpay:function(wxConfig){ 
        let { 
            appId="",
            timestamp="",
            nonceStr="",
            paySign="",
            signType="",
            package:_package="",
            mweb_url="",
        } = wxConfig;
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        if(isWeixin){        //微信h5支付
            wx.config({  
                debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
                appId: appId, // 必填，公众号的唯一标识 
                timestamp: timestamp, // 必填，生成签名的时间戳 
                nonceStr: nonceStr, // 必填，生成签名的随机串 
                signature: paySign, // 必填，签名 
                jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 
            }) 
            wx.ready(() => {   
                wx.checkJsApi({      
                jsApiList: ['chooseWXPay'],     
                success:function(res){  
                    // console.log("seccess") 
                    // console.log('hskdjskjk', res) 
                }, 
                fail:function(res){       
                    // console.log("fail"); 
                    // console.log(res) 
                }   
                })   
                wx.chooseWXPay({      
                    timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 
                    nonceStr: nonceStr, // 支付签名随机串，不长于 32 位 
                    package: _package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） 
                    signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' 
                    paySign: paySign, // 支付签名 
                    success: function (res) {   // 支付成功后的回调函数 
                        // alert(res.errorMsg) 
                        // this.$router.push('/user');
                        // that.order[0].goods.host_url
                        Toast("支付成功")
                        window.location.href=wxurl
                    },     
                    fail: function (res) {        
                        // alert("支付失败"); 
                        // alert(res.errMsg);
                        // this.$router.back()
                        Toast("支付失败")
                        window.history.go(-1); 
                    }   
                }) 
            }) 
            wx.error(err => {  
                // alert(err) 
                Toast("支付失败");
                setTimeout(() => { 
                    window.history.go(-1); 
                }, 500);
            })
        }else{       //非微信浏览器支付 h5
            window.location.href=mweb_url
            setTimeout(() => { 
                Dialog.confirm({ 
                    title: '支付确认',
                    message: '确认是否支付？',
                    confirmButtonText:"我已支付",
                    cancelButtonText:"放弃支付",
                })
                .then(() => { 
                    // on confirm
                    window.location.href='微信支付成功跳转地址'
                })
                .catch(() => { 
                    // on cancel
                    window.history.go(-1); 
                });
            }, 1000);
        }
    },
    //支付宝支付
    zfbpay:function(url){ 
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        if(isWeixin){ 
            Toast("请不要在微信打开");
            return false;
        }else{ 
            window.location.href=url
            setTimeout(() => { 
                Dialog.confirm({ 
                    title: '支付确认',
                    message: '确认是否支付？',
                    confirmButtonText:"我已支付",
                    cancelButtonText:"放弃支付",
                })
                .then(() => { 
                    // on confirm
                    window.location.href=wxurl
                })
                .catch(() => { 
                    // on cancel
                    window.history.go(-1); 
                });
            }, 1000);
        }
    }