集成PayPal智能按钮报错：Uncaught Error: Expected an order id to be passed

核心问题 #

你的后端代码只是构造了订单的JSON结构，但没有实际调用PayPal官方API创建真实订单，因此无法返回PayPal生成的order.id，前端接收不到合法的订单ID，导致按钮初始化失败，无法显示登录表单。

具体修复步骤 #

1. 后端集成PayPal API调用 #

需要使用PayPal的Python SDK或直接发起HTTP请求到PayPal Orders API，获取官方生成的订单ID。以下是使用paypalrestsdk的修正方案：

首先安装依赖：

pip install paypalrestsdk flask-cors

修正后的后端代码：

from flask import Flask, request, jsonify
import paypalrestsdk
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 处理跨域问题（如果前后端端口不同）

# 配置PayPal凭据（沙箱/生产环境二选一）
paypalrestsdk.configure({
  "mode": "sandbox",  # 生产环境切换为"live"
  "client_id": "你的PayPal客户端ID",
  "client_secret": "你的PayPal客户端密钥"
})

@app.route("/create-paypal-order", methods=["POST"])
def create_paypal_order():
    PRICE = 200
    try:
        products = request.get_json()
        quantity = products["cart"][0]["quantity"]
        value = PRICE * quantity

        # 构造订单并调用PayPal API创建
        order = paypalrestsdk.Order({
            "intent": "CAPTURE",
            "purchase_units": [{
                "amount": {
                    "currency_code": "USD",
                    "value": str(value)  # PayPal要求金额为字符串格式
                }
            }]
        })

        if order.create():
            return jsonify({"id": order.id})  # 返回PayPal生成的合法订单ID
        else:
            return jsonify({"error": order.error}), 400
    except Exception as e:
        return jsonify({"error": str(e)}), 500

2. 前端添加错误捕获逻辑 #

在createOrder方法中加入错误处理，方便排查请求失败的原因：

paypal.Buttons({
  createOrder() {
    return fetch("/create-paypal-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        cart: [
          {
            sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
            quantity: 10,
          },
        ],
      }),
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        return response.json();
      })
      .then((order) => order.id)
      .catch(error => {
        console.error('创建订单出错:', error);
        throw error; // 让PayPal按钮显示错误状态
      });
  },
  // onApprove代码保持不变
}).render('#paypal-button-container');

3. 验证请求状态 #

打开浏览器开发者工具（F12）→ 切换到Network标签，触发按钮加载后，查看/create-paypal-order请求的返回内容：

• 如果返回包含id字段的JSON，说明后端调用PayPal API成功；
• 如果返回错误或无id，检查后端日志、PayPal凭据是否正确，以及API权限是否开启。

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