微信公眾號h5使用微信支付及支付寶支付的步驟(前端)

更新時間：2024年07月15日 08:31:48 作者：前端、小老弟

微信H5支付是一種支付解決方案,主要適用于商戶在微信客戶端外的移動端網(wǎng)頁上展示商品或服務(wù)的場景,這篇文章主要給大家介紹了關(guān)于微信公眾號h5使用微信支付及支付寶支付(前端)的相關(guān)資料,需要的朋友可以參考下

方案：

一、微信支付

考慮到授權(quán)的問題，微信支付使用JS-SDK進(jìn)行支付

二、支付寶支付

問題：h5微信授權(quán)后是無法再微信瀏覽器直接打開支付寶的付款鏈接

解決：使用一個中間頁指向通過跳轉(zhuǎn)到瀏覽器進(jìn)行支付

實施：

一、微信支付：

第一步微信授權(quán)，在main.js中添加路由攔截，獲取code，具體代碼如下 ↓

// main.js
router.beforeEach(async (to: RouteLocationNormalized,from: RouteLocationNormalized,next) => {
    // 判斷有沒有openId 即授權(quán)了直接放行
    if (store.state.openId) {
        next()
    } else {
        // 沒有授權(quán)去授權(quán)獲取code 再放行
        const code = await getCode()
        await queryInfo(code)
        next()
    }
})

// 獲取code
function getCode() {
    const code = getUrlCode()?.code
    if (!code) {
        // 沒有code 請求后端接口進(jìn)行鏈接跳轉(zhuǎn)獲取code(鏈接值微信的授權(quán)鏈接，成功授權(quán)后會跳回 回調(diào)地址，在回調(diào)地址上 會攜帶code參數(shù))
        return getWxOauthUrl({
            redirectUrl: window.location.href
        }).then(async ({data}) => {
            if (data.statusCode === 0) {
                window.location.replace(data.msg)
            }
        })
    } else {
        return code
    }
}

// 通過code 獲取用戶信息
function queryInfo(code: string) {
    return getUserInfo([code]).then(({data}) => {
        const result = data.data || {}
        store.commit('getUserInfo', result)
        store.commit('getUserOpenId', result.openId)
    })
}

// 獲取url 參數(shù)的通用方法
function getUrlCode() {
    // 截取url中的code方法
    const url = location.search;
    const theRequest = new Object();
    if (url.indexOf("?") !== -1) {
        const str = url.substr(1);
        const strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
    }
    return theRequest;
}

授權(quán)成功后即可以進(jìn)行支付環(huán)節(jié)

核心代碼

// 首先在index.html 中引入微信JS-SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// 然后在支付邏輯中添加以下代碼即可~

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 {
                onBridgeReady();
              }

function onBridgeReady(result) {
              WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": ,   //公眾號ID，由商戶傳入
                "timeStamp": ,   //時間戳，自1970年以來的秒數(shù)
                "nonceStr": ,      //隨機(jī)串
                "package": ,
                "signType": ,     //微信簽名方式：
                "paySign": 
              },
              function (res) {
                if ((res.errMsg || res.err_msg) === "get_brand_wcpay_request:ok") {
                  // 使用以上方式判斷前端返回,微信團(tuán)隊鄭重提示：
                  //res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。
                  
                }
              });
            }

這樣微信支付就已經(jīng)結(jié)束了

二、支付寶支付：

因為是在微信授權(quán)后的h5頁面，所以不能直接在微信頁面直接進(jìn)行支付

所以第一步就是在點擊支付的時候，進(jìn)行跳轉(zhuǎn)到中間頁，

先定義一個中間頁： pay.html

注意：要把這個頁面放到publish目錄下

// 跳轉(zhuǎn)中間頁，把請求支付的參數(shù)一并帶過去
window.open(`${location.origin}/pay.htm?params=${encodeURIComponent(JSON.stringify(params))}`)

pay.html核心內(nèi)容如下

let getQueryString = function (url, name) {
        let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
        if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
    };

    // 獲取接口返回的表單 進(jìn)行支付
    function handlePayForm(data) {
        const div = document.createElement("div");
        div.setAttribute("id", "payContainer");
        div.innerHTML = data
        document.body.appendChild(div);
        const payContainer = document.querySelector("#payContainer");
        const submit = payContainer.querySelector(
            'form[name="punchout_form"] input[type="submit"]'
        );
        submit.click();
        setTimeout(function () {
            div.remove();
        }, 500);
    };
    if (location.hash.indexOf('error') !== -1) {
        alert('參數(shù)錯誤，請檢查');
    } else {
        // 判斷當(dāng)前的瀏覽器環(huán)境是不是微信瀏覽器
        let ua = navigator.userAgent.toLowerCase();
        let tip = document.querySelector(".weixin-tip");
        let tipImg = document.querySelector(".J-weixin-tip-img");
        const query = JSON.parse(decodeURIComponent(getQueryString(location.href, 'params')))

        if (ua.indexOf('micromessenger') !== -1) {
            // 如果是微信里的頁面，做個指引（請通過瀏覽器進(jìn)行支付）
            // 這個頁面自己定義即可
        } else {
            // 好的，這是外部瀏覽器，請求接口獲取支付的from表單
            axios({
                url: '',
                data: query,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(({data}) => {
                if (data.statusCode === 0) {
                    // 后端返回的form表單進(jìn)行支付
                    if (data.data && data.data.returnCode === "SUCCESS") {
                        // data.data.result ==> 是一個支付的from表單
                        handlePayForm(data.data.result)
                    }
                }
            })
        }
    }

這樣即可跳轉(zhuǎn)到微信外部瀏覽器進(jìn)行正常的支付功能