在Vue项目开发过程中接入Paypal的简单应用

作者：Terry2020.08.13来源：Web前端之家浏览：10402评论:0

关键词：js Paypal

聊聊在Vue项目开发过程中接入Paypal的简单应用。

一、支付流程

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

二、实现方案

接入方式	优点	缺点	相关资料
在html中插入paypal的script脚本	实现方式比较简单	1、安全性问题：公司的client_id会暴露在代码中 2、引用的按钮样式比较难自定义	官方文档：https://developer.paypal.com/docs/checkout/integrate/#
使用官方提供的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的按钮，完成基本的支付操作，这个还是完全可以支持的。