北京华网天下

支付流程及实现方案解析：Paypal 按钮内部封装流程介绍

2024-08-03

来源：网络整理

Vue项目访问实现示例详解

更新时间：2020-06-04 14:30:15 作者：

本文主要介绍了Vue项目接入的详细实现示例，文中的示例代码非常详细，对大家的学习或者工作都有一定的参考价值，有需要的朋友可以跟随小编一起学习一下。

1. 付款流程

官网给出了封装在这个按钮内部的流程，整个流程只需要用户点击按钮，触发订单创建事件，然后我们监听用户支付成功的回调，获取订单ID并传给后端再次验证即可。

2.实施方案

访问方法优缺点相关信息

html 中插入脚本

实现起来相对简单

1. 安全问题：公司的

2. 引用的按钮样式难以定制

官方文档：#

更详细的解释：

使用官方 npm 包（有几个）

1.可以自定义，不需要使用官方的，可以在自己的按钮上绑定事件

2. 不会暴露

1.需要仔细阅读文档，开发会比较困难

2.有些需要和node一起开发

：

节点SDK：

使用其他人打包的 npm 包

1. 易于使用

2. 文档清晰

1. 可能存在无人维护的风险

2. 可定制部件不多

3.使用版本接口，官网使用的是v2接口，不过应该不影响

：

以上就是我目前总结的实现方案，如果你有更好的方案，欢迎在评论区告诉我~

3. 项目中的实施

由于我是在vue项目中实现的，经过考虑，别人封装的vue-可以满足开发需求，而且使用起来也比较简单，所以暂时选择了这个方案，接下来我们看一下代码实现！

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); } } }

以上就是我的代码实现过程，具体内容可以根据业务进行修改，实现起来还是比较简单的，如果只是想嵌入一个按钮完成基本的支付操作，这个是完全支持的。

4.沙盒环境账号申请流程

注册网上账户

（1）打开浏览器

（2）注册个人或公司账户。建议注册个人账户，所需信息比公司账户少，功能也差不多。

（3）填写相关信息，银行卡号可以暂时不填，创建完成后可以看到这个页面，沙盒环境跟这个页面很像，可以通过网址区分。

注册开发者账户

（1）打开浏览器，用刚刚创建的在线账号登录（如果时间间隔很近，就用默认登录），红框里的内容就是后面要用到的重点内容。

（2）进入页面，创建沙盒测试账号，默认会创建两个账号（1个企业账号，1个个人账号），我们也可以自己创建账号，最多可以创建5个账号。

登录沙盒环境

（1）使用测试账号登录。使用开发者环境的测试账号登录。

（2）使用红框里的账号密码登录沙盒环境，会看到类似线上页面，初始资金默认5000美金，可自行修改