feat: stripe with real products

components/cards/order-summary-card/OrderSummaryCard.jsx

       >
         Order Summary
       </Typography>
-      <Typography sx={{ mt: 4 }}>Items total:${data.totalPrice}</Typography>
+      <Typography sx={{ mt: 4 }}>
+        Items total:${data.totalPrice.toFixed(2)}
+      </Typography>
       <Typography sx={{ mt: 1.5 }}>Shipping Costs: FREE</Typography>
       <Typography sx={{ mt: 1.5, mb: 1.5 }}>
-        Total: ${data.totalPrice}
+        Total: ${data.totalPrice.toFixed(2)}
       </Typography>
       <Divider />
       <Box sx={{ textAlign: 'center', mt: 4, width: '100%' }}>

components/products/featured-product/FeaturedProduct.jsx

 import ProductImage from './ProductImage';
 import ProductInfo from './ProductInfo';
 
-const FeaturedProduct = ({ product, bColor, image, side }) => {
+const FeaturedProduct = ({ product, bColor, side }) => {
   const matches = useMediaQuery('(min-width: 900px)');
   const data = { name: product.name, description: product.description };
   const { addCartValue } = useStoreUpdate();
         sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
       >
         {side === 'left' ? (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         ) : !matches ? (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         ) : (
           <ProductInfo
             bColor={bColor}
             inCart={inCart}
           ></ProductInfo>
         ) : (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         )}
       </Container>
     </Box>
     customID: PropType.string,
   }),
   bColor: PropType.string,
-  image: PropType.string,
   side: PropType.string,
 };
 export default FeaturedProduct;

components/products/featured-products-list/FeaturedPorductsList.jsx

             key={i}
             product={product}
             bColor={i % 2 === 0 ? 'dark' : 'light'}
-            image="/images/Item 2.png"
             side={i % 2 === 0 ? 'left' : 'right'}
           ></FeaturedProduct>
         );

components/review-content/ReviewContent.jsx

           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Total: ${orderData?.totalPrice}
+            Total: ${orderData?.totalPrice.toFixed(2)}
           </Typography>
         </Box>
       </Grid>

components/shipping-content/ShippingContent.jsx

     handleClose();
   };
 
+  console.log(checkoutStorage);
   const handleStripePayment = () => {
     stripe({
-      lineItems: [
-        {
-          price: 'price_1Lg4MsDY7dvAcw2f1CGQaFFR',
-          quantity: 1,
-        },
-      ],
+      lineItems: checkoutStorage.products.map((el) => ({
+        price: el.product.stripeID,
+        quantity: el.quantity,
+      })),
+      userInfo: checkoutStorage.userInfo,
     });
     setCookie(null, 'review-session', 'active', {
       maxAge: 3600,

hooks/use-stripe.js

 import { loadStripe } from '@stripe/stripe-js';
 
-export const useStripe = async ({ lineItems }) => {
+export const useStripe = async ({ lineItems, userInfo }) => {
   let stripePromise = null;
 
   const getStripe = () => {
 
   await stripe.redirectToCheckout({
     mode: 'payment',
+    customer_email: userInfo.email,
+    metadata: {
+      name: userInfo.fullName,
+      address: userInfo.address,
+      addressLine2: userInfo.address2,
+      city: userInfo.city,
+      country: userInfo.country,
+      postcode: userInfo.postcode,
+    },
     lineItems,
     successUrl: `${window.location.origin}/review`,
     cancelUrl: `${window.location.origin}/cart`,

models/product.js

     required: [true, 'Please provide a custom id.'],
     unique: [true, 'Custom id must be unique'],
   },
+  stripeID: {
+    type: String,
+    required: [true, 'Please provide a stripe id.'],
+    unique: [true, 'Stripe id must be unique'],
+  },
 });
 
 const Product =