javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 公众号h5使用微信及支付宝支付

微信公众号h5使用微信支付及支付宝支付的步骤(前端)

作者:前端、小老弟

微信H5支付是一种支付解决方案,主要适用于商户在微信客户端外的移动端网页上展示商品或服务的场景,这篇文章主要给大家介绍了关于微信公众号h5使用微信支付及支付宝支付(前端)的相关资料,需要的朋友可以参考下

方案:

一、微信支付

        考虑到授权的问题,微信支付使用JS-SDK进行支付

二、支付宝支付

        问题:h5微信授权后是无法再微信浏览器直接打开支付宝的付款链接

        解决:使用一个中间页 指向通过跳转到浏览器进行支付

实施:

一、微信支付:

第一步微信授权,在main.js中添加路由拦截,获取code,具体代码如下  ↓

// main.js
router.beforeEach(async (to: RouteLocationNormalized,from: RouteLocationNormalized,next) => {
    // 判断有没有openId 即授权了直接放行
    if (store.state.openId) {
        next()
    } else {
        // 没有授权去授权获取code 再放行
        const code = await getCode()
        await queryInfo(code)
        next()
    }
})

// 获取code
function getCode() {
    const code = getUrlCode()?.code
    if (!code) {
        // 没有code 请求后端接口进行链接跳转获取code(链接值微信的授权链接,成功授权后会跳回 回调地址,在回调地址上 会携带code参数)
        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 参数的通用方法
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;
}

授权成功后即可以进行支付环节

核心代码

// 首先在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年以来的秒数
                "nonceStr": ,      //随机串
                "package": ,
                "signType": ,     //微信签名方式:
                "paySign": 
              },
              function (res) {
                if ((res.errMsg || res.err_msg) === "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示:
                  //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                  
                }
              });
            }

这样 微信支付就已经结束了

二、支付宝支付:

因为是在微信授权后的h5页面,所以不能直接在微信页面直接进行支付

所以第一步就是在点击支付的时候,进行跳转到中间页,

先定义一个中间页: pay.html

注意:要把这个页面放到publish目录下

// 跳转中间页,把请求支付的参数一并带过去
window.open(`${location.origin}/pay.htm?params=${encodeURIComponent(JSON.stringify(params))}`)

pay.html核心内容如下

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

    // 获取接口返回的表单 进行支付
    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('参数错误,请检查');
    } else {
        // 判断当前的浏览器环境是不是微信浏览器
        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) {
            // 如果是微信里的页面,做个指引(请通过浏览器进行支付)
            // 这个页面自己定义即可
        } else {
            // 好的,这是外部浏览器,请求接口获取支付的from表单
            axios({
                url: '',
                data: query,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(({data}) => {
                if (data.statusCode === 0) {
                    // 后端返回的form表单进行支付
                    if (data.data && data.data.returnCode === "SUCCESS") {
                        // data.data.result ==> 是一个支付的from表单
                        handlePayForm(data.data.result)
                    }
                }
            })
        }
    }

这样即可 跳转到微信外部浏览器进行正常的支付功能

总结

到此这篇关于微信公众号h5使用微信支付及支付宝支付的文章就介绍到这了,更多相关公众号h5使用微信及支付宝支付内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文