如何在已配置Firebase的Next.js项目中使用Firebase Stripe扩展

你当前贴出的配置文件存在3处逻辑错误，修正后可正常使用：

1. 重复导入getApp、重复声明app变量
2. 初始化顺序颠倒，需先初始化Firebase实例，再调用getStripePayments方法
3. 未兼容Next.js热重载特性，易出现重复初始化实例报错

修正后代码如下：

// Import the functions you need from the SDKs you need
import { initializeApp, getApps, getApp } from "firebase/app";
import { getStripePayments } from "@stripe/firestore-stripe-payments";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXX"
};

// 先判断是否已初始化实例，避免Next.js热重载重复初始化
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const payments = getStripePayments(app, {
  productsCollection: "products",
  customersCollection: "customers",
});

export { app, payments }

• 首先完成Firebase侧扩展安装：在Firebase控制台的扩展市场找到「Run Payments with Stripe」扩展，按照指引填写你的Stripe受限密钥、配置产品和用户集合名称（和你代码里的products、customers保持一致即可），安装完成后扩展会自动在你的Firestore里创建对应集合，自动同步Stripe侧的产品、价格、订阅数据。
• 然后完成Stripe侧配置：把扩展安装完成后给出的Webhook地址，添加到你的Stripe后台Webhook列表中，同时勾选扩展要求的所有事件监听项，配置完成后Stripe的支付、订阅事件会自动同步到Firebase。
• 前端不需要额外单独配置Stripe SDK，直接使用已经初始化的payments实例调用对应方法即可完成支付流程，所有敏感交互都由扩展的云函数处理，不会暴露Stripe密钥。

获取可售卖产品列表 #

import { listProducts } from "@stripe/firestore-stripe-payments"
import { payments } from './firebase'

// 调用即可获取所有激活的产品和对应价格
const products = await listProducts(payments, { includePrices: true })

创建支付会话跳转Stripe收银台 #

import { createCheckoutSession } from "@stripe/firestore-stripe-payments"
import { payments } from './firebase'

const session = await createCheckoutSession(payments, {
  price: '价格ID', // 从上面获取的产品价格中取
  success_url: `${window.location.origin}/pay-success`,
  cancel_url: `${window.location.origin}/pay-cancel`,
})
// 直接跳转到Stripe收银台
window.location.assign(session.url)

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