const Cart = () => {
  const cart = useAppSelector((state) => state.cart);
  const [stripeToken, setStripeToken] = useState("");
  const onToken = (token: Token) => {
    setStripeToken(token.id);
  };
  console.log(stripeToken);
  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>
            <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={KEY || ""}
            >
              <SummaryButton>CHECKOUT NOW</SummaryButton>
            </StripeCheckout>
          </Summary>
        </Bottom>
      </Wrapper>
      <Footer />
    </Container>
  );
};

export default Cart;|
TS2769: No overload matches this call.
  Overload 1 of 2, '(props: StripeCheckoutProps | Readonly<StripeCheckoutProps>): StripeCheckout', gave the following error.
    Type '{ children: Element; name: string; image: string; description: string; amount: number; token: (token: Token) => void; stripeKey: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<StripeCheckout> & Readonly<StripeCheckoutProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<StripeCheckout> & Readonly<StripeCheckoutProps>'.
  Overload 2 of 2, '(props: StripeCheckoutProps, context: any): StripeCheckout', gave the following error.
    Type '{ children: Element; name: string; image: string; description: string; amount: number; token: (token: Token) => void; stripeKey: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<StripeCheckout> & Readonly<StripeCheckoutProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<StripeCheckout> & Readonly<StripeCheckoutProps>'.
    203 |               <SummaryItemPrice>{cart.total}PLN</SummaryItemPrice>
    204 |             </SummaryItem>
  > 205 |             <StripeCheckout
        |              ^^^^^^^^^^^^^^
    206 |               name="FABICO"
    207 |               image="https://avatars.githubusercontent.com/u/1486366?v=4"
    208 |               description={`Your total is $${cart.total}`}