Update src/app/page.tsx

src/app/page.tsx

@@ -12,8 +12,11 @@ import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
 import { Flame, Users, CheckCircle, Heart, Sparkles, Mail, Instagram, Facebook, Youtube, Twitter } from "lucide-react";
+import { loadStripe } from '@stripe/stripe-js';
 import { useState } from 'react';
 
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '');
+
 export default function LandingPage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -31,7 +34,7 @@ export default function LandingPage() {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          amount: 50,
+          amount: 5000,
         }),
       });
 
@@ -40,11 +43,18 @@ export default function LandingPage() {
       }
 
       const { sessionId } = await response.json();
+      const stripe = await stripePromise;
 
-      if (sessionId) {
+      if (!stripe) {
-        window.open(`https://checkout.stripe.com/pay/${sessionId}`, '_blank');
+        throw new Error('Stripe failed to load');
-      } else {
+      }
-        setError('Payment session creation failed');
+
+      const { error: redirectError } = await stripe.redirectToCheckout({
+        sessionId,
+      });
+
+      if (redirectError) {
+        setError(redirectError.message || 'Payment failed');
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Payment error occurred');