Vue项目接入Paypal实现示例详解


Posted in Javascript onJune 04, 2020

一、支付流程

在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验。

二、实现方案

接入方式 优点 缺点 相关资料
在html中插入paypal的script脚本 实现方式比较简单 1、安全性问题:公司的client_id会暴露在代码中 2、引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integrate/# 更详细的说明:https://3water.com/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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Paypal支付不完全指北
Jun 04 #Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 #Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 #Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 #Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 #Javascript
微信小程序实现watch监听
Jun 04 #Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
You might like
PHP 编程安全性小结
2010/01/08 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
js日期联动示例
2014/05/02 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
简单使用webpack打包文件的实现
2019/10/29 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
详解Python字典的操作
2019/03/04 Python
Python生成词云的实现代码
2020/01/14 Python
python实现查找所有程序的安装信息
2020/02/18 Python
django中ImageField的使用详解
2020/12/21 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
企业年检委托书范本
2014/10/14 职场文书
正规欠条模板
2015/07/03 职场文书
Golang并发工具Singleflight
2022/05/06 Golang