js前端实现微信支付和支付宝支付

支付步骤：创建订单，向后端获取支付参数，再跳往后端指定的页面，进行支付

①支付宝支付：

页面中要有个dom盒子，用来进行支付宝支付跳转

<div id="alipay"></div>

// 支付完毕要返回的页面
const returnUrl = `${window.location.origin}/vue-vite/home?`           
request({
    url: URLS.FAST_CREATE_TF_ORDER,
    params: { 
         returnUrl，
         // 后端需要的创建订单的参数
     ...
     },
    method: 'post',
}).then(res => {
    const div = document.getElementById('alipay')
    // url里面是一个form表单，里面包含支付要跳转的页面信息及支付参数
    div.innerHTML = res?.payUrl
    // 页面跳转
    div.getElementsByTagName('form')[0].submit()
}）.catch(err => {}).finally(() => {})

②微信支付，比较复杂，分为两种情况：

情况1: H5支付，H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付

情况2：JSAPI支付，JSAPI支付是指商户通过调用微信支付提供的JSAPI接口，商户的支付场景是在微信内置浏览器打开调起支付完成收款。

const wxJsapiPay = obj => {
    const onBridgeReady = (params, cb) => {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                appId: params.appId, // 公众号ID，由商户传入
                timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
                nonceStr: params.nonceStr, // 随机串
                package: params.package,
                signType: params.signType, // 微信签名方式：
                paySign: params.paySign, // 微信签名
            },
            res => {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    cb()
                }
            },
        )
    }
    if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
        }
    } else {
        const { params, cb } = obj
        onBridgeReady(params, cb)
    }
}
request({
    url: URLS.FAST_CREATE_TF_ORDER,
    params: {
        appid: 'appid',
        returnUrl,
        // 后端创建订单需要的参数
        ...
    },
    method: 'post',
}).then(data => {
    if (data.tradeType === 'JSAPI') {
        // 情况1
        wxJsapiPay({
            params: data,
            cb: () => {
            // 查询当前订单支付信息
            },
        })
    } else if (data.tradeType === 'MWEB') {
        // 情况2非微信环境h5端支付
        // 设置支付成功回跳页面
        const redirect_url = `${window.location.origin}/vue-vite/home`
        const url = `${data.payUrl}&redirect_url=${redirect_url}`
        window.location.replace(url)
    }
}).catch(err => {}).finally(() => {})