vue 对接 paypal 订阅和支付

一个是支付一个是订阅，写的时候尝试把他们放到一个里面，但是会报错，所以分开写了

我们的页面，前三个为订阅最后一个是支付，我把他们放到一个数组里面循环展示的，所以我们判断的时候只要判断id是否为4，如果是4那么就是支付别的就是订阅

进入页面的时候默认选中第一个，第一个是订阅，直接在onMounted里面去创建script标签，src就是订阅的值

根据你们的需求调整里面的参数和方法

// 这个就是支付或者订阅的按钮
<div id="paypal-button-container"></div>
<div id="paypal-button-subscription"></div>



const subscriptionSdk ='https://www.paypal.com/sdk/js?client-id=${申请的SDK}&vault=true&intent=subscription';
const paySkd ='https://www.paypal.com/sdk/js?client-id=${申请的SDK}&currency=USD';

onMounted(() => {
  // 创建script 标签 定义他们的id
  const scriptId = 'subscriptionSdk';
  let script = document.createElement('script');
  script.id = scriptId;
  script.src = subscriptionSdk;
  script.onload = () => {
    // 创建订阅按钮
    subscriptionButton();
  };
  document.body.appendChild(script);
});

// 点击切换 订阅 或者 支付
const subscriptionChange = (i) => {
   // 这个地方根据你们需求写
    ......
// 这个是切换函数 进行判断
  createPayPalButton();
};


const createPayPalButton = () => {
  // 定于不同id进行判断是订阅还是支付
  const scriptId = subscriptionId.value == 4 ? 'paySdk' : 'subscriptionSdk';
   // 切换的时候先查询时候存在 如果存在就不用执行下面的
  let script = document.getElementById(scriptId);
  if (script) return;
  script = document.createElement('script');
  script.id = scriptId;
  script.src = subscriptionId.value == 4 ? paySkd : subscriptionSdk;
  script.onload = () => {
    if (subscriptionId.value == 4) {
      payButton();
    } else {
      subscriptionButton();
    }
  };
  document.body.appendChild(script);
};

// 创建支付按钮
const payButton = () => {
  paypal
    .Buttons({
      // 按钮样式
      style: {
        layout: 'horizontal',
        color: 'blue',
        shape: 'rect',
        label: 'checkout',
        tagline: false,
        height: 40,
        borderRadius: 10,
      },
      createOrder: async (data, actions) => {
        // 这里调用后端创建订单接口 获取到订单id
        await createRechargeChange();
        // 然后 return 出去
        return thirdPayId.value;
      },
      // 只是paypal支付完后的回调 在这里面进行查询操作即可
      onApprove: async (data) => {
        // 调用后端接口查询是否支付成功
      },
      onCancel: function (data) {
        console.log(data, '用户取消支付并返回到网站');
      },
    })
    .render('#paypal-button-container');
};
// 创建订阅
const subscriptionButton = () => {
  paypal
    .Buttons({
      style: {
        layout: 'horizontal',
        color: 'blue',
        shape: 'rect',
        label: 'checkout',
        tagline: false,
        height: 40,
        borderRadius: 10,
      },
      createSubscription: async (data, actions) => {
        // 创建订单
        await createRechargeChange();
        // 这一步 plan_id 要传的是订阅id 这个id问后端要
        return actions.subscription.create({ plan_id: planId.value });
      },

      onApprove: async (data) => {
        await paySubscription({
          id: orderId.value,
          subscriberId: data.subscriptionID,
        });
        const loading = ElLoading.service({
          lock: true,
          text: t('正在查询订阅结果，请稍后'),
          background: 'rgba(0, 0, 0, 0.7)',
        });
        let requestCount = 0;
        const maxRequests = 5;
        intervalId.value = setInterval(async () => {
          if (requestCount < maxRequests) {
            requestCount += 1;
            // 查询订单状态接口
            await fetchData(loading);
          } else {
            loading.close();
            clearInterval(intervalId.value);
            ElMessage.error(t('订阅失败，稍后重试'));
          }
        }, 1500);
      },
      onCancel: function (data) {
        console.log(data, '用户取消支付并返回到网站');
      },
    })
    .render('#paypal-button-subscription');
};