一、支付流程
一、支付流程一、支付流程在paypal的官网上给出了这个按钮内部封装的流程，整个流程只需要用户点击按钮，触发创建订单事件，然后我们再监听用户支付成功的回调，拿到订单id传给后端，让后端再进行一次校验。二、实现方案二、实现方案二、实现方案






接入方式

优点

缺点

相关资料









在html中插入paypal的script脚本

实现方式比较简单

1、安全性问题：公司的client_id会暴露在代码中

2、引用的按钮样式比较难自定义

官方文档：https://developer.paypal.com/docs/checkout/integrate/#

更详细的说明：https:///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








接入方式

优点

缺点

相关资料





接入方式

优点

缺点

相关资料

接入方式优点缺点相关资料



在html中插入paypal的script脚本

实现方式比较简单

1、安全性问题：公司的client_id会暴露在代码中

2、引用的按钮样式比较难自定义

官方文档：https://developer.paypal.com/docs/checkout/integrate/#

更详细的说明：https:///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





在html中插入paypal的script脚本

实现方式比较简单

1、安全性问题：公司的client_id会暴露在代码中

2、引用的按钮样式比较难自定义

官方文档：https://developer.paypal.com/docs/checkout/integrate/#

更详细的说明：https:///article/188049.htm

在html中插入paypal的script脚本实现方式比较简单1、安全性问题：公司的client_id会暴露在代码中

2、引用的按钮样式比较难自定义官方文档：https://developer.paypal.com/docs/checkout/integrate/#

更详细的说明：https:///article/188049.htmhttps://developer.paypal.com/docs/checkout/integrate/#https:///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、可以自定义，不需要使用官方给定的button，可以在自己的按钮上绑定创建事件

2、不会把client_id暴露出来1、需要仔细阅读文档，开发难度会大一点

2、有的需要配合node一起开发github：https://github.com/paypal/paypal-checkout-components

node-sdk：https://github.com/paypal/Pay...https://github.com/paypal/paypal-checkout-componentshttps://github.com/paypal/Pay...

使用别人封装好的npm包

1、使用起来方便

2、文档比较清晰

1、可能存在没人维护的风险

2、可自定义的部分不多

3、使用的是Paypalv1版接口，官网上用的是v2接口，但是应该不影响

github：https://github.com/khoanguyen96/vue-paypal-checkout

使用别人封装好的npm包1、使用起来方便

2、文档比较清晰1、可能存在没人维护的风险

2、可自定义的部分不多

3、使用的是Paypalv1版接口，官网上用的是v2接口，但是应该不影响github：https://github.com/khoanguyen96/vue-paypal-checkouthttps://github.com/khoanguyen96/vue-paypal-checkout这是我目前总结的几种实现方案，如果有更好的方案，欢迎在评论区告诉我～三、项目中实现
三、项目中实现三、项目中实现由于我是在vue项目实现，经过考虑，别人封装的vue-paypal-checkout库可以满足开发需求，而且使用起来比较简单，所以暂时选择采取这个方案，接下来我们看看代码实现吧！
npm install 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);

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

}
}
}
amount="10.00" // 付款的钱数
currency="USD" // 货币种类，默认为美元
:client="credentials" // client_id认证信息
env="sandbox" // 指定环境，默认为线上，也就是production
:button-style="buttonStyle" // 自定义按钮样式
@payment-authorized="paymentAuthorized"
@payment-completed="paymentCompleted"
@payment-cancelled="paymentCancelled"
>


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沙箱环境账户申请流程注册Paypal线上账户
注册Paypal线上账户（1）浏览器打开https://www.paypal.com/https://www.paypal.com/（2）注册一个账号，个人和企业都行。推荐注册个人账户，比企业账户要填的信息少，功能差别不大（3）填写相关信息，银行卡号暂时可以先不填，创建完成后就可以看到这个页面，沙箱环境和这个页面长得很像，可以通过网页地址进行区分注册Paypal开发者账号
注册Paypal开发者账号（1）浏览器打开https://developer.paypal.com/ ，用刚刚创建的线上账户登录一下（如果时间隔得很近，会默认登录），红色框中是后面会重点用到的内容https://developer.paypal.com/（2）进入Accounts页面，创建沙箱测试账户，默认会创建两个账户（1个企业账户，1个个人账户），我们也可以自己创建，最多可以创建5个登录沙箱环境
登录沙箱环境（1）用测试账号登录https://www.sandbox.paypal.com ，使用开发者环境的测试账号登录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就是这样神秘的，哈哈哈！