payment module updated for pricing page

app/(defaults)/payment/cancel/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+// import { Metadata } from "next";
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+// export const metadata: Metadata = {
+//   title: "CrawlerX",
+// };
+
+const PaymentCancel = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      // If no token, redirect to login page
+      router.push("/login");
+    }
+  }, [router]);
+
+  return <div>Payment Cancel</div>;
+};
+
+export default PaymentCancel;

app/(defaults)/payment/success/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+// import { Metadata } from "next";
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+// export const metadata: Metadata = {
+//   title: "CrawlerX",
+// };
+
+const PaymentSuccess = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      // If no token, redirect to login page
+      router.push("/login");
+    }
+  }, [router]);
+
+  return <div>Payment Success</div>;
+};
+
+export default PaymentSuccess;

components/pricing-table/components-pricing-table-toggle.tsx

@@ -14,11 +14,11 @@ interface Plan {
   planId: string;
 }
 
-// ⚡ Lazy load Stripe to avoid undefined.match errors
+// ⚡ Lazy load Stripe
 let stripePromise: Promise<Stripe | null> | null = null;
 const getStripe = () => {
   if (!stripePromise) {
-    const key = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
+    const key = "pk_test_51SB8SnIFk8fh986Gfv0gq9ggpjTO2RiSyIK9VHaonLdLMSOmJf51dGAu8yzwsRKrKwtvauchhD1cJ5Q8dTzMSZ5E00oSdbYBXO";
     if (!key) throw new Error('Stripe publishable key is not defined!');
     stripePromise = loadStripe(key);
   }
@@ -27,6 +27,7 @@ const getStripe = () => {
 
 const ComponentsPricingTableToggle: React.FC = () => {
   const [yearlyPrice, setYearlyPrice] = useState(false);
+  const [email, setEmail] = useState('');
 
   const plans: Plan[] = [
     {
@@ -61,17 +62,24 @@ const ComponentsPricingTableToggle: React.FC = () => {
 
   // 🔹 Stripe Checkout handler
   const handleBuyNow = async (plan: Plan) => {
+    // if (!email) {
+    //   alert("Please enter your email before checkout");
+    //   return;
+    // }
+
     try {
       const stripe = await getStripe();
       if (!stripe) return;
 
+      const amount = yearlyPrice ? plan.yearly : plan.monthly;
+
       // 🔹 Call backend API to create Checkout Session
       const { data } = await axios.post(
-        'https://api.crawlerx.co/api/payment/create-intent',
+        'https://api.crawlerx.co/api/payment/create-checkout-session',
         {
+          email:"alaguraj0361@gmail.com",
+          amount,
           planId: plan.planId,
-          price: yearlyPrice ? plan.yearly : plan.monthly,
-          billing: yearlyPrice ? 'yearly' : 'monthly',
         }
       );
 
@@ -83,6 +91,7 @@ const ComponentsPricingTableToggle: React.FC = () => {
       // 🔹 Redirect to Stripe Checkout
       const { error } = await stripe.redirectToCheckout({ sessionId: data.sessionId });
       if (error) console.error('Stripe redirect error:', error.message);
+
     } catch (err: any) {
       console.error('Error creating checkout session:', err.response?.data || err.message);
     }
@@ -91,7 +100,19 @@ const ComponentsPricingTableToggle: React.FC = () => {
   return (
     <div className="mb-5 panel">
       <div className="mx-auto max-w-[320px] dark:text-white-dark md:max-w-[1140px]">
-        {/* Toggle */}
+
+        {/* Email Input */}
+        <div className="my-4 flex justify-center">
+          <input
+            type="email"
+            placeholder="Enter your email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="border rounded p-2 w-80"
+          />
+        </div>
+
+        {/* Toggle Monthly / Yearly */}
         <div className="mt-5 flex justify-center space-x-4 text-center text-base font-semibold md:mt-10">
           <span className={`${!yearlyPrice ? 'text-primary' : 'text-white-dark'}`}>Monthly</span>
           <label className="relative h-6 w-12">
@@ -106,7 +127,7 @@ const ComponentsPricingTableToggle: React.FC = () => {
               ltr:before:left-1 ltr:peer-checked:before:left-7">
             </span>
           </label>
-          <span className={`relative ${yearlyPrice ? 'text-primary' : ' text-white-dark'}  `}>
+          <span className={`relative ${yearlyPrice ? 'text-primary' : ' text-white-dark'}`}>
             Yearly
             <span className="badge absolute my-auto hidden whitespace-nowrap rounded-full bg-success ltr:left-full ltr:ml-2">
               20% Off