PayPal H5支付组件

最近研究了一下PayPal H5支付 测试代码如下

<template lang="pug">
  //- Title: H5 PayPal 支付 组件
  .paypal.flex-cc
    #loading
      van-loading#loading(size='36' type='spinner' color='#666')
    #paypal-container
      .money
        span ￡
        span {{$route.query.totalAmount}}
      #paypal-payment-button
</template>

<script>
import Cookies from 'js-cookie'

export default {
  name: 'paypal',
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {
    // 创建PayPal支付
    this.createPayPal()
  },
  methods: {
    // 创建PayPal支付
    createPayPal() {
      // clientId 客户端ID & currency 支付货币种类
      const { clientId, currency } = this.$route.query
      // 创建script标签，引入PayPal SDK文件
      let script = document.createElement('script')
      script.type = 'text/javascript'
      // clientId
      script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&disable-funding=credit,card&currency=${currency}`
      // 添加元素到head
      document.getElementsByTagName('head')[0].appendChild(script)

      // 引入成功
      script.onload = () => {
        console.log('js资源已加载成功了')
        // 创建支付按钮
        this.createPayPalButton()
      }
      // 引入失败
      script.onerror = () => {
        console.log('js资源加载失败了，返回原生')
      }
    },
    // 创建支付按钮
    createPayPalButton() {
      const BASE_API_URL = process.env.VUE_APP_BASE_API // 请求根路径
      const Authorization = Cookies.get('Authorization')
      const { payId } = this.$route.query
      // 创建script标签
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.text = `
        paypal.Buttons({
          style : {
            layout: 'vertical',
            color: 'black',
            shape: 'rect',
            label: 'checkout',
            tagline: false
          },
          onInit: () => {
            // 支付按钮加载完成 通知原生关闭loading
            console.log('--------1.支付按钮加载完成 关闭loading--------')
            // 自动点击 执行支付
            console.log('--------2.自动点击 执行支付--------')
            // 如果按钮获取到 就 自动执行点击 否则显示按钮
            const paypalButton = window.frames[1].document.querySelector('.paypal-button')
            if (paypalButton) paypalButton.click()
            else {
              document.querySelector('#paypal-container').style.display = 'block'
              document.querySelector('#loading').style.display = 'none'
            }
          },
          createOrder: function (data, actions) {
            return fetch('${BASE_API_URL}api/payment/paypal/v2/create', {
                    method: 'post',
                    headers: {
                      'content-type': 'application/json',
                      'Authorization': '${Authorization}',
                    },
                    body: JSON.stringify({
                      payId: '${payId}',
                    })
                  }).then(function (res) {
                    return res.json();
                  }).then(function (data) {
                    console.log('--------3. 获取支付ID-------- payId: ', data.data)
                    if (!data.data) alert('retCode: ' + data.retCode + '   message: ' + data.message)
                    else {
                      document.querySelector('#paypal-container').style.display = 'none'
                      document.querySelector('#loading').style.display = 'block'
                    }
                    return data.data;
                  });
          },
          onApprove: function (data, actions) {
            return fetch('${BASE_API_URL}api/payment/paypal/v2/capture', {
                    method: 'POST',
                    headers: {
                      'content-type': 'application/json',
                      'Authorization': '${Authorization}',
                    },
                    body: JSON.stringify({
                      orderID: data.orderID,
                    })
                }).then(function (res) {
                  return res.json();
                }).then(function (details) {
                  if (details.error === 'INSTRUMENT_DECLINED') {
                    return actions.restart();
                  }
                  console.log("--------4.创建订单Success--------")
                  console.log("--------5.打开Loading--------")
                  return fetch('${BASE_API_URL}api/payment/paypal/v2/order', {
                    method: 'post',
                    headers: {
                      'content-type': 'application/json',
                      'Authorization': '${Authorization}',
                    },
                    body: JSON.stringify({
                      orderID: data.orderID
                    })
                  }).then(function (res) {
                    return res.json();
                  }).then(function (ret) {
                    console.log(ret.retCode);
                    if (ret.retCode != 200) {
                      // 支付失败，跳转到支付失败页 todo
                      console.log('--------6.支付失败 返回原生--------')
                      return;
                    }
                    // 跳转到支付成功页 todo
                    console.log('--------6.支付成功 返回原生--------')
                  });
                });
          },
          onCancel: function (data) {
            // 跳回原生 todo
            console.log('--------7.点击取消 返回原生--------')
          }
        }).render('#paypal-payment-button')
      `
      // 引入script
      document.getElementsByTagName('head')[0].appendChild(script)
    },
  },
}
</script>

<style scoped lang="stylus">
.paypal {
  width 100%
  height 100vh
  flex-direction column
  background #F5F5F5
}

#paypal-container {
  width calc(100% - 40px)
  display none
  .money {
    font-size 26px
    font-weight 700
    text-align center
    margin-bottom 150px

    span:last-child {
      font-size 40px
    }
  }
}
</style>