一. 支付流程

用户点击按钮，触发创建订单事件，然后我们再监听用户支付成功的回调，拿到订单id传给后端，让后端再进行一次校验。

二. 选用组件

使用vue-paypal-checkout组件
github地址：[https://github.com/khoanguyen96/vue-paypal-checkout](url)

三. Nuxt引入vue-paypal-checkout组件

3.1 项目中添加npm包

npm install vue-paypal-checkout

3.2 创建脚本文件

//paypal.js
import Vue from 'vue'
import PayPal from 'vue-paypal-checkout'
Vue.component('paypal-checkout', PayPal)

如果是使用ts的小伙伴，要记得在.d.ts文件下声明

declare module 'vue-paypal-checkout'

3.3 在nuxt.config文件中声明

在声明时一定要注意，vue-paypal-checkout是在客户端运行的插件，要设置ssr:false 。

// nuxt.config.js
 plugins: [
    { src: '~/plugins/paypal.js', ssr: false }
  ],

完成这三部vue-paypal-checkout组件就以及引入到nuxt项目中了 #四. vue-paypal-checkout组件的使用下面是一个示例：示例中有两个值：sandbox（沙盒环境下client_id），production（线上环境client_id ）在下文中会做具体的说明，因为每一个示例的值都是不一样的。

<template>
  <no-ssr>
    <paypal-checkout
      amount="10.00"
      currency="USD"
      :client="credentials"
      env="sandbox"
      :button-style="buttonStyle"
      @payment-authorized="paymentAuthorized"
      @payment-completed="paymentCompleted"
      @payment-cancelled="paymentCancelled"
    />
  </no-ssr>
</template>
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class TextPayPal extends Vue {
  private credentials = {
    sandbox: '****', // 沙盒环境下client_id 标记（1）
    production: '***', // 线上环境client_id 标记（2）
  }

  private buttonStyle = {
    label: 'pay',
    size: 'small',
    shape: 'rect',
    color: 'blue',
  }

  paymentAuthorized(data: unknown) {
    // 授权完成的回调，可以拿到订单id
    console.log(data)
  }

  paymentCompleted(data: unknown) {
    // 用户支付完成的回调，可以拿到订单id
    console.log(data)
  }

  paymentCancelled(data: unknown) {
    // 用户取消交易的回调
    console.log(data)
  }
}
</script>