vue 对接 paypal 订阅和支付

news2025/4/21 14:13:09

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

 我们的页面,前三个为订阅最后一个是支付,我把他们放到一个数组里面循环展示的,所以我们判断的时候只要判断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');
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2321709.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于javaweb的SpringBoot实习管理系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…

流影---开源网络流量分析平台(一)(小白超详细)

目录 流影介绍 一、技术架构与核心技术 二、核心功能与特性 流影部署 流影介绍 一、技术架构与核心技术 模块化引擎设计 流影采用四层模块化架构&#xff1a;流量探针&#xff08;数据采集&#xff09;、网络行为分析引擎&#xff08;特征提取&#xff09;、威胁检测引擎&…

Oracle 数据库安全评估(DBSAT)简明过程

下载DBSAT 从这里下载。 实际是从MOS中下载&#xff0c;即&#xff1a;Oracle Database Security Assessment Tool (DBSAT) (Doc ID 2138254.1)。 最新版本为3.1.0 (July 2024)&#xff0c;名为dbsat.zip&#xff0c;近45MB。 $ ls -lh dbsat.zip -rw-rw-r-- 1 oracle oins…

【T2I】Divide Bind Your Attention for Improved Generative Semantic Nursing

CODE: GitHub - boschresearch/Divide-and-Bind: Official implementation of "Divide & Bind Your Attention for Improved Generative Semantic Nursing" (BMVC 2023 Oral) ABSTRACT 新兴的大规模文本到图像生成模型&#xff0c;如稳定扩散(SD)&#xff0c;已…

【2025】基于springboot+uniapp的企业培训打卡小程序设计与实现(源码、万字文档、图文修改、调试答疑)

基于 Spring Boot uniapp 的企业培训打卡小程序设计与实现 系统功能结构图如下&#xff1a; 一、课题背景 在当今快节奏的商业环境中&#xff0c;企业培训对于员工的成长和企业的发展至关重要。为了满足企业对高效培训管理和员工便捷学习的需求&#xff0c;基于 Spring Boot …

探索AI的无限可能,体验智能对话的未来,大模型 API 演示

探索AI的无限可能&#xff0c;体验智能对话的未来&#xff0c;大模型 API 演示 效果展示&#xff1a; 项目概述 这是一个基于 Vue 3 TypeScript Vite 构建的 Vista AI 演示项目&#xff0c;旨在提供一个简洁易用的界面来展示 Vista AI 大语言模型的能力。项目包含 API 演示…

26考研——图_图的存储(6)

408答疑 文章目录 二、图的存储图的存储相关概念邻接矩阵存储方式邻接矩阵的定义顶点的度计算邻接矩阵的特点邻接矩阵的局限性 应用场景邻接矩阵的幂次意义&#xff08;了解即可&#xff09; 邻接表存储方式邻接表定义邻接表结构邻接表的特点 邻接矩阵和邻接表的适用性差异十字…

datawhale组队学习--大语言模型—task4:Transformer架构及详细配置

第五章 模型架构 在前述章节中已经对预训练数据的准备流程&#xff08;第 4 章&#xff09;进行了介绍。本章主 要讨论大语言模型的模型架构选择&#xff0c;主要围绕 Transformer 模型&#xff08;第 5.1 节&#xff09;、详细 配置&#xff08;第 5.2 节&#xff09;、主流架…

《TCP/IP网络编程》学习笔记 | Chapter 21:异步通知 I/O 模型

《TCP/IP网络编程》学习笔记 | Chapter 21&#xff1a;异步通知 I/O 模型 《TCP/IP网络编程》学习笔记 | Chapter 21&#xff1a;异步通知 I/O 模型同步与异步同步异步对比同步 I/O 的缺点异步 I/O 的优点 理解异步通知 I/O 模型实现异步通知 I/O 模型WSAEventSelect 函数和通知…

Qt6相对Qt5的主要提升(AI总结)

我&#xff1a; Qt 6 相对于5 有哪些新功能&#xff1f; Qt 6 相对于 Qt 5 有诸多新功能和改进&#xff0c;以下是主要的新增特性&#xff1a; 1. 架构和核心库的重构 模块化设计&#xff1a;Qt 6 采用了更加灵活的模块化设计&#xff0c;开发者可以按需引入必要的功能模块&a…

