使用条带获取时出错：未捕获的集成错误：stripe.redirectToCheckout：您必须提供 lineItems、items 或 sessionId 之一

Question

我目前正在使用 React 和 Stripe 构建一个电子商务商店并通过它进行学习。 现在我已经通过 Stripe 进行了结帐，但有一个问题：“未捕获（承诺中）IntegrationError：stripe.redirectToCheckout：您必须提供 lineItems、items 或 sessionId 之一”。 我的常量数据也未定义。

这个项目来自Youtube平台，用于学习建立电子商务商店。 这是链接：视频（部分：“条纹”）

以下是代码片段：

购物车.jsx： `

const handleCheckout = async () => {
    const stripe = await getStripe();

    const response = await fetch('/api/stripe', { 
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(cartItems),
    });

    if(response.statusCode === 500) return;
    const data = await response.json();
    console.log("DATA", data.id);

    toast.loading('Redirecting...');
    stripe.redirectToCheckout({ sessionId: data.id }); 
  }

`

getStripe.js： `

import { loadStripe } from '@stripe/stripe-js'

let stripePromise;

const getStripe = () => {
    if(!stripePromise) {
        stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
    }

    return stripePromise;
}

export default getStripe;

`

stripe.js： `

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    console.log("Body:", req.body.cartItems);
    try {
      const params = {
        submit_type: 'pay',
        mode: 'payment',
        payment_method_types: ['card'],
        billing_address_collection: 'auto',
        shipping_options:[
            { shipping_rate: 'shr_1MD7qfEkf37UoY2b8O1odVCL' },
            { shipping_rate: 'shr_1MD7sXEkf37UoY2bSHqshySN' }
        ],
        line_items: [
          {
            //Provide the exact Price ID (for example, pr_1234) of the product you want to sell
            price: '{{PRICE_ID}}',
            quantity: 1,
          },
        ],
        success_url: `${req.headers.origin}/?success=true`,
        cancel_url: `${req.headers.origin}/?canceled=true`,
      }

      //Create Checkout Sessions from body params.
      const session = await stripe.checkout.sessions.create(params);
      res.redirect(303, session.url);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

`

我问自己的问题：为什么它在视频中有效，但对我不起作用，尽管它是相同的。 也已经比较了代码。 有什么我忘记了吗？

Answer 1

有 2 种方式集成 Checkout Session

1. 从后端重定向到结账会话
2. 从后端返回结帐会话 ID，并让前端使用

   redirectToCheckout

进行重定向

您同时在后端调用

res.redirect(303, session.url)

和在前端调用

stripe.redirectToCheckout({ sessionId: data.id })

，从而混淆了两种方式。

我的建议是您应该使用 1.，因为它是较新的并且今天推荐集成。只需在前端删除调用

redirectToCheckout

即可。