记录一次H5支付(支付宝,微信,JSAPI)

获取订单号

// 发送后端关于订单的参数
let data = {
    phone,
    // 金额
    payPrice:
    userName,
    meritsRegion,
    userAddress,
    customVision,
    id
};

// 调用后台接口获取orderCode
let orderCode = await addActivity(data);

1. 支付宝

最简单的是支付宝支付,后台会返回一个form表单,我们用js提交即可

// 支付宝支付
// 发送金额和订单号获取form表单
const form = await zfb_web_pay({
    // 订单号
    orderCode,
    // 金额
    amount
});

const div = document.createElement('div');
div.id = 'alipay';
div.innerHTML = form;
document.body.appendChild(div);
this.$nextTick(function() {
    // 执行后会唤起支付宝
    document
        .getElementById('alipay')
        .children[0].submit();
    // 清除上一个支付表单
    document.body.removeChild(div);
});

2. 微信外部支付

微信外部支付是通过返回一个url地址来调起微信app从而进行支付的

// 微信外部支付
// 发送金额和订单号获取微信支付的url
const { mweb_url } = await wx_WEB({
    // 订单号
    orderCode,
    // 金额
    amount
});
window.location.href = mweb_url;

3.微信内部JSAPI支付

微信内部支付是最麻烦的,因为需要前端跳转一个url获取code,然后根据此code去调接口换取openId

// 微信内部JSAPI支付

// 在组件的beforeRouteEnter导航守卫中跳转获取code
beforeRouteEnter(to, from, next) {
    next(vm => {
        // 如果是微信内部浏览器
        if (isWxBrowser()) {
            // 如果没有code
            if (!vm.code) {
                const url =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=${公众平台的openId}&redirect_uri=' +
                    encodeURIComponent(window.location.href) +
                    '&response_type=code&scope=snsapi_base#wechat_redirect';
                // 跳转链接获取code
                window.location.href = url;
            } else {
                // 拿code换取openId
                vm.getOpenId(vm.code);
            }
        }
    });
},

computed: {
	code() {
      return getQueryString('code')
    }
},

methods:{
    // 调接口拿code换取openId
    getOpenId(code) {
        getOpenId({
            code
        })
            .then(res => {
                this.openId = res;
            })
            .catch(err => {
                console.log(err);
            });
    },
    
    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    }
}


const wxPayInfo = await wx_WEBNEI({
    // 订单号
    orderCode,
    // 金额
    openId: this.openId
});
weixinPay(wxPayInfo);

weixinPay(data) {
    if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
            document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeReady(data),
                false
            );
        } else if (document.attachEvent) {
            document.attachEvent(
                'WeixinJSBridgeReady',
                onBridgeReady(data)
            );
            document.attachEvent(
                'onWeixinJSBridgeReady',
                onBridgeReady(data)
            );
        }
    } else {
        onBridgeReady(data);
    }
}

function onBridgeReady(data) {
    window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
            appId: data.appId, //公众号名称，由商户传入
            timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, //随机串
            package: data.package, //订单详情扩展字符串
            signType: data.signType, //微信签名方式：
            paySign: data.sign //微信签名
        },
        function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                Toast.success('支付成功');
            } else {
                Toast.fail('支付失败！');
            }
        }
    );
}