美文网首页
VUE支付宝和微信支付和银联支付

VUE支付宝和微信支付和银联支付

作者: w龙 | 来源:发表于2019-09-26 09:34 被阅读0次

    支付宝和银联支付是一样的

    后台返回时的一个form表单如图


    QQ截图20190830161851.jpg

    前端需要将后台传入的表达提交即可

                   const div = document.createElement('div') // 创建div
                   div.innerHTML = res.data.html // 将返回的form 放入div
                    document.body.appendChild(div)
                    document.forms[0].submit();
    

    微信H5支付

    2222.jpg
          goWechatPayH5() {
                    let _this = this;
                    let obj = {
                        pay_sn: this.payItem.pay_sn,
                    };
                    let url = encodeURI(window.location.href + '?openLayer=1')
                    this.$fetch(this.phpApiHost + "/mobile/index.php?act=goods_assemble&op=wxpay2_h5_launch", obj, "post", "application/json").then(res => {
                        if (res.code === 200) {
                            window.location.href = res.data.mweb_url + '&redirect_url=' + url;
                        } else if (res.code === 400) {
                            _this.$toast(res.error)
                        }
                    });
                },
    

    微信公众号支付

    //后台获取支付参数
     goWxPublicPay() {
                    console.log('goWxPublicPay')
                    let _this = this;
                    let obj = {
                        pay_sn: this.payItem.pay_sn,
                        openid: this.openId
                    };
                    this.$fetch(this.phpApiHost + "/mobile/index.php?act=wxpay_ver3&op=index", obj, "post", "application/json").then(res => {
                        if (res.code === 200) {
                            this.payData=res.data
                            _this.callPay()
                        } else if (res.code === 400) {
                            _this.$toast(res.error)
                        }
                    });
    
                },
    
              wxApiCall() {
                    let _this = this,obj=this.payData;
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId": obj.appId, //公众号名称,由商户传入     
                            "timeStamp": obj.timeStamp, //时间戳
                            "nonceStr": obj.nonceStr, //随机串     
                            "package": obj.package,
                            "signType": "MD5", //微信签名方式:
                            "paySign": obj.paySign //微信签名
                        },
                        function(res) {
                            //清空支付信息
                            // _this.payData = {};
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                // 使用以上方式判断前端返回,微信团队郑重提示:
                                //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                                 _this.$toast('支付成功');
                            } else if (res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg == "get_brand_wcpay_request:cancel") {
                                _this.$toast('似乎有点问题,稍后重新支付');
                            }
                        });
    
                },
                callPay(obj) {
                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener("WeixinJSBridgeReady", this.wxApiCall, false);
                        } else if (document.attachEvent) {
                            document.attachEvent("WeixinJSBridgeReady", this.wxApiCall);
                            document.attachEvent("onWeixinJSBridgeReady", this.wxApiCall);
                        }
                    } else {
                        this.wxApiCall();
                    }
                },
    

    相关文章

      网友评论

          本文标题:VUE支付宝和微信支付和银联支付

          本文链接:https://www.haomeiwen.com/subject/anroectx.html