add

reedoooo · Nov 25, 2023 · 95cda94 · 95cda94
1 parent 317a493
commit 95cda94
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 62 deletions.
diff --git a/src/components/forms/customerCheckoutForm/StripeForm.js b/src/components/forms/customerCheckoutForm/StripeForm.js
@@ -1,9 +1,7 @@
-// StripeForm.js
-
 import React, { useState } from 'react';
 import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
 import axios from 'axios';
-import './StripeForm.css'; // import the CSS file
+import './StripeForm.css';
 
 const StripeForm = ({ total, onToken }) => {
   const stripe = useStripe();
@@ -38,18 +36,24 @@ const StripeForm = ({ total, onToken }) => {
       onToken(id);
       const amountInCents = Math.round(total * 100);
 
-      const response = await axios.post(
-        `${process.env.REACT_APP_SERVER}/api/stripe/checkout`,
-        { id, amount: amountInCents }
-      );
+      try {
+        const response = await axios.post(
+          `${process.env.REACT_APP_SERVER}/api/stripe/checkout`,
+          { id, amount: amountInCents }
+        );
 
-      setLoading(false);
+        setLoading(false);
 
-      if (response.data.success) {
-        setPaymentSuccess('Payment Successful!');
-        setPaymentError(null);
-      } else {
-        setPaymentError('Payment failed: ' + response.data.message);
+        if (response.data.success) {
+          setPaymentSuccess('Payment Successful!');
+          setPaymentError(null);
+        } else {
+          setPaymentError('Payment failed: ' + response.data.message);
+          setPaymentSuccess(null);
+        }
+      } catch (err) {
+        setLoading(false);
+        setPaymentError('Error processing payment: ' + err.message);
         setPaymentSuccess(null);
       }
     }

diff --git a/src/components/modals/stripeModal/StripeCheckoutModal.js b/src/components/modals/stripeModal/StripeCheckoutModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal, Fade, Box, Typography, Backdrop } from '@mui/material';
-import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
 import StripeForm from '../../forms/customerCheckoutForm/StripeForm';
+import { loadStripe } from '@stripe/stripe-js';
 
 const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
 
@@ -12,58 +12,46 @@ const StripeCheckoutModal = ({ open, onClose, onToken, purchases, total }) => {
       open={open}
       onClose={onClose}
       closeAfterTransition
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      BackdropComponent={Backdrop}
+      BackdropProps={{ timeout: 500 }}
+      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
     >
-      <Backdrop
-        open={open}
-        onClose={onClose}
-        timeout={500}
-        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} // Ensures the backdrop is above other elements but below the modal
-      >
-        <Fade in={open}>
-          <Box
-            sx={{
-              position: 'absolute', // Needed for proper positioning within the backdrop
-              zIndex: 2000, // Ensure this is above the backdrop
-              width: 400,
-              bgcolor: 'background.paper',
-              boxShadow: 24,
-              borderRadius: 2,
-              p: 4,
-              maxHeight: '80vh',
-              overflow: 'auto',
-            }}
-          >
-            <Typography variant="h6" gutterBottom>
-              Your Purchases
-            </Typography>
-            {purchases.map((purchase, index) => (
-              <Box
-                key={index}
-                sx={{ display: 'flex', justifyContent: 'space-between' }}
-              >
-                <Typography>{purchase.name}</Typography>
-                <Typography>
-                  ${purchase.card_prices[0].tcgplayer_price}
-                </Typography>
-              </Box>
-            ))}
+      <Fade in={open}>
+        <Box
+          sx={{
+            position: 'absolute',
+            width: 400,
+            bgcolor: 'background.paper',
+            boxShadow: 24,
+            borderRadius: 2,
+            p: 4,
+            maxHeight: '80vh',
+            overflow: 'auto',
+          }}
+        >
+          <Typography variant="h6" gutterBottom>
+            Your Purchases
+          </Typography>
+          {purchases.map((purchase, index) => (
             <Box
-              sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}
+              key={index}
+              sx={{ display: 'flex', justifyContent: 'space-between' }}
             >
-              <Typography variant="subtitle1">Total:</Typography>
-              <Typography variant="subtitle1">${total}</Typography>
+              <Typography>{purchase.name}</Typography>
+              <Typography>
+                ${purchase.card_prices[0].tcgplayer_price}
+              </Typography>
             </Box>
-            <Elements stripe={stripePromise}>
-              <StripeForm total={total} onToken={onToken} />
-            </Elements>
+          ))}
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
+            <Typography variant="subtitle1">Total:</Typography>
+            <Typography variant="subtitle1">${total}</Typography>
           </Box>
-        </Fade>
-      </Backdrop>
+          <Elements stripe={stripePromise}>
+            <StripeForm total={total} onToken={onToken} />
+          </Elements>
+        </Box>
+      </Fade>
     </Modal>
   );
 };

diff --git a/src/index.js b/src/index.js
@@ -23,11 +23,16 @@ import { PopoverProvider } from './context/PopoverContext/PopoverContext';
 import { CronJobProvider } from './context/CronJobContext/CronJobContext';
 import { CardImagesProvider } from './context/CardImagesContext/CardImagesContext';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
 
 const root = document.getElementById('root');
 
 function Main() {
   const { theme } = useMode();
+  const stripePromise = loadStripe(
+    process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
+  ); // Use your Stripe publishable key
 
   return (
     <ErrorBoundary>
@@ -51,7 +56,9 @@ function Main() {
                                     <ChartProvider>
                                       <SidebarProvider>
                                         <AppContextProvider>
-                                          <App />
+                                          <Elements stripe={stripePromise}>
+                                            <App />
+                                          </Elements>
                                         </AppContextProvider>
                                       </SidebarProvider>
                                     </ChartProvider>