🚑 Fix bug with stripe payment

src/components/PaymentPage/index.tsx

@@ -1,19 +1,19 @@
-import { useState } from "react";
+import { usePayment } from "@/payment";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { selectors } from "@/store";
-import { usePayment } from "@/payment";
-import { ApplePayBanner, GooglePayBanner } from "./methods";
-import ErrorModal from "./ErrorModal";
-import UserHeader from "../UserHeader";
-import Title from "../Title";
-import Loader from "../Loader";
-import secure from "./secure.png";
-import routes from "@/routes";
-import "./styles.css";
 import Header from "../Header";
+import Loader from "../Loader";
+import Title from "../Title";
+import UserHeader from "../UserHeader";
+import ErrorModal from "./ErrorModal";
+import { ApplePayBanner, GooglePayBanner } from "./methods";
 import { StripeButton } from "./methods/Stripe";
+import secure from "./secure.png";
+import "./styles.css";
 // import { PayPalButton } from "./methods/PayPal/Button";
 // import { useAuth } from "@/auth";
 // import { useApi } from "@/api";
@@ -42,6 +42,12 @@ function PaymentPage(): JSX.Element {
   const email = useSelector(selectors.selectEmail);
   const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
 
+  // Do not allow to go to this page if there is no other payment methods
+  useEffect(() => {
+    // Have only Stripe for now
+    navigate(routes.client.paymentStripe());
+  }, []);
+
   const navigateToStripe = () => {
     navigate(routes.client.paymentStripe());
   };

src/components/PaymentPage/methods/Stripe/CheckoutForm.tsx

@@ -19,29 +19,39 @@ export default function CheckoutForm({ children }: ICheckoutFormProps) {
   const dispatch = useDispatch();
 
   const [message, setMessage] = useState("");
-  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [formReady, setFormReady] = useState(false);
 
-  const handleSubmit = async (e: React.SyntheticEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+
     if (!stripe || !elements) {
       return;
     }
 
     setIsProcessing(true);
 
-    const { error } = await stripe.confirmPayment({
-      elements,
-      confirmParams: {
-        return_url: `https://${window.location.host}/payment/result`,
-      },
-    });
+    try {
+      const { error } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: `https://${window.location.host}/payment/result`,
+        },
+      });
+      if (error) {
+        setMessage(error?.message || "Oops! Something went wrong.");
+      } else {
+        dispatch(actions.status.update("subscribed"));
+      }
+    } catch(error) {
+      console.log('error -> ', error);      
+      setMessage("Oops! Something went wrong.");
+    } finally { 
+      setIsProcessing(false);
+    }  
+    
 
-    if (error) {
-      setMessage(error?.message || "Oops! Something went wrong.");
-    }
-    dispatch(actions.status.update("subscribed"));
-    setIsProcessing(false);
   };
 
   return (
@@ -51,13 +61,13 @@ export default function CheckoutForm({ children }: ICheckoutFormProps) {
       onSubmit={handleSubmit}
     >
       {children ? children : null}
-      <PaymentElement />
-      <MainButton color="blue" disabled={isProcessing} id="submit">
+      <PaymentElement onReady={() => setFormReady(true)} />
+      <MainButton color="blue" disabled={isProcessing || !formReady} id="submit">
         <span id="button-text">
           {isProcessing ? "Processing..." : "Pay now"}
         </span>
       </MainButton>
-      <Title variant="h4">{message}</Title>
+      <Title variant="h5" style={{color: 'red'}}>{message}</Title>
     </form>
   );
 }