vue中调起支付

最近项目中涉及到支付，h5中的微信支付，支付宝支付，微信内部的支付；

1.h5中的支付宝支付

h5中的支付宝支付后端会返回支付宝支付url或者form代码段，一般情况会返回form代码段，支付宝第三方支付会返回url，打开支付宝url,或者提供容器，打开form，跳转支付页面；

// 订单支付支付宝
let href = window.location.host;
href =window.location.protocol +"//" + href +"/landingPage/getGiftV3?outTradeNo=" +this.outTradeNo +"&channelCode=" + window.localStorage.getItem("channelCode");
//接口参数
let parmas = {
        domain: href,
        outTradeNo: this.outTradeNo,
     };
//调用接口
this.$http.post(viporderali, parmas)
.then((res) => {
       if (res.code == 200) {

            //后端会返回支付宝支付url或者form代码段
            //一般情况会返回form代码段，支付宝第三方支付会返回url
            if(res.data.indexOf("<form") == -1){

              //后端提供支付宝支付url
                location.replace(res.data);

             }else{

             //后端返回form代码段
             //提供容器，跳转到支付页面
             const div = document.createElement("div");
             div.innerHTML = res.data;
             document.body.appendChild(div);
             document.forms[0].submit();
             }
           }
        }).catch((err) => {
             console.log(err);
        });

2.h5中的微信支付

h5中的微信支付后端会返回微信支付的url,获取当前url地址作为回调地址，拼在返回的微信支付url后面，通过encodeURIComponent函数编码，访问编码后的url，可以跳转微信支付；

 // 订单支付微信h5
let href = window.location.host;
href = window.location.protocol + "//" + href;
//接口参数
let parmas = {
       domain: href,
       outTradeNo: this.outTradeNo,
     };
//调用接口
this.$http.post(viporderh5, parmas)
 .then((res) => {
          if (res.code == 200) {
                //获取当前url
                let url =href +"/landingPage/getGiftV3?outTradeNo=" +this.outTradeNo + "&channelCode=" + window.localStorage.getItem("channelCode");
                 //url编码
                 url = encodeURIComponent(url);
                 //将编码后的url拼在返回的url后面
                 let redirect_url = res.data + "&redirect_url=" + url;
                 //跳转微信支付
                 location.replace(redirect_url);
               }
        }).catch((err) => {
              console.log(err);
        });

3.微信内部支付

在微信浏览器中打开的页面调起微信支付

1.先要获取appid

2.编码当前url

3.在https://open.weixin.qq.com/connect/oauth2/authorize?response_type=code&scope=snsapi_base&state=STATE#wechat_redirect中拼接appid和当前herf

//调用获取appid的接口
this.$http.get(appid)
     .then((res) => {
         if (res.code == 200) {

             //拿到appid
             this.appid = res.data;
             //获取当前url
             let href = window.location.href;
             //编码
             href = encodeURIComponent(href);
             //在当前链接中拼接
             //appid=${this.appid}&redirect_uri=${href}
             location.replace(
                `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${href}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
              );
            }
          })
          .catch((err) => {
            console.log(err);
          });