Ошибка при извлечении с полосой: Uncaught IntegrationError: stripe.redirectToCheckout: вы должны указать один из элементов строки, элементов или идентификатора сеанса

В настоящее время я создаю магазин электронной коммерции с помощью React и Stripe и учусь на нем. Теперь я добрался до оформления заказа с помощью Stripe, но есть проблема: «Не пойманный (в обещании) IntegrationError: stripe.redirectToCheckout: вы должны указать один из элементов строки, элементов или идентификатора сеанса». Также мои константные данные не определены.

Этот проект от платформы 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.info("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;

`

полоса.js: `

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

export default async function handler(req, res) {
  if (req.method === 'POST') {
    console.info("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');
  }
}

`

Вопрос, который я себе задаю: почему на видео работает, а у меня нет, хотя он такой же. Код тоже уже сравнивал. Есть что-нибудь, что я забыл?

🤔 А знаете ли вы, что...
React поддерживает серверный рендеринг (SSR) для улучшения SEO и производительности.