vue pc端支付宝支付-前端需要做的事情

1.首先了解pc端支付宝支付的方式
官方传送门
这个主要是后端进行配置的时候看的文档
我们需要注意的是 qr_pay_mode

PC端支付宝支付的时候分为两种情况
1.生成二维码到页面里,用户进行扫码支付 -----前置模式

2.跳转到支付宝的页面里,用户扫码支付 -----跳转模式

前置模式的支付实现

步骤

1. 通过后端提供的接口获取支付宝的数据 —调用接口 获取支付宝的form数据 (最好返回一个此订单号)
2. 使用iframe 将form数据放在页面上—生成二维码
3. 用户扫码
4. 展示之后就设定定时器 请求支付结果----后端出一个接口查询这个支付结果做相应处理

实际操作

1.请求接口 获取支付宝返回的数据 一般是这个样子的

2.页面中使用 iframe 将form值渲染到页面上

		<iframe
            :srcdoc="form数据"
            frameborder="no"
            border="0"
            marginwidth="0"
            marginheight="0"
            scrolling="no"
            width="200"
            height="200"
            style="overflow: hidden"
          >
          </iframe>

就可以展示出来了

当二维码出来的时候 就需要接定时器 开始查询支付结果了

	// 查询支付状态
        this.timer = setInterval(() => {
          that.getStatus(res.data.out_trade_no);
        }, 2000);

//获取订单状态
getStatus(out_trade_no) {
      czstatus({
        out_trade_no,
      }).then((res) => {
        if (res.data.isok == 1) {
          this.$message.success("充值成功");
          //成功之后的相关请求
          this.getye();
          this.close();
        }
      });
    },

成功之后把定时器清除再加上相关操作就可以了

注意:注意清除定时器(当页面关闭,或者切换支付方式 等情况时)

前置模式的支付实现

步骤

1. 跟第一种一样 请求接口获取form数据
2. 跳转至支付宝支付页面
3. 用户扫码支付
4. 回调到原来的页面
5. 接收支付宝回调传的值 请求支付结果接口做操作

实际操作

1.请求接口 获取支付宝返回的数据 一般是这个样子的

2.获取到值之后跳转支付宝的支付页面

//xxxxx为请求到的form数据
 document.querySelector("body").innerHTML = xxxxx;
 document.forms[0].submit();

就跳转到支付宝页面了

用户扫完支付后跳转回之前的地址 这个回调地址需要从支付宝后台配置
返回的链接里会有一个out_trade_no的参数 将这个参数传给后端查询支付状态

接收参数

	created() {
    if (this.$route.query.out_trade_no) {
      this.getStatus(this.$route.query.out_trade_no);
    }
  },

getStatus就是请求后端获取支付状态 做相应的处理 和第一种情况一致

点个关注支持一下我吧