vue3 微信支付和支付宝支付 H5和微信内置浏览器

vue3微信支付和支付宝支付

// 判断是否为微信内置浏览器
      let browser: any = navigator.userAgent.toLowerCase();
      let isWechat: any = browser.match(/MicroMessenger/i) == "micromessenger";
      // 支付宝支付
      if (gather.pay_type == 2) {
        orderPay({
          pay_type: pay_typeA,
          order_sn: order_snA,
          gateway: gatewayA,
          wap_return_url: wap_return_urlA,
        }).then((res: any) => {
          if (res.code == 0) {
            aliPay(res);
          }
        });
      } else {
        // 微信支付
        if (!localStorage.OPENID && route.query.openid) {
          localStorage.OPENID = route.query.openid;
        }
        gather.openid = isWechat ? localStorage.OPENID : "";
        if (isWechat && !localStorage.OPENID) {
          // 获取openid
          let url =
            window.location.origin +
            "/get_wx_info?url=" +
            encodeURIComponent(window.location.href);
          window.location.href = url;
        } else {
          orderPay({
            pay_type: pay_typeA,
            order_sn: order_snA,
            gateway: gatewayA,
            wap_return_url: wap_return_urlA,
            open_id: gather.openid,
          }).then((res: any) => {
            if (res) {
              // 微信H5
              if (!isWechat) {
                window.location.href =
                  res.data.option.mweb_url + wap_return_urlA;
                return;
              } else {
                // 微信内置
                wechatPay(res.data.option);
              }
            }
          });
        }
      }

const wechatPay = (result: object): void => {
      //封装请求微信支付接口数据
      var request_data = {
        appId: (result as any).appId,
        timeStamp: (result as any).timeStamp + "",
        nonceStr: (result as any).nonceStr,
        package: (result as any).package,
        signType: "MD5",
        paySign: (result as any).paySign,
      };
      if (typeof (window as any).WeixinJSBridge == "undefined") {
        if ((document as any).addEventListener) {
          (document as any).addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady(request_data),
            false
          );
        } else if ((document as any).attachEvent) {
          (document as any).attachEvent(
            "WeixinJSBridgeReady",
            onBridgeReady(request_data)
          );
          (document as any).attachEvent(
            "OnWeixinJSBridgeReady",
            onBridgeReady(request_data)
          );
        }
      } else {
        onBridgeReady(request_data);
      }
    };
    //微信方法
    const onBridgeReady = (request_data: object): void => {
      (window as any).WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        request_data,
        (res: any) => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            Notify({ type: "success", message: "支付成功" });
            router.push({
              path: "/mineSubject",
            });
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
          } else if (res.err_msg == "get_brand_wcpay_request:fail") {
          }
        }
      );
    };

 

支付宝支付方法

const aliPay = (res:any)=>{
    const div = document.createElement('div');
    div.innerHTML = res.data.option;  //res.data是返回的表单
    console.log('res.option',res.data.option);
    
    document.body.appendChild(div);
    (document as any).forms.alipaysubmit.submit();
}