当前位置：首页 > VUE

vue实现paypal支付

2026-01-08 13:22:01VUE

使用 Vue.js 集成 PayPal 支付

安装 PayPal JavaScript SDK

在项目中引入 PayPal 的官方 JavaScript SDK。可以通过 CDN 或 npm 安装。

通过 CDN 引入：

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

通过 npm 安装：

npm install @paypal/checkout-sdk

配置 PayPal 客户端 ID

在 PayPal 开发者平台注册应用并获取客户端 ID。将客户端 ID 替换到 SDK 初始化代码中。

paypal.Buttons({
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: '10.00'
        }
      }]
    });
  }
}).render('#paypal-button-container');

创建 Vue 组件

在 Vue 组件中集成 PayPal 按钮。确保组件挂载后渲染 PayPal 按钮。

<template>
  <div id="paypal-button-container"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID';
    script.addEventListener('load', () => {
      paypal.Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: '10.00'
              }
            }]
          });
        },
        onApprove: (data, actions) => {
          return actions.order.capture().then(details => {
            alert('Transaction completed by ' + details.payer.name.given_name);
          });
        }
      }).render('#paypal-button-container');
    });
    document.body.appendChild(script);
  }
}
</script>

处理支付回调

在 onApprove 回调中处理支付成功后的逻辑，例如发送支付信息到后端服务器。

onApprove: (data, actions) => {
  return actions.order.capture().then(details => {
    this.$axios.post('/api/payment', {
      orderID: data.orderID,
      payerID: data.payerID
    }).then(response => {
      alert('Payment successful');
    });
  });
}

自定义 PayPal 按钮样式

可以通过 PayPal SDK 提供的样式选项自定义按钮外观。

paypal.Buttons({
  style: {
    shape: 'rect',
    color: 'gold',
    layout: 'vertical',
    label: 'paypal'
  }
}).render('#paypal-button-container');