Javascript 有条带/重定向到checkout的问题

我已经试着去理解stripe有一段时间了。我面临的主要问题是，我是一名前端开发人员（有大约一年的经验），虽然我有一些node.js/backend的经验，但这还不足以处理支付的服务器处理。我打算使用netlify使用JAMstack无服务器函数方法。到目前为止，除了重定向到签出之外，一切似乎都在进行中。我得到了错误“stripe.redirectToCheckout不是一个函数”

以下是我的一些代码：

const inventory = require('./data/products.json');

exports.handler = async (event) => {
  const { sku, quantity } = JSON.parse(event.body);
  const product = inventory.find((p) => p.sku === sku);
  const validatedQuantity = quantity > 0 && quantity < 2 ? quantity : 1;

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    billing_address_collection: 'auto',
    shipping_address_collection: {
      allowed_countries: ['US'],
    },
    success_url: `${process.env.URL}/success`,
    cancel_url: process.env.URL,
    line_items: [
      {
        name: 'bitch',
        currency:'USD',
        amount: 299,
        quantity: validatedQuantity,
      },
    ],
  });

  return {
    statusCode: 200,
    body: JSON.stringify({
      sessionId: session.id,
      publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    }),
  };
};

如果有任何帮助，这里就是我调用函数的地方（handleformsubmit或其他）

从“React”导入React
从“@stripe/stripe js”导入{loadStripe}
导入“./Checkout.css”
从“react”导入{useState}
导入{元素，
CardElement，
useStripe，
useElements}来自“@stripe/react stripe js”
从“axios”导入axios
从“/load products”导入{loadProducts}
从“/stripe purchase”导入{handleFormSubmission}
const stripePromise=loadStripe（`${process.env.STRIPE_}`）
常量CheckoutForm=（）=>{
常量stripe=useStripe（）
常量元素=useElements（）
const handleSubmit=async（e）=>{
e、 预防默认值（）
如果（！stripe | |！元素）{
//Stripe.js尚未加载。请确保禁用
//表单提交，直到Stripe.js加载完毕。
返回；
}
//获取已装入CardElement的引用。Elements知道如何
//查找您的CardElement，因为其中只能有一个
//每种类型的元素。
const cardElement=elements.getElement（cardElement）；
const{error，paymentMethod}=wait stripe.createPaymentMethod({
类型：'卡片'，
卡片：cardElement
})
loadProducts（）；
}
返回(
在下面输入卡的详细信息：
付款
)
}
常量条带设置=（）=>{
返回(
)
}
导出默认条带设置

这是一段时间以来我第一次感觉到新材料真的让我不知所措。我甚至不知道我是否在以合适的速度学习，也不知道我在网上找到的复制代码的学习量有多大。。。但这确实需要我做大量的工作。如果有人能帮忙，我会很高兴的。顺便说一句，我现在意识到我创建了条带元素等，我甚至不知道在使用重定向到签出时是否有必要，因为这应该引导客户端进行条带签出？有人能为我澄清这一切吗。如果可以，请帮助他们！先谢谢你

---

最后一件事我想说。我不需要购物车，产品清单或任何东西。这是2.99的一次性付款，当用户提交付款时，将进入下一页。不确定这是否改变了什么，但在糟糕的文档和netlify的说明中，细节越多越好

我需要先再次调用loadstripe:

  const stripe=await loadStripe(response.publishableKey);
  const {err}=await stripe.redirectToCheckout({
    sessionId:response.sessionId
  })

---

也许是坏版本的条纹。检查这里

import React from 'react'
import {loadStripe} from "@stripe/stripe-js"
import './Checkout.css'
import {useState} from 'react'
import {Elements,
CardElement,
useStripe,
useElements} from '@stripe/react-stripe-js'
import axios from 'axios'
import {loadProducts} from './load-products'
import {handleFormSubmission} from './stripe-purchase'



const stripePromise=loadStripe(`${process.env.STRIPE_}`)

const CheckoutForm=()=>{

  const stripe=useStripe()
  const elements=useElements()
  const handleSubmit=async(e)=>{

    e.preventDefault()
    if (!stripe || !elements) {
    // Stripe.js has not loaded yet. Make sure to disable
    // form submission until Stripe.js has loaded.
    return;
  }
  // Get a reference to a mounted CardElement. Elements knows how
   // to find your CardElement because there can only ever be one of
   // each type of element.
  const cardElement = elements.getElement(CardElement);

    const {error, paymentMethod}=await stripe.createPaymentMethod({
      type:'card',
      card:cardElement
    })

    loadProducts();

  }

  return (
    <form onSubmit={handleFormSubmission} method='POST'>
      <img className='checkoutImage' src='./logo2.png' />
      <label  class="ml-2  font-bold text-blue-700 text-md">
Enter card details below:
                        </label>
      <fieldset className="my-2 FormGroup">

         <div className="FormRow">
         <CardElement options={{
     style: {
       base: {
         fontSmoothing: 'antialiased',
         fontWeight: 900,
         iconColor: '#60A5FA',
         fontSize: '30px',
         color: '#374151',
         '::placeholder': {
           color: '#3182ce',
         },
       },
       invalid: {
         iconColor: '#EF4444',
         color: '#DC2626',
       },
       complete:{
         iconColor:'green',
         color: 'green',
       }
     },
   }}/>
         </div>
       </fieldset>


<div className='checkoutbuttonContainer'>
            <button type="submit" className="scoreButtons scoreButtonGrey flex justify-center rounded-md border border-gray-300 bg-pink-600 shadow-sm px-4 py-2 bg-white text-base font-medium text-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:bg-pink-500 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                Submit Payment <span className='priceLine'></span> <span className='price'> </span>
                </button>
                </div>
                </form>

  )
}

const StripeSetup = () => {
  return (
    <div><Elements stripe={stripePromise}><CheckoutForm /></Elements></div>
  )
}

export default StripeSetup

  const stripe=await loadStripe(response.publishableKey);
  const {err}=await stripe.redirectToCheckout({
    sessionId:response.sessionId
  })