vue 微信内H5调起支付

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 微信内H5调起支付相关的知识,希望对你有一定的参考价值。

在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效。

主要代码:


import axios from ‘axios‘;
export default {
    methods:{
        wxpay() {
            axios.post(url,data)
            .then((res) => {
                if(res.code == 200) {
                    const pay_params = res.data.jsApiParameters

                    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{
                        this.onBridgeReady(pay_params);
                    }
                }else{
                    alert(‘微信支付调起失败!‘);
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        onBridgeReady(params) {
            const pay_params = JSON.parse(params);
            WeixinJSBridge.invoke(
                ‘getBrandWCPayRequest‘, {
                    "appId": pay_params.appId,  //公众号名称,由商户传入     
                    "timeStamp": pay_params.timeStamp,  //时间戳,自1970年以来的秒数     
                    "nonceStr": pay_params.nonceStr,  //随机串     
                    "package": pay_params.package,     
                    "signType": pay_params.signType,  //微信签名方式:     
                    "paySign": pay_params.paySign  //微信签名 
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    alert(‘支付成功!‘);
                } 
            }); 
        },
    }

}

以上就是微信内H5调起支付的方法~

原文地址:https://segmentfault.com/a/1190000017013969

以上是关于vue 微信内H5调起支付的主要内容,如果未能解决你的问题,请参考以下文章

h5微信支付

微信H5支付流程

vue h5 公众号支付

企业号微信支付 公众号支付 H5调起支付API示例代码 JSSDK C# .NET

H5版如何在微信外(非微信浏览器)进行微信支付技术方案

关于微信H5支付(微信内支付 和 跳连接支付)