如何渲染调用服务端接口的官方PayPal按钮（基于REST API实现）

实现思路 #

你不需要引入PayPal完整的智能支付JS SDK，也不需要使用SDK内置的快速结账逻辑，仅需两步即可满足需求：渲染官方样式按钮、绑定自定义点击事件调用自有服务端接口。

具体实现步骤 #

1. 官方样式按钮渲染 #

有两种可选方案，都可以做到和官方智能按钮样式完全一致：

• 直接从官方智能按钮的页面元素中扒取CSS样式，自己写静态按钮，不需要引入任何PayPal官方资源
• 仅引入PayPal JS SDK的按钮渲染能力，不使用它内置的订单创建、跳转逻辑

2. 自定义点击逻辑开发 #

方案1：完全自研按钮，无任何PayPal SDK依赖

前端代码示例：

<!-- 官方样式自定义按钮 -->
<button id="paypal-custom-btn" style="/* 填入从官方按钮扒取的CSS样式 */">
  <img alt="PayPal支付" src="官方PayPal图标地址">
</button>

<script>
document.querySelector('#paypal-custom-btn').addEventListener('click', async function() {
  // 禁用按钮防止重复提交
  this.disabled = true
  try {
    // 调用自有服务端的订单创建接口
    const res = await fetch('/your-server/paypal/create-order', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        // 传入你业务需要的订单参数：商品ID、金额、用户ID等
        goodsId: 'xxx', amount: 99.99
      })
    })
    const orderResult = await res.json()
    // 服务端调用PayPal REST API创建订单成功后，会返回支付跳转地址，直接跳转即可
    if (orderResult.approvalUrl) {
      window.location.href = orderResult.approvalUrl
    }
  } catch (e) {
    console.error('订单创建失败', e)
    // 补充你的错误提示逻辑
  } finally {
    this.disabled = false
  }
})
</script>

服务端你已经有完整规划，直接调用PayPal v2/checkout/orders 接口创建订单，创建时配置好回调地址，将返回的links数组中rel=approve的地址返回给前端即可。

方案2：使用官方SDK渲染按钮，自定义订单逻辑

如果不想自己写按钮样式，可以只引入SDK的渲染能力，重写核心回调即可，所有逻辑依然完全由你的服务端管控：

paypal.Buttons({
  // 重写创建订单逻辑，不走SDK内置的订单创建
  createOrder: function() {
    return fetch('/your-server/paypal/create-order', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'}
    }).then(res => res.json())
    .then(orderResult => {
      // 直接返回你服务端拿到的PayPal订单ID即可
      return orderResult.orderId
    })
  },
  // 支付完成后的回调同样走你自己的服务端逻辑
  onApprove: function(data) {
    return fetch('/your-server/paypal/capture-order', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({orderId: data.orderID})
    }).then(res => res.json())
    .then(captureResult => {
      // 处理支付成功后的业务逻辑
      alert('支付成功')
    })
  }
}).render('#paypal-button-container')

这种方案不需要调整样式，按钮完全是官方渲染的样式，同时所有核心流程都在你的服务端可控范围内，不会被SDK限制。

内容的提问来源于stack exchange，提问作者chilluk