Firebase Stripe扩展问题：结账按钮无法跳转至Stripe生产环境

一、核心问题：弃用stripe.redirectToCheckout导致按钮无响应 #

Stripe已弃用前端直接传入商品信息调用stripe.redirectToCheckout的方式，现在必须通过后端（或Firebase扩展）生成Checkout Session，前端拿到会话URL后跳转。这是你点击按钮无响应的直接原因——旧方法已失效。

二、结合Firestore使用Stripe官方扩展的步骤 #

Stripe提供了stripe-firestore-stripe-payments扩展，可自动关联Firestore与Stripe的产品、价格数据，简化支付流程：

• 安装扩展：在Firebase控制台的「扩展」市场搜索并安装该扩展，配置你的Stripe密钥、Firestore集合路径（如products、customers）。
• 同步产品数据：扩展会自动将Stripe后台的产品、价格同步到Firestore对应集合，你也可以直接在Firestore创建产品文档（需符合扩展要求的字段格式）。
• 前端调用扩展API生成结账链接：通过Firebase SDK调用扩展提供的方法生成会话URL，实现跳转。

三、代码修正示例 #

1. 前端checkout.js修正（使用Stripe Firestore扩展） #

// 初始化Firebase（确保已引入Firebase SDK）
import { initializeApp } from "firebase/app";
import { getStripePayments } from "@stripe/firestore-stripe-payments";

const firebaseConfig = {
  // 你的Firebase配置信息
};
const app = initializeApp(firebaseConfig);

// 初始化Stripe Payments实例
const payments = getStripePayments(app, {
  productsCollection: "products",
  customersCollection: "customers",
});

// 绑定结账按钮点击事件
document.getElementById('checkout-button').addEventListener('click', async () => {
  try {
    // 从Firestore的prices集合中获取对应价格ID
    const priceId = "price_xxxxxx"; // 替换为你的实际价格ID
    const { url } = await payments.paymentWithLink({
      price: priceId,
      quantity: 1,
      successUrl: `${window.location.origin}/success`,
      cancelUrl: `${window.location.origin}/cancel`,
    });
    // 跳转到Stripe托管的结账页面
    window.location.href = url;
  } catch (error) {
    console.error("结账失败:", error);
    // 可在此添加用户友好的错误提示
  }
});

2. index.html按钮调整 #

不要用<a>标签包裹按钮（静态路径会导致404，因为结账URL是动态生成的），直接使用普通按钮：

<button id="checkout-button">立即结账</button>

3. 自定义Firebase云函数方案（不使用扩展） #

如果需要自定义逻辑，可写Firebase云函数生成Checkout Session：

云函数代码（functions/index.js）

const functions = require("firebase-functions");
const stripe = require("stripe")(functions.config().stripe.secret_key);

exports.createCheckoutSession = functions.https.onCall(async (data, context) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ["card"],
    line_items: [
      {
        price: data.priceId,
        quantity: data.quantity,
      },
    ],
    mode: "payment",
    success_url: `${functions.config().frontend.url}/success`,
    cancel_url: `${functions.config().frontend.url}/cancel`,
  });

  return { url: session.url };
});

前端调用云函数的代码

import { getFunctions, httpsCallable } from "firebase/functions";

const functions = getFunctions();
const createCheckoutSession = httpsCallable(functions, "createCheckoutSession");

document.getElementById('checkout-button').addEventListener('click', async () => {
  try {
    const result = await createCheckoutSession({
      priceId: "price_xxxxxx",
      quantity: 1,
    });
    window.location.href = result.data.url;
  } catch (error) {
    console.error("创建会话失败:", error);
  }
});

关键注意事项 #

• 确保前端已正确引入Firebase和Stripe相关SDK（可通过npm或CDN）。
• 价格ID必须是Stripe后台或Firestore中已存在的有效ID。
• 成功/取消URL需与Stripe后台配置的域名一致（避免跨域问题）。

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