如何在Next.js中获取Stripe客户列表？

你当前的代码存在两个核心问题：

• @stripe/stripe-js是前端专用SDK，仅用于处理支付按钮、支付元素渲染等前端支付流程，没有权限调用customers.list()这类需要后端权限的API。
• 直接在前端暴露Stripe密钥会导致密钥泄露，这是严重的安全风险。

以下是正确的实现步骤：

1. 安装Stripe后端SDK #

在项目根目录执行命令：

npm install stripe
# 或
yarn add stripe

2. 创建Next.js后端API路由 #

在pages/api目录下新建stripe/customers.js文件（路径可自定义），写入以下代码：

import Stripe from 'stripe';

// 用Stripe后端密钥（sk开头）初始化实例
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: '2024-06-20', // 可根据Stripe文档使用最新API版本
});

export default async function handler(req, res) {
  // 仅允许GET请求
  if (req.method !== 'GET') {
    return res.status(405).json({ error: '仅支持GET请求' });
  }

  try {
    // 调用Stripe API获取客户列表，可添加分页、过滤参数
    const customers = await stripe.customers.list({
      limit: 10, // 按需调整返回数量
    });
    res.status(200).json(customers);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

3. 前端调用自定义API路由 #

修改你的前端组件代码，替换原有的客户获取逻辑：

import { useEffect, useState } from 'react';

async function getStripeCustomers() {
  try {
    const response = await fetch('/api/stripe/customers');
    if (!response.ok) {
      throw new Error('获取客户列表失败');
    }
    const data = await response.json();
    console.log('客户列表:', data);
    return data;
  } catch (error) {
    console.error('获取客户列表出错:', error);
  }
}

export default function CustomerList() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await getStripeCustomers();
      if (result) {
        setCustomers(result.data); // Stripe返回的列表数据在data字段中
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h2>客户列表</h2>
      <ul>
        {customers.map(customer => (
          <li key={customer.id}>{customer.email || '无邮箱'}</li>
        ))}
      </ul>
    </div>
  );
}

4. 配置环境变量 #

在项目根目录的.env.local文件中添加Stripe后端密钥：

STRIPE_SECRET_KEY=sk_你的后端密钥

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