集成Stripe Checkout与Firebase动态数据时触发IntegrationError

错误信息 #

IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.

相关代码片段 #

1. Checkout.vue 支付按钮与pay()函数 #

<div class="col-md-3">
    <p>
        Total price : {{ this.$store.getters.totalPrice   }}
    </p>
    <button class='pay-with-stripe btn btn-primary mt-4' @click='pay'>Checkout</button>
</div>

2. pay() 方法实现 #

pay(){
  let data = this.$store.state.card.map(item => ({ [item.productId] : item.productQuantity}));
  data = Object.assign({}, ...data);
  axios.get('https://us-central1-vue-shop-1ab39.cloudfunctions.net/CheckoutSession', {
      params: {
          products : data
      }
  })
  .then(response => {
      this.sessionId = response.data
      console.log(response.data);
      stripe.redirectToCheckout({
          sessionId: this.sessionId.id
      }).then(function (result) {
      });
  })
  .catch(error => {
      console.log(error);
  });
}

3. 后端构建 line_items 代码 #

const results = []
all.forEach(item => {
    const data = {};
    data.price = parseInt(item.data().price) ;
    data.currency = "kzt";
    data.description = item.data().description ;
    data.name = item.data().name;
    myProducts.forEach(q => {
        if(item.id == q[0]){
          data.quantity = q[1];
        }
    });
    results.push(data)
});

4. 后端创建 Checkout Session 代码 #

stripe.checkout.sessions.create({
    success_url: "https://example.com/success",
    cancel_url: "https://example.com/cancel",
    payment_method_types: ["card"],
    line_items: results,
    mode: 'payment',
}, function(err, session) {
    response.send(session);
});

错误原因分析 #

1. Line Items 格式不符合 Stripe 要求：后端构建的line_items直接传入了价格数值，但Stripe要求每个条目必须使用Stripe Price ID或通过price_data字段动态定义价格，否则会话创建会失败。
2. 后端无错误处理：创建会话时未捕获Stripe返回的错误，即使line_items格式错误，仍直接返回session（此时可能为undefined），导致前端拿到无效数据。
3. 前端未校验会话ID：前端直接使用this.sessionId.id，未检查后端返回的会话数据是否有效，若会话创建失败，sessionId.id会是undefined，触发redirectToCheckout的参数错误。

解决方案 #

1. 修复后端 Line Items 格式 #

改用price_data动态创建价格（适用于没有预创建Stripe Price的场景），确保符合Stripe规范：

const results = []
all.forEach(item => {
    const productData = item.data();
    // 匹配对应商品的数量
    const targetProduct = myProducts.find(q => q[0] === item.id);
    const quantity = targetProduct ? targetProduct[1] : 1;

    results.push({
        quantity: quantity,
        price_data: {
            currency: "kzt",
            product_data: {
                name: productData.name,
                description: productData.description
            },
            unit_amount: parseInt(productData.price) * 100 // 转换为最小货币单位（KZT无小数，直接乘100也可，若为美元则必须转成分）
        }
    });
});

2. 后端添加错误处理逻辑 #

捕获Stripe会话创建的错误，返回明确的错误信息：

stripe.checkout.sessions.create({
    success_url: "https://example.com/success",
    cancel_url: "https://example.com/cancel",
    payment_method_types: ["card"],
    line_items: results,
    mode: 'payment',
}, function(err, session) {
    if (err) {
        console.error("Stripe会话创建失败:", err);
        return response.status(500).send({ error: err.message });
    }
    response.send(session);
});

3. 前端增加数据校验与错误处理 #

在调用redirectToCheckout前，先校验会话ID的有效性，并处理跳转失败的情况：

pay(){
  let data = this.$store.state.card.map(item => ({ [item.productId] : item.productQuantity}));
  data = Object.assign({}, ...data);
  axios.get('https://us-central1-vue-shop-1ab39.cloudfunctions.net/CheckoutSession', {
      params: {
          products : data
      }
  })
  .then(response => {
      const session = response.data;
      console.log(session);
      
      // 校验会话数据是否有效
      if (!session || !session.id) {
          console.error("无效的Stripe会话:", session);
          alert("创建支付会话失败，请重试");
          return;
      }

      stripe.redirectToCheckout({
          sessionId: session.id
      }).then(function (result) {
          // 处理跳转失败
          if (result.error) {
              console.error("跳转至支付页面失败:", result.error);
              alert(result.error.message);
          }
      });
  })
  .catch(error => {
      console.error("请求支付会话接口失败:", error);
      alert("请求支付服务失败，请重试");
  });
}

4. 校验商品数据传递 #

确保前端this.$store.state.card中的productId与后端Firebase文档的item.id完全匹配，且productQuantity为正整数，避免生成无效的line_items。

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