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 标签 定义他们的idconst 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) => {// 这里调用后端创建订单接口 获取到订单idawait 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');
};