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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Vue 样式绑定的实现方法
Jan 15 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现拖拽进度条
Mar 01 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个人网站架设连环讲(二)
2006/10/09 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python实现简单学生信息管理系统
2020/04/09 Python
简单了解如何封装自己的Python包
2020/07/08 Python
教师实习期自我鉴定
2013/10/06 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
党组织公开承诺书
2014/03/29 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
英文产品推荐信
2015/03/27 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android