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

2024-02-10 00:52:14

一、支付流程

在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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

php与paypal整合方法

我晕,最近这个用paypal付款的功能搞了我2天,还没搞完.郁闷死了. 先做个笔记,把已经搞定的部分写下来,省的以后忘了. 1 注册SandBox账号,并且建立两个虚拟账号,可以选择自动建立的那一项.一个buyer,一个seller.以供开发的时候测试使用. 2 实现快速购买的代码.链接暂时指向SandBox便于开发时的测试.以后再改成正式的. 复制代码代码如下: if(!defined("_f_afficherButtonPayPal")) { define("_f_a
zen cart实现订单中增加paypal中预留电话的方法

本文实例讲述了zen cart实现订单中增加paypal中预留电话的方法.分享给大家供大家参考,具体如下: 在PayPal的IPN返回值中联系电话是 contact_phone, 前提是你帐户设定了买家在付款时预留电话,如果没有要求的话,该值默认是不会返回的. 但在zen cart的PAYPAL的支付插件里是不获取这个信息的,需要手动修改PAYPAL的程序.下面我们就修改: 一.在 paypal 表中增加 contact_phone 字段 ALTER TABLE `paypal` ADD `co
解析PayPal支付接口的PHP开发方式

申请PayPal注册网址:https://www.paypal.com/ paypal接口与其它接口有些不同,稍微复杂一点. 其实银行接口也算是一个站点的插件. 所谓paypal ipn(Instant Payment Notification),就是Paypal开发的一种能主动通知第三方卖家系统交易状态的一种机制.IPN的原理很简单,就是当产生了一个交易之后, 交易状态发生变化时,如用户已经付款.或者退款.撤销时,Paypal利用常用的HTTP POST方式,将交易的一些变量提交给网站的某个页
网站用php实现paypal整合方法

所以今天我就来讲讲如何将你的网站和paypal进行整合. 首先,去paypal申请一个号吧,资料都补充完整之后,我们就可以开始行动乐,对了,申请paypal时,要申请那种可以接受别人付款的帐号. 接下来,我们就真正开始paypal与网站的整合了. 其实,paypal有提供傻瓜式的付款按钮创建方式,但一般情况下我们不用,因为我们要根据自己网站的实际情况来写customized的付款按钮.先来一段代码: 复制代码代码如下: <form action="https://www.sandbox.
PHP整合PayPal支付

简单整理一下PHP项目整合PayPal支付功能. 一.表单的构建: <form method="post" name="form" action="https://www.paypal.com/cgi-bin/webscr"> <input type="hidden" name="rm" value="2"/> <input type="hidde
PHP中集成PayPal标准支付的实现方法分享

PayPal支付功能其实一直在更新文档和接口,这里说的是一个简单的支付功能大概流程如下 1,在网站的结账页面,设置一个提交到PayPal网站的form,里面有一些金额,商品名称,商家收款账号.结账成功后返回URL等内容, 2,用户结账时,通过点击'使用PayPal结账'的按钮到达PayPal的结账页面,输入自己的PayPal用户名和密码并确认支付 3,PayPal会根据是否支付成功来决定返回网站的哪个页面,并在后台对网站的某个页面发起post请求,这个动作称作IPN,告诉网站这笔付款的到账情况,
php实现paypal 授权登录

php实现paypal 授权登录 <?php /** * @project paypal login * @author jiangjianhe * @date 2015-04-03 */ class paypallogin { //沙箱token链接 private $_sanbox_oauth2_auth_uri = 'https://www.sandbox.paypal.com/webapps/auth/protocol/openidconnect/v1/authorize'; priva
Paypal实现循环扣款（订阅）功能

起因业务需求要集成Paypal,实现循环扣款功能,然而百度和GOOGLE了一圈,除官网外,没找到相关开发教程,只好在Paypal上看,花了两天后集成成功,这里对如何使用Paypal的支付接口做下总结. Paypal现在有多套接口: 通过Braintree(后面会谈Braintree)实现Express Checkout; 创建App,通过REST Api的接口方式(现在的主流接口方式); NVP/SOAP API apps的接口(旧接口); Braintree的接口 Braintree是Pay
Paypal支付不完全指北

啥都不说,先吐槽 Paypal 真心坑爹,跟国内支付完全没法比,能不接入就不接入吧!!! 准备工作重要事情 Paypal下单支付后,需要主动跟paypal确认收款(capture),否则该笔订单并不是完成状态!!! 账号自己前往Paypal develop注册一个吧,注意区分沙箱(sandbox)和正式(live)账号即可. 用沙盒账号开发,还可以创建多个沙盒的paypal账号,可以用于沙盒测试支付. 下单方式跟国内的支付宝和微信有区别,paypal可以直接在客户端下单. 支持客服端.服务
paypal即时到账php实现代码

http://paypal.ebay.cn/integrationcenter/list__resource_2.html 中文php开发简介:http://www.paypal-china.org/wangzhai/197.html 以下是ecshop中paypal的支付代码这段代码是向paypal支付接口提交的 {{{ <form target="_blank" method="post" action="https://www.paypal.
php购物网站支付paypal使用方法

详细参考: https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_Appx_websitestandard_htmlvariables 定义常量paypalurl const PAYPAL_URL = 'https://www.sandbox.paypal.com/'; 将要传送的数据记录为一个数组 $paypalData = array(

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

相关推荐

随机推荐