首页 > 其他分享 >Paypal最新版本 paypal-server-sdk 使用案例(前端 Vue3 + 后端Spring Boot )

Paypal最新版本 paypal-server-sdk 使用案例(前端 Vue3 + 后端Spring Boot )

时间:2024-11-28 21:00:00浏览次数:8  
标签:Paypal 前端 paypal 地址 文档 Vue3 sdk

背景

在项目中对接Paypal支付,一开始在网上查了好久,发现资料少,而且陈旧,甚至我都没弄清楚我应该哪个SDK。
我到 maven 中央仓库中,搜索 com.paypal.sdk,能查出不少结果,据我所知,至少有三个sdk可以从后端访问到Paypal:

  1. paypal-core:非常陈旧,2016年就停止更新了,但网上还有一些关于它的教程
  2. checkout-sdk:我一开始使用的sdk,访问的也是v2版本的接口,也对接成功了,可以使用,但最新更新的时间也停留在了2022年,应该会逐渐废弃掉
  3. paypal-server-sdk:是官网最新的服务端SDK,官方案例是配合前端js sdk,我咨询了Paypal官方人员,他们是推荐配合前端sdk一起使用的,但官网只有纯html和Reactjs的案例可以下载。Reactjs有单独的依赖包叫"@paypal/react-paypal-js",其他的结构化项目,用的包是"@paypal/paypal-js",统一放到ES Module的文档中。这本来没什么,可坑爹的是文档有错误,因此我创建了一个 Vue3+vite的项目,配合文档,写了一个Demo,一方面我自己记录一下,一方面希望能给其他朋友一些帮助

文档及示例地址

我的示例地址
如果大家有条件还是去看文档,以免时间长了,我写的这些可能已经过期了。
前端文档地址
服务端文档地址
官方示例下载地址


注意点

其实我觉得不需要运行,只要看看代码就能理解。但如果实在想要运行一下,请先前端的.env文件,后端地址的 application.properties,请替换自己的 PAYPAL_CLIENT_ID 和 PAYPAL_CLIENT_SECRET。然后正常装依赖,启动前端和后端就可以了。本来想写点啥,后来觉得实在太过简单没啥可写的,如果后面想写再补充吧。贴运行后的图糊弄一下哈,页面中用了两种加载Paypal按钮方式,其实只要使用一种就可以。加载到paypal-button-container 这个container是标准模式,可以快速集成,比较简单。加载到paypal-button-container2这种方式,其实灵活度更高,但难度更大,作为Demo就有点复杂了,需要的可以自行查询文档

吐槽一下

我本来以为 Paypal 资料少,是国内资料太少,后来去外面看了看,资料也是一塌糊涂,大量问题没有人回答,例如 PAYPAL_CLIENT_ID 放到前端是否安全,这个问题 Paypal 官方论坛就有人提过,但也是没人回答,后来咨询了官方人员,他说没问题,我也就释然了。
另外我之前都用另一个大论坛,可现在全是广告,真的无语。博客园这边确实是干净,干净到我都觉得有年代感,一些博客主题甚至让我联想到 QQ 空间,很神奇的感觉。

标签:Paypal,前端,paypal,地址,文档,Vue3,sdk
From: https://www.cnblogs.com/heheyixiao233/p/18575065

相关文章

  • Vue3 的基础使用
    Vue3的基础使用npminitvue@latestref赋值一个新的对象,那么响应式也会存在shallowRef只保留最顶层的响应式更新reactive赋值一个新的对象,失去响应性直接访问对象中的属性,当访问到某个响应式数组(Map这样的原生集合类型)中的ref元素时,不会解包shallowReactive只保留最......
  • vue3实现keep-alive一个组件(一个vue使用多个页面支持缓存)使用多个页面(多个路由)已解决
    代码<router-viewv-if="routerAlive"><template#default="{Component,route}"><keep-alive:include="getCaches"><component:is="formatComponentInstance(Component,route.name)......
  • vue3-其余新增API
    shallowRef创建一个响应式数据,但只对顶层属性进行响应式处理,只跟踪引用值的变化,不关心值内部的属性变化import{shallowRef}from"vue"importUserInfofrom"@/components/UserInfo.vue";letname=shallowRef("vue")letinfo=shallowRef({name:"html"})conso......
  • springboot毕设基于+Vue3的毕业生信息管理系统源码+论文+部署
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容一、研究背景随着信息技术的飞速发展,各行业的数字化转型不断深入。在教育领域,高校毕业生数量逐年增加,传统的毕业生信息管理方式已难以满足日益增长的需求。在......
  • vue3-组件通信
    Vue3组件通信和Vue2`的区别:移出事件总线,使用mitt代替vuex换成了pinia把.sync优化到了v-model里面把$listeners所有的东西,合并到$attrs$children被移除自定义事件(与vue2语法差异)自定义事件常用于子组件向父组件传递数据原生事件:特点的click、hover等自......
  • vue3-Pinia
    Pinia是Vue.js的一个状态管理库,用于在Vue应用程序中管理共享状态。它是Vuex的后继者,提供了一个简单、直观且灵活的方式来处理应用中的全局状态,比如用户登录信息、应用配置、购物车数据等。与Vuex相比,Pinia有更简洁的API和更好的类型支持(在Type-Script项目中),使......
  • qiankun+vite+vue3从零搭建一个微前端架构系统
    本文将记录一下从零搭建一个微前端架构系统,技术栈使用qiankun+vite+vue3,后面还会持续分享主应用与微应用通信,组件共享,性能优化等内容。qiankun官网:介绍-qiankun参考网站:MicroFrontends一、微前端架构介绍微前端是一种多个团队通过独立发布功能的方式来共同构建现......
  • [Vue] Typescript for Vue3 (defineProps, withDefaults, defineEmits)
    Defineacomponentwithpropsanddefualtpropsvalue<scriptsetuplang="ts">import{ref,onMounted}from'vue'importfetchCountfrom'../services/fetchCount'interfaceProps{limit:number,alertMessageOnLim......
  • vue2升级vue3
    vue2升级vue3针对../vue3-elm-master项目升级做的解析,该项目目前是webpack@1,vue@2.1.vue2的缺点,vue3的优势.vue2的劣势vue2的组件代码复用是用mixin,容易出现命名冲突,且无法解决业务逻辑的复用.vue2的mixin代码复用不好处理,本质是把mixin里的属性和方法直接赋值......
  • vue3手搓固钉组件
    #创作灵感    今天用固钉组件时发现element-ui的固钉会阻止移动端移动事件,我思来想去决定自己写一个固定组件得了实现思路        获取钉子的ref实例并监听window滚动事件,当window.scrollY等于钉子的offsetHeight,添加position:fixed和top:0到钉子上,就能强......