Vue项目接入Paypal实现示例详解
一、支付流程
在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验。
二、实现方案
接入方式 | 优点 | 缺点 | 相关资料 |
---|---|---|---|
在html中插入paypal的script脚本 | 实现方式比较简单 | 1、安全性问题:公司的client_id会暴露在代码中 2、引用的按钮样式比较难自定义 |
官方文档:https://developer.paypal.com/docs/checkout/integrate/# 更详细的说明:https://www.jb51.net/article/188049.htm |
使用官方提供的npm包(有好几个) | 1、可以自定义,不需要使用官方给定的button,可以在自己的按钮上绑定创建事件 2、不会把client_id暴露出来 |
1、需要仔细阅读文档,开发难度会大一点 2、有的需要配合node一起开发 |
github:https://github.com/paypal/paypal-checkout-components node-sdk:https://github.com/paypal/Pay... |
使用别人封装好的npm包 | 1、使用起来方便 2、文档比较清晰 |
1、可能存在没人维护的风险 2、可自定义的部分不多 3、使用的是Paypalv1版接口,官网上用的是v2接口,但是应该不影响 |
github:https://github.com/khoanguyen96/vue-paypal-checkout |
这是我目前总结的几种实现方案,如果有更好的方案,欢迎在评论区告诉我~
三、项目中实现
由于我是在vue项目实现,经过考虑,别人封装的vue-paypal-checkout库可以满足开发需求,而且使用起来比较简单,所以暂时选择采取这个方案,接下来我们看看代码实现吧!
npm install vue-paypal-checkout
import PayPal from 'vue-paypal-checkout' export default { data() { return { credentials: { sandbox: '填写沙箱环境client_id', production: '填写线上环境client_id' }, buttonStyle: { label: 'pay', size: 'small', shape: 'rect', color: 'blue' } } }, components: { PayPal }, methods: { paymentAuthorized (data) { // 授权完成的回调,可以拿到订单id console.log(data); }, paymentCompleted (data) { // 用户支付完成的回调,可以拿到订单id console.log(data); }, paymentCancelled (data) { // 用户取消交易的回调 console.log(data); } } }
<PayPal amount="10.00" // 付款的钱数 currency="USD" // 货币种类,默认为美元 :client="credentials" // client_id认证信息 env="sandbox" // 指定环境,默认为线上,也就是production :button-style="buttonStyle" // 自定义按钮样式 @payment-authorized="paymentAuthorized" @payment-completed="paymentCompleted" @payment-cancelled="paymentCancelled" > </PayPal>
以上就是我的代码实现过程,具体内容可以根据业务来修改,实现起来还是蛮简单的,如果只是想嵌入Paypal的按钮,完成基本的支付操作,这个还是完全可以支持的。
四、Paypal沙箱环境账户申请流程
注册Paypal线上账户
(1)浏览器打开https://www.paypal.com/
(2)注册一个账号,个人和企业都行。推荐注册个人账户,比企业账户要填的信息少,功能差别不大
(3)填写相关信息,银行卡号暂时可以先不填,创建完成后就可以看到这个页面,沙箱环境和这个页面长得很像,可以通过网页地址进行区分
注册Paypal开发者账号
(1)浏览器打开https://developer.paypal.com/ ,用刚刚创建的线上账户登录一下(如果时间隔得很近,会默认登录),红色框中是后面会重点用到的内容
(2)进入Accounts页面,创建沙箱测试账户,默认会创建两个账户(1个企业账户,1个个人账户),我们也可以自己创建,最多可以创建5个
登录沙箱环境
(1)用测试账号登录https://www.sandbox.paypal.com ,使用开发者环境的测试账号登录
(2)用红框中的账号和密码登录沙箱环境,就可以看到一个和线上类似的页面,初始资金默认为$5000,可以自行修改
(3)在开发环境下的My Apps & Credentials页面下创建应用,拿到Client ID和Secret去请求Access token
(4)拿Client ID和Secret去请求Access token
页面操作按钮进行测试
(1)登录刚刚沙盒环境的另外一个测试账户
(2)付款成功后,付款页面会自动关闭,可以去沙盒环境看一下扣款记录
五、总结
虽然我这里给了很详细的流程,但看官方文档还是必要的,Paypal的文档挺详细的,只是全英文看起来可能比较有压力,耐心一点会发现还是不错的。说明一点,如果在创建账号的时候有和我不一样的情况,不用惊讶,因为Paypal就是这样神秘的,哈哈哈!
到此这篇关于Vue项目接入Paypal实现示例详解的文章就介绍到这了,更多相关Vue接入Paypal内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02