import { Router, Request, Response } from "express";
import Stripe from "stripe";

const stripeRouter: Router = Router();
const stripe = new Stripe(process.env.STRIPE_KEY || "", {
  apiVersion: "2022-11-15",
});

stripeRouter.post("/payment", async (req: Request, res: Response) => {
  try {
    const stripeRes: Stripe.Charge = await stripe.charges.create({
      source: req.body.tokenId,
      amount: req.body.amount,
      currency: "pln",
    });
    res.status(200).json(stripeRes);
  } catch (stripeErr) {
    res.status(500).json("This " + stripeErr);
  }
});

const createCustomer = async (): Promise<void> => {
  const params: Stripe.CustomerCreateParams = {
    description: "test customer",
  };
  const customer: Stripe.Customer = await stripe.customers.create(params);
};

createCustomer();

export default stripeRouter;
const Cart = () => {
  const cart = useAppSelector((state) => state.cart);
  const [stripeToken, setStripeToken] = useState<{ id: string }>({ id: "" });
  const history = useNavigate();
  const onToken = (token: Token) => {
    setStripeToken({ id: token.id });
  };
  useEffect(() => {
    const makeRequest = async () => {
      try {
        const res = await userRequest.post("/checkout/payment", {
          tokenId: stripeToken.id,
          amount: 100,
        });
        history("/success", { state: { data: res.data } });
      } catch (err) {
        console.log("it gives this error " + err);
      }
    };
    if (stripeToken) {
      makeRequest();
    }
  }, [stripeToken, cart.total, history]);
  return (
    <Container>
      <Navbar />
      <PromoInfo />
      <Wrapper>
        <Title>YOUR CART</Title>
        <Top>
          <TopButton>CONTINUE SHOPPING</TopButton>
          <TopTexts>
            <TopText>Shopping Bag(2)</TopText>
            <TopText>Your Wishlist(0)</TopText>
          </TopTexts>
          <TopButton buttonType="filled">CHECKOUT NOW</TopButton>
        </Top>
        <Bottom>
          <Information>
            {cart.products.map((product) => (
              <Product>
                <ProductDetail>
                  <Image src={product.img} />
                  <Details>
                    <ProductName>
                      <b>Product:</b>
                      {product.title}
                    </ProductName>
                    <ProductId>
                      <b>ID:</b>
                      {product._id}
                    </ProductId>
                    {product.color?.map((color, i) => (
                      <ProductColor key={i} color={color} />
                    ))}
                  </Details>
                </ProductDetail>
                <PriceDetail>
                  <ProductAmountContainer>
                    <AddIcon />
                    <ProductAmount>{product.quantity}</ProductAmount>
                    <RemoveIcon />
                  </ProductAmountContainer>
                  <ProductPrice>
                    {product.price * product.quantity}PLN
                  </ProductPrice>
                </PriceDetail>
              </Product>
            ))}
            <Hr />
          </Information>
          <Summary>
            <SummaryTitle>ORDER SUMMARY</SummaryTitle>
            <SummaryItem>
              <SummaryItemText>Subtotal</SummaryItemText>
              <SummaryItemPrice>{cart.total}PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Estimated Shipping</SummaryItemText>
              <SummaryItemPrice>5.90PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Shipping Discount</SummaryItemText>
              <SummaryItemPrice>-5.90PLN</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem type="total">
              <SummaryItemText>Total</SummaryItemText>
              <SummaryItemPrice>{cart.total}PLN</SummaryItemPrice>
            </SummaryItem>
            {process.env.REACT_APP_STRIPE ? (
              <StripeCheckout
                name="FABICO"
                image="https://avatars.githubusercontent.com/u/1486366?v=4"
                description={`Your total is $${cart.total}`}
                amount={cart.total * 100}
                token={onToken}
                stripeKey={process.env.REACT_APP_STRIPE}
              ></StripeCheckout>
            ) : (
              <div>Stripe key is not defined</div>
            )}
          </Summary>
        </Bottom>
      </Wrapper>
      <Footer />
    </Container>
  );
};

export default Cart;
why res status is 500?