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

Posted 2023-03-21

【中文标题】条纹 redirectToCheckout 错误。单击按钮提交时不会加载条带结帐

【英文标题】：Stripe redirectToCheckout error. Will not load stripe checkout when I click the button to submit

【发布时间】：2022-01-12 23:33:17

【问题描述】：

因此，当我在结帐页面中点击提交时，我已经将所有内容设置为要加载的条纹，但是，我似乎只在下面收到此错误。在条纹仪表板上，我可以看到 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;

【参考方案1】：

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

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

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

res.redirect(303, session.url);

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

window.location.replace(session_url)

【讨论】：

嘿，这不起作用，但它确实让我找到了正确的方向，在后端 checkout.js - 有一个与前端 res.status 不匹配的错误（ 200).json( sessionID: session.id,);它应该是 sessionId 而不是 sessionID。