MyBatis操作数据库进阶——动态SQL

动态 SQL 是根据程序运行时的条件灵活生成不同 SQL 语句‌的技术。它的核心目的是在不修改代码‌ 的前提下&#xff0c;通过条件判断、循环等逻辑&#xff0c;动态拼接 SQL 片段&#xff0c;解决传统 SQL 语句死板、难以应对复杂业务场景的问题。 一、<if> 标签 先来观…

使用LLama-Factory的简易教程(Llama3微调案例+详细步骤)

引言&#xff1a;一套快速实现 Llama3 中文微调的教程 主要参考&#xff1a;胖虎遛二狗的 B 站教学视频《【大模型微调】使用Llama Factory实现中文llama3微调》 ✅ 笔者简介&#xff1a;Wang Linyong&#xff0c;西工大&#xff0c;2023级&#xff0c;计算机技术 研究方向&am…

LabVIEW发电平台数据采集系统

本文详细介绍了基于LabVIEW的摇臂式波浪发电平台数据采集系统的设计与实现。通过整合LabVIEW软件与多种传感器技术&#xff0c;本系统能够有效提升数据采集的准确性和效率&#xff0c;为波浪能的利用和发电设备的优化提供科学依据。 ​ 项目背景 随着全球能源需求增长和环境保…

气象可视化卫星云图的方式:方法与架构详解

气象卫星云图是气象预报和气候研究的重要数据来源。通过可视化技术,我们可以将卫星云图数据转化为直观的图像或动画,帮助用户更好地理解气象变化。本文将详细介绍卫星云图可视化的方法、架构和代码实现。 一、卫星云图可视化方法 1. 数据获取与预处理 卫星云图数据通常来源…

【蓝桥杯】每日练习 Day7

目录 前言 领导者 分析 代码 空调 分析 代码 面包店 分析 代码 前言 今天是第一部分的最后一天&#xff08;主打记忆恢复术和锻炼思维&#xff09;&#xff0c;从明天开始主播会逐步更新从位运算到dp问题的常见题型。 领导者&#xff08;分类讨论&#xff09; 分析 …

本地部署Stable Diffusion生成爆火的AI图片

直接上代码 Mapping("/send") Post public Object send(Body String promptBody) { JSONObject postSend new JSONObject(); System.out.println(promptBody); JSONObject body JSONObject.parseObject(promptBody); List<S…

从国家能源到浙江交通投资,全息技术在能源交通领域的创新应用

一、3D全息技术行业应用参数及设计制作要求 全息投影 全息投影技术通过激光器、全息片等设备&#xff0c;将物体的三维信息记录下来&#xff0c;并在特定条件下再现。应用参数包括投影距离、投影面积、投影亮度等。设计制作要求&#xff1a;高清晰度、高亮度、低噪音、稳定性好…

PageHiOffice网页组件(WebOffice文档控件)开发集成技巧专题一

PageHiOffice网页组件作为最新一代的WebOffice文档控件&#xff0c;这是目前市场上唯一能做到在Chrome等最新版浏览器中实现内嵌网页运行的商用文档控件&#xff0c;是OA及ERP等系统处理各种文档的福音。从发布到完善已经超过3年&#xff0c;不管是功能性还是稳定性都已经有了长…

本地安装deepseek大模型,并使用 python 调用

首先进入 ollama 官网 https://ollama.com/点击下载 下载完成后所有都是下一步&#xff0c;就可以 点击搜索 Models &#xff1a; https://ollama.com/search然后点击下载&#xff1a; 选择后复制: ollama run deepseek-r1:32b例如&#xff1a; 让它安装完成后&#xff1…

Android:蓝牙设置配套设备配对

一、概述 在搭载 Android 8.0&#xff08;API 级别 26&#xff09;及更高版本的设备上&#xff0c;配套设备配对会代表您的应用对附近的设备执行蓝牙或 Wi-Fi 扫描&#xff0c;而不需要 ACCESS_FINE_LOCATION 权限。这有助于最大限度地保护用户隐私。使用此方法执行配套设备&am…