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 05 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
小程序实现列表倒计时功能
Jan 29 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
许愿墙中用到的函数
2006/10/07 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
python实现稀疏矩阵示例代码
2017/06/09 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python 实现生成均匀分布的点
2019/12/05 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
工伤赔偿协议书
2014/04/15 职场文书
老师对学生的评语
2014/04/18 职场文书
拓展策划方案
2014/06/03 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
培训督导岗位职责
2015/04/10 职场文书
离职证明格式样本
2015/06/12 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技