条纹 redirectToCheckout 错误。单击按钮提交时不会加载条带结帐

Question

因此，当我在结帐页面中点击提交时，我已经将所有内容设置为要加载的条纹，但是，我似乎只在下面收到此错误。在条纹仪表板上，我可以看到 POST 请求的状态为 200，并且我正在使用的电子邮件以及来自购物篮的价格等正在达到条纹。我只是似乎没有加载结帐。我已经将我的代码与我正在使用的指南进行了比较，它逐字匹配，是因为它是不同的版本，还是我遗漏了什么？

这是我遇到的错误。

Uncaught (in promise) IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.
at v (v3:1)
at g (v3:1)
at j (v3:1)
at t.a (v3:1)
at u (v3:1)
at e.redirectToCheckout (v3:1)
at handleGuestCheckout (stripe-checkout.jsx:32)

这是 checkout.js 服务器文件

async function createCheckoutSession(req, res) {
    const domainUrl = process.env.WEB_APP_URL;
    const { line_items, customer_email } = req.body;
    // check req body has line items and email
    if (!line_items || !customer_email) {
        return res.status(400).json({ error: 'missing required session parameters' });
    }

    let session;

    try {
        session = await stripeAPI.checkout.sessions.create({
            payment_method_types: ['card'],
            mode: 'payment',
            line_items,
            customer_email,
            success_url: `${domainUrl}/success?session_id={CHECKOUT_SESSION_ID}`,
            cancel_url: `${domainUrl}/canceled`,
            shipping_address_collection: { allowed_countries: ['GB', 'US'] }
        });
        res.status(200).json({ sessionID: session.id,});
    } catch (error) {
        console.log(error);
        res.status(400).json({ error: 'an error occured, unable to create session' });
    }
}

module.exports = createCheckoutSession;

这是 react 中的 stripe-checkout.jsx 文件

import React, { useContext, useState } from 'react';
import { useStripe } from '@stripe/react-stripe-js';
import { CartContext } from '../../../context/cart-context';
import { fetchFromAPI } from '../../../helpers';

const StripeCheckout = () => {
  const [email, setEmail] = useState('');
  const { cartItems } = useContext(CartContext);
  const stripe = useStripe();
  const handleGuestCheckout = async (e) => {
    e.preventDefault();
    const line_items = cartItems.map(item => {
      return {
        quantity: item.quantity,
        price_data: {
          currency: 'usd',
          unit_amount: item.price * 100, // amount is in cents
          product_data: {
            name: item.title,
            description: item.description,
            images: [item.imageUrl], 
          }
        }
      }
    });

    const response = await fetchFromAPI('create-checkout-session', {
      body: { line_items, customer_email: email },
    });

    const { sessionId } = response;
    const { error } = await stripe.redirectToCheckout({
      sessionId
    });
    
    if (error) {
      console.log('error');
    }
  }

  return (
    <form onSubmit={handleGuestCheckout}>
      <div>
        <input 
          type='email'
          onChange={e => setEmail(e.target.value)}
          placeholder='Email'
          value={email}
          className='nomad-input'
        />
      </div>
      <div className='submit-btn'>
        <button type='submit' className='button is-black nomad-btn submit'>
          Checkout
        </button>
      </div>
    </form>
  );
}

export default StripeCheckout;

Answer 1

redirectToCheckout 调用希望您传入一个对象，其键为 sessionId，会话 ID 作为其值。在您的代码中，如下所示：

const { error } = await stripe.redirectToCheckout({
  sessionId: sessionId
});

另外考虑您也可以使用 Checkout Session 的 url 属性。使用服务器端重定向：

res.redirect(303, session.url);

或者您可以将网址发回并重定向，就像您对任何其他网址一样：

window.location.replace(session_url)