我试图创建一个stripe checkout项目，但当我发现loadStripe promise无法正常工作时，我不得不更改代码window.stripe，但这也不起作用。
这是我的React代码：

import React, { useEffect, useRef } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import styles from "./Pricing.module.scss";
import ScriptTag from "react-script-tag";
const Stripe = require('stripe')
const stripe = window.Stripe('pk_xxxxxx373428')
export const Pricing = () => {
  const buttonValue = useRef();

  const navigate = useNavigate();

  const setBtnValue = (e) => {
    buttonValue.current = e.target.value;
  };
  const checkoutHandler = async (e) => {
    const btnValue = buttonValue.current;
    console.log(btnValue);
    fetch("http://localhost:5000/api/checkout", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        btnValue,
      }),
    })
      .then((result) => result.json())
      .then(({ sessionID }) => stripe.redirectToCheckout({ sessionID }))
      .then((result) => {
        console.log(result.error.message);
      });
  };
return (
<div>
  <ScriptTag
    isHydrating={true}
    type="text/javascript"
    src="https://js.stripe.com/v3/"
  />
<form onSubmit = {checkoutHandler}>
        <button
          value= 'price_bdsahfbadshb'
          type="submit"
          className="btn"
          name="product"
          onClick={setBtnValue}
        >
          Upgrade Now
        </button>
</div>
)
}

下面是我的后端代码：

router.post('/checkout' , async(req,res) => {
    const product = req.body;
    console.log(product);
    }