Vue项目接入Paypal详解

1、支付流程

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

2、实现方案

接入方式	优势	缺点	相关资料
在html中插入paypal的script脚本	实现方式比较简单	一、安全性问题：公司的client_id会暴露在代码中 二、引用的按钮样式比较难自定义	官方文档：https://developer.paypal.com/docs/checkout/integrate/# 更详细的说明：https://segmentfault.com/a/1190000021366504
使用官方提供的npm包（有好几个）	一、能够自定义，不须要使用官方给定的button，能够在本身的按钮上绑定建立事件 二、不会把client_id暴露出来	一、须要仔细阅读文档，开发难度会大一点 二、有的须要配合node一块儿开发	github：https://github.com/paypal/paypal-checkout-components node-sdk：https://github.com/paypal/Pay...
使用别人封装好的npm包	一、使用起来方便 二、文档比较清晰	一、可能存在没人维护的风险 二、可自定义的部分很少 三、使用的是Paypalv1版接口，官网上用的是v2接口，可是应该不影响	github：https://github.com/khoanguyen96/vue-paypal-checkout

这是我目前总结的几种实现方案，若是有更好的方案，欢迎在评论区告诉我～

3、项目中实现

  因为我是在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的按钮，完成基本的支付操做，这个仍是彻底能够支持的。

4、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）付款成功后，付款页面会自动关闭，能够去沙盒环境看一下扣款记录

5、总结

  虽然我这里给了很详细的流程，但看官方文档仍是必要的，Paypal的文档挺详细的，只是全英文看起来可能比较有压力，耐心一点会发现仍是不错的。说明一点，若是在建立帐号的时候有和我不同的状况，不用惊讶，由于Paypal就是这样神秘的，哈哈哈！好了，若是以为本文对你有帮助的话，就请给我一个👍吧，感谢你们～