这次要跟大家分享的是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美金，可自行修改

（3）在开发环境中的My Apps&页面中创建应用，获取ID并请求

（4）获取ID并请求

页面操作按钮测试

（1）使用沙盒环境其他测试账号登录

（2）支付成功后支付页面自动关闭，您可以进入沙盒环境查看扣款记录。

五、结论

虽然我在这里给出了非常详细的流程，但还是有必要阅读官方文档。文档相当详细，但用英文阅读可能会有点压力。如果你有耐心，你会发现它还是不错的。我想指出的是，如果你在创建账户时遇到的情况与我不同，不要感到惊讶，因为它太神秘了，哈哈哈！

看完这篇关于Vue项目接入实现详解的文章，如果你觉得文章内容写得好，可以分享给更多的人。