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陷阱题
Feb 07 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
Laravel下生成验证码的类
2017/11/15 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python 中字符串拼接的多种方法
2018/07/30 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
详解Python用户登录接口的方法
2019/04/17 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
期末总结的个人自我评价
2013/11/02 职场文书
办公室文书岗位职责
2013/12/16 职场文书
禁止酒驾标语
2014/06/25 职场文书
员工年终自我评价
2014/09/14 职场文书
交通事故和解协议书
2015/01/27 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
Python sklearn分类决策树方法详解
2022/09/23 Python