如何在Vue 3的script setup中创建PayPal按钮？

先澄清你之前的疑问： #

• 你贴的第3段代码确实是Angular代码，里面的@ng.core.Component、NgModule都是Angular的核心语法，和Vue无关。
• 第4段代码是Vue2的写法，用了Vue2的全局组件注册和选项式API，不适用于Vue3的script setup。

Vue3 Script Setup 实现步骤 #

在父blade已引入PayPal CDN的前提下，按以下方式写组件：

<script setup>
import { onMounted, ref } from 'vue'

// 可根据业务动态修改订单金额
const amount = ref('10.00')

// 创建订单逻辑
const createOrder = (data, actions) => {
  return actions.order.create({
    purchase_units: [{
      amount: {
        value: amount.value
      }
    }]
  })
}

// 订单批准后的处理，直接捕获订单完成付款
const onApprove = (data, actions) => {
  return actions.order.capture().then(details => {
    console.log('付款成功，订单详情：', details)
    // 这里添加付款成功后的业务逻辑，比如跳转成功页、更新订单状态等
  })
}

// 付款错误处理
const onError = (err) => {
  console.error('付款出错：', err)
  // 这里可跳转错误页或提示用户
}

onMounted(() => {
  // 确保PayPal SDK加载完成后，渲染按钮到指定容器
  if (window.paypal) {
    paypal.Buttons({
      createOrder,
      onApprove,
      onError
    }).render('#paypal-button-container')
  }
})
</script>

<template>
  <div class="checkout">
    <!-- PayPal按钮渲染容器 -->
    <div id="paypal-button-container"></div>
  </div>
</template>

额外说明： #

1. 无需使用paypal.Buttons.driver("vue", window.Vue)——这是针对Vue2的适配方案，Vue3直接用原生渲染方式更可靠。
2. 若需自定义按钮样式，可在初始化时添加style配置：

paypal.Buttons({
  createOrder,
  onApprove,
  onError,
  style: {
    shape: 'pill',
    color: 'gold',
    layout: 'horizontal'
  }
}).render('#paypal-button-container')

内容的提问来源于stack exchange，提问作者Artur Müller Romanov