vue-支付模块(pc/h5)集成实现

·  阅读 679
vue-支付模块(pc/h5)集成实现

场景:

在手机浏览器中打开微信支付,支付宝支付,在网页版浏览器打开支付实现方法,一套代码实现兼容

  • pc支付:主要实现方法是生成二维码
  • h5支付:主要是网页拉起支付宝或者微信App

参考的开发文档:

pc支付 :

  • 支付宝:开通当面付
  https://opensupport.alipay.com/support/helpcenter/95/201602482184?ant_source=opendoc_recommend
复制代码
  • 微信: Native调起支付API
 https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_4_4.shtml
复制代码

h5支付 :

  • 支付宝:开通手机网站支付
https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001001
复制代码
  • 微信: H5支付
https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4
复制代码

实现须知

主要实现原理是:

Snipaste_2021-10-15_11-44-54.png

参考页面

image.png

实现部分由三部分组成

  • 1.校验手机号-验证码设置
  • 2.选择支付方式
  • 3.立即购买按钮防抖

代码如下

  • 校验手机号-验证码设置

html结构:

     <div class="content_item">
        <div class="title">验证手机号</div>
        <van-form validate-first ref="phoneFrom">
          <van-field
            v-model.trim="phone"
            label="手机号"
            type="tel"
            placeholder="请输入"
            :rules="[
              { required: true, validator, message: '请输入正确的手机号' },
            ]"
          />
          <van-field
            v-model.trim="sms"
            center
            clearable
            label="验证码"
            placeholder="请输入"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="!sendCodeVisible ? sendCode() : ''"
              >
                {{ !sendCodeVisible ? "发送验证码" : `${count}s` }}</van-button
              >
            </template>
          </van-field>
        </van-form>
      </div>
复制代码

data结构

 data() {
    return {
      sendCodeVisible: false,
      count: 60,
      phone: "",
      sms: "",     
      timer: null,
    };
  },
复制代码

methods结构

  // 获取验证码
      getCode({ phone: this.phone }).then((res) => {
        if (res.code === 200) {
          this.sendCodeVisible = true;
          this.sms = "";
          var Codetimer;
          clearInterval(Codetimer);
          Codetimer = setInterval(() => {
            this.count--;
            if (this.count < 0) {
              clearInterval(Codetimer);
              this.sendCodeVisible = false;
              this.count = 60;
            }
          }, 1000);
        } else {
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          });
        }
复制代码

注意:要及时清除定时器

  destroyed() {
    clearTimeout(this.timer);
  },
复制代码
  • 立即购买按钮防抖
  1. 根据设备类型-选择不同的支付方式
  // 获取设备
        const isMobile = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        );
复制代码
        //  payType 支付方式。1:pc支付宝,2:pc微信 3: h5支付宝 4:h5微信
         switch (payType) {
              case 1:
                this.getQrCode(qrcode);
                break;
              case 2:
                this.getQrCode(qrcode);
                break;
              case 3:
                this.alipay(qrcode);
                break;
              case 4:
                this.wechatpay(qrcode);
                break;

              default:
                break;
            }
复制代码

可以进行方法封装

1.setQrCode 获取预支付接口返回的url生产qrcode,不断的轮询查询订单状态

qyOrder({
        orderId: this.orderId,
        payType: this.payWay === 0 ? "2" : "1",
      }).then((res) => {
        if (res.code === 200 && res.result === "FAILPAY") {
          // 发现支付没有完成, 设置一个定时器, 定时调用自己
          this.timer = setTimeout(() => {
            this.checkPayment();
          }, 2000);
        } else if (res.code === 200 && res.result === "SUCCESSPAY") {
          this.orderId = "";
          // 支付成功
          this.$router.push({
            path: "/payResults",
            query: {
              packageInfo: JSON.stringify(this.packageInfo),
            },
          });
        } else {
          Dialog.alert({
            message: res.message,
            theme: "round-button",
          });
        }
      });
复制代码

2.手机端支付 通过返回的url,直接跳转或者构造表单标签

  • 支付宝
    // h5端 支付宝支付
    alipay(from) {
      let divForm = document.querySelector("#alipay");
      if (divForm && divForm.length) {
        document.body.removeChild(divForm[0]);
      }
      const div = document.createElement("div");
      div.id = "alipay";
      div.innerHTML = from;
      document.body.appendChild(div);
      document.querySelector("#alipay").children[0].submit(); // 执行后会唤起支付宝
    },
复制代码
  • 微信--分为微信浏览器打开和一般浏览器打开
    // h5端 微信支付
    wechatpay(from) {
       let ua = navigator.userAgent.toLowerCase();
      let isWeixin = ua.indexOf("micromessenger") != -1;
      // 微信浏览器打开
      if (this.isWeixin) {
        调用微信支付WeixinJSBridge
      } else {
        window.location.replace(from);
      }
    },

复制代码

注意:微信支付需要在商户设置的同一域名打开

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改