Stripe支付成功后如何将Vuex存储的自定义数据传入Firebase

1. 前端自定义数据传入Webhook流程 #

• 你需要在创建Stripe Checkout会话的步骤中，将Vuex里的自定义文章数据存入会话的metadata字段：
  • 如果文章数据体积小（单条字符串不超过500字符，总metadata不超过500KB），可以直接序列化后存入metadata
  • 如果数据体积大，先将数据写入Firestore的临时集合（比如pending_articles），设置未支付标记，再将临时文档ID存入metadata
• Stripe触发checkout.session.completed事件时，会完整携带你存入的metadata，直接在Webhook云函数中读取即可

修改后的Webhook云函数示例：

exports.stripeWebhook = functions.https.onRequest(async (req, res) => {
  const stripe = require("stripe")(functions.config().stripe.token);
  let event;
  try {
    const whSec = functions.config().stripe.payments_webhook_secret;
    event = stripe.webhooks.constructEvent(
        req.rawBody,
        req.headers["stripe-signature"],
        whSec,
    );
  } catch (err) {
    console.error("⚠️ Webhook signature verification failed.");
    return res.sendStatus(400);
  }
  const dataObject = event.data.object;
  // 读取metadata中的自定义数据
  const customArticleData = dataObject.metadata.article_data ? 
    JSON.parse(dataObject.metadata.article_data) : 
    await admin.firestore().collection("pending_articles").doc(dataObject.metadata.pending_article_id).get().then(doc => doc.data());

  await admin.firestore().collection("orders").doc().set({
    checkoutSessionId: dataObject.id,
    paymentStatus: dataObject.payment_status,
    amountTotal: dataObject.amount_total,
    // 写入自定义文章数据
    article: customArticleData
  });
  // 可选：支付成功后删除临时集合的冗余数据
  if (dataObject.metadata.pending_article_id) {
    await admin.firestore().collection("pending_articles").doc(dataObject.metadata.pending_article_id).delete();
  }
  return res.sendStatus(200);
});

2. Stripe跳转支付后Vuex数据保留方案 #

Vuex是内存级存储，页面跳转/刷新后数据会清空，两种可选实现方案：

• 本地存储方案：支付发起前将Vuex中的文章数据序列化存入localStorage或IndexedDB，支付成功跳回前端路由时，读取本地存储的数据恢复到Vuex，使用完成后删除本地存储的冗余数据即可
• 云端临时存储方案：支付发起前直接将数据写入Firestore临时集合关联用户UID，该方案更稳定，不受用户清缓存、跨设备跳转的影响，后续不管是前端恢复数据还是Webhook读取数据都可以直接通过UID查询

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