用的是官方提供的dome，稍稍改了一下，话不多说直接上代码，可以直接用至于放在哪用，随便吧

<script setup>

import { ref, onMounted } from 'vue'

// 页面一开始加载就创建标签

onMounted(() => { -- -->

  // 在页面中创建script标签

  const script = document.createElement('script')

  script.src =

    'https://www.paypal.com/sdk/js?client-id=你的clientId'

  script.addEventListener('load', setLoaded)

  document.body.appendChild(script)

})

const paypalRef = ref(null) //

const setLoaded = () => {

  // 加载完成后初始化 PayPal 按钮

  window.paypal

    .Buttons({

      //初始化按钮

      style: {

        layout: 'vertical', //按钮样式

        color: 'gold', //颜色

        shape: 'pill', //

        label: 'checkout', //按钮文本

        tagline: false //

      },

      locale: 'zh_CN', //按钮的语言locale: 'en_US'

      createOrder: (data, actions) => {

        return actions.order.create({

          purchase_units: [

            {

              //名称

              description: '购买', // 更换实际订单描述

              amount: {

                //币种

                currency_code: 'USD', // 更换实际币种

                //金额

                value: 0.01 // 更换实际订单金额

              }

            }

          ]

        })

      },

      onApprove: (data, actions) => {

        // 用户支付成功回调

        return actions.order.capture().then((details) => {

          console.log('支付成功订单详情', details)

        })

      },

      // 取消付款   点击底部的取消并返回执行

      onCancel: function (data) {

        console.log(data, '用户取消支付并返回到网站')

      },

      // 用户点击付款按钮的时候执行

      onClick: function (data) {

        console.log(data, '用户点击付款按钮')

      }

    })

    .render(paypalRef.value)

}

</script>

<template>

  <div style="width: 400px" ref="paypalRef"></div>

</template>

<style lang="scss" scoped></style>

 

之前整理过uniapp对接paypal 过几天发上来