用的是官方提供的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 过几天发上来

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