feat: Complete checkout overhaul with Stripe PaymentIntent integration and abandoned cart recovery

2025-10-07 22:25:03 +02:00
parent dd5545605c
commit aa8c6c67c5
38 changed files with 1848 additions and 878 deletions
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -8,14 +8,19 @@ import AppLayout from './Components/Layout/AppLayout';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
 import { Toaster } from 'react-hot-toast';
+import { Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';

 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

+// Initialize Stripe
+const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '');
+
 createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : appName,
    resolve: (name) => resolvePageComponent(
-      `./Pages/${name}.tsx`,
-      import.meta.glob('./Pages/**/*.tsx')
+      `./pages/${name}.tsx`,
+      import.meta.glob('./pages/**/*.tsx')
    ).then((page) => {
      if (page) {
        const PageComponent = (page as any).default;
@@ -36,10 +41,12 @@ createInertiaApp({
        }

        root.render(
-            <I18nextProvider i18n={i18n}>
-                <App {...props} />
-                <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
-            </I18nextProvider>
+            <Elements stripe={stripePromise}>
+                <I18nextProvider i18n={i18n}>
+                    <App {...props} />
+                    <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
+                </I18nextProvider>
+            </Elements>
        );
    },
    progress: {
--- a/resources/js/components/Layout/Header.tsx
+++ b/resources/js/components/Layout/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { usePage } from '@inertiajs/react';
 import { Link, router } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { Sun, Moon } from 'lucide-react';
 import { cn } from '@/lib/utils';

 const Header: React.FC = () => {
-  const { auth, locale } = usePage().props as any;
+  const { auth } = usePage().props as any;
  const { t } = useTranslation('auth');
  const { appearance, updateAppearance } = useAppearance();
  const { localizedPath } = useLocalizedRoutes();
@@ -23,15 +23,29 @@ const Header: React.FC = () => {
    updateAppearance(newAppearance);
  };

-  const handleLanguageChange = (value: string) => {
-    router.post('/set-locale', { locale: value }, {
-      preserveState: true,
-      replace: true,
-      onSuccess: () => {
+  const handleLanguageChange = useCallback(async (value: string) => {
+    console.log('handleLanguageChange called with:', value);
+    try {
+      const response = await fetch('/set-locale', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({ locale: value }),
+      });
+
+      console.log('fetch response:', response.status);
+      if (response.ok) {
+        console.log('calling i18n.changeLanguage with:', value);
        i18n.changeLanguage(value);
-      },
-    });
-  };
+        // Reload only the locale prop to update the page props
+        router.reload({ only: ['locale'] });
+      }
+    } catch (error) {
+      console.error('Failed to change locale:', error);
+    }
+  }, []);

  const handleLogout = () => {
    router.post('/logout');
@@ -45,18 +59,24 @@ const Header: React.FC = () => {
            Fotospiel
          </Link>
          <nav className="flex space-x-8">
-            <Link href={localizedPath('/')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              {t('header.home', 'Home')}
-            </Link>
-            <Link href={localizedPath('/packages')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              {t('header.packages', 'Pakete')}
-            </Link>
-            <Link href={localizedPath('/blog')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              {t('header.blog', 'Blog')}
-            </Link>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/')}>
+                {t('header.home', 'Home')}
+              </Link>
+            </Button>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/packages')}>
+                {t('header.packages', 'Pakete')}
+              </Link>
+            </Button>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/blog')}>
+                {t('header.blog', 'Blog')}
+              </Link>
+            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
+                <Button variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
                  Anlässe
                </Button>
              </DropdownMenuTrigger>
@@ -78,9 +98,11 @@ const Header: React.FC = () => {
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
-            <Link href={localizedPath('/kontakt')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              {t('header.contact', 'Kontakt')}
-            </Link>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/kontakt')}>
+                {t('header.contact', 'Kontakt')}
+              </Link>
+            </Button>
          </nav>
          <div className="flex items-center space-x-4">
            <Button
@@ -93,7 +115,7 @@ const Header: React.FC = () => {
              <Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
              <span className="sr-only">Theme Toggle</span>
            </Button>
-            <Select value={locale} onValueChange={handleLanguageChange}>
+            <Select value={i18n.language || 'de'} onValueChange={handleLanguageChange}>
              <SelectTrigger className="w-[70px] h-8">
                <SelectValue placeholder="DE" />
              </SelectTrigger>
@@ -140,7 +162,7 @@ const Header: React.FC = () => {
              <>
                <Link
                  href={localizedPath('/login')}
-                  className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+                  className="text-gray-700 hover:text-pink-600 dark:text-gray-300 dark:hover:text-pink-400 font-medium transition-colors duration-200"
                >
                  {t('header.login')}
                </Link>
--- a/resources/js/components/ui/Steps.tsx
+++ b/resources/js/components/ui/Steps.tsx
@@ -8,6 +8,7 @@ interface Step {
  id: string
  title: string
  description: string
+  details?: string
 }

 interface StepsProps {
@@ -33,10 +34,18 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
              {index + 1}
            </div>
            <div className="mt-2 text-xs font-medium text-center">
-              <p className={cn(index === currentStep ? "text-blue-600" : "text-gray-500")}>
+              <p className={cn(
+                "font-semibold",
+                index === currentStep ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
+              )}>
                {step.title}
              </p>
-              <p className="text-xs text-gray-400">{step.description}</p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{step.description}</p>
+              {step.details && index === currentStep && (
+                <p className="text-xs text-blue-500 dark:text-blue-300 mt-1 font-medium">
+                  {step.details}
+                </p>
+              )}
            </div>
            {index < steps.length - 1 && (
              <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">
--- a/resources/js/hooks/useLocalizedRoutes.ts
+++ b/resources/js/hooks/useLocalizedRoutes.ts
@@ -21,7 +21,7 @@ export const useLocalizedRoutes = () => {
    const trimmed = path.trim();
    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;

-    console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });
+//    console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });

    // Since prefix-free, return plain path. Locale is handled via session.
    return normalized;
--- a/resources/js/i18n.ts
+++ b/resources/js/i18n.ts
@@ -1,13 +1,17 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n.on('languageChanged', (lng) => {
+  console.log('i18n languageChanged event:', lng);
+  console.trace('languageChanged trace for', lng);
+});

 i18n
  .use(Backend)
-  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
+    lng: localStorage.getItem('i18nextLng') || 'de',
    fallbackLng: 'de',
    supportedLngs: ['de', 'en'],
    ns: ['marketing', 'auth', 'common'],
@@ -20,8 +24,8 @@ i18n
      loadPath: '/lang/{{lng}}/{{ns}}.json',
    },
    detection: {
-      order: ['sessionStorage', 'localStorage', 'htmlTag'],
-      caches: ['sessionStorage'],
+      order: [],
+      caches: ['localStorage'],
    },
    react: {
      useSuspense: false,
--- a/resources/js/pages/auth/LoginForm.tsx
+++ b/resources/js/pages/auth/LoginForm.tsx
@@ -40,18 +40,8 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
  const { t } = useTranslation("auth");
  const resolvedLocale = locale ?? page.props.locale ?? "de";

-  const loginEndpoint = useMemo(() => {
-    if (typeof route === "function") {
-      try {
-        return route("checkout.login");
-      } catch (error) {
-        // Ziggy might not be booted yet; fall back to locale-aware path.
-      }
-    }
-
-    return fallbackRoute(resolvedLocale);
-  }, [resolvedLocale]);
-
+  const loginEndpoint = '/checkout/login';
+      
  const [values, setValues] = useState({
    email: "",
    password: "",
--- a/resources/js/pages/auth/RegisterForm.tsx
+++ b/resources/js/pages/auth/RegisterForm.tsx
@@ -23,6 +23,7 @@ interface RegisterFormProps {
 export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale }: RegisterFormProps) {
  const [privacyOpen, setPrivacyOpen] = useState(false);
  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
  const { t } = useTranslation(['auth', 'common']);
  const page = usePage<{ errors: Record<string, string>; locale?: string; auth?: { user?: any | null } }>();
  const resolvedLocale = locale ?? page.props.locale ?? 'de';
@@ -46,18 +47,8 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
    }
  }, [errors, hasTriedSubmit]);

-  const registerEndpoint = useMemo(() => {
-    if (typeof route === 'function') {
-      try {
-        return route('checkout.register');
-      } catch (error) {
-        // ignore ziggy errors and fall back
-      }
-    }
-
-    return `/${resolvedLocale}/register`;
-  }, [resolvedLocale]);
-
+  const registerEndpoint = '/checkout/register';
+      
  const submit = async (event: React.FormEvent) => {
    event.preventDefault();
    setHasTriedSubmit(true);
@@ -71,6 +62,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
    };

    try {
+      
      const response = await fetch(registerEndpoint, {
        method: 'POST',
        headers: {
--- a/resources/js/pages/marketing/CheckoutWizardPage.tsx
+++ b/resources/js/pages/marketing/CheckoutWizardPage.tsx
@@ -3,20 +3,22 @@ import { Head, usePage } from "@inertiajs/react";
 import MarketingLayout from "@/layouts/marketing/MarketingLayout";
 import type { CheckoutPackage } from "./checkout/types";
 import { CheckoutWizard } from "./checkout/CheckoutWizard";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";

-interface PurchaseWizardPageProps {
+interface CheckoutWizardPageProps {
  package: CheckoutPackage;
  packageOptions: CheckoutPackage[];
  stripePublishableKey: string;
  privacyHtml: string;
 }

-export default function PurchaseWizardPage({
+export default function CheckoutWizardPage({
  package: initialPackage,
  packageOptions,
  stripePublishableKey,
  privacyHtml,
-}: PurchaseWizardPageProps) {
+}: CheckoutWizardPageProps) {
  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string } | null } }>();
  const currentUser = page.props.auth?.user ?? null;

@@ -37,6 +39,19 @@ export default function PurchaseWizardPage({
      <Head title="Checkout Wizard" />
      <div className="min-h-screen bg-muted/20 py-12">
        <div className="mx-auto w-full max-w-4xl px-4">
+          {/* Abbruch-Button oben rechts */}
+          <div className="flex justify-end mb-4">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => window.location.href = '/packages'}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4 mr-2" />
+              Abbrechen
+            </Button>
+          </div>
+
          <CheckoutWizard
            initialPackage={initialPackage}
            packageOptions={dedupedOptions}
--- a/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
+++ b/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
@@ -23,11 +23,31 @@ interface CheckoutWizardProps {
  initialStep?: CheckoutStepId;
 }

-const stepConfig: { id: CheckoutStepId; title: string; description: string }[] = [
-  { id: "package", title: "Paket", description: "Auswahl und Vergleich" },
-  { id: "auth", title: "Konto", description: "Login oder Registrierung" },
-  { id: "payment", title: "Zahlung", description: "Stripe oder PayPal" },
-  { id: "confirmation", title: "Fertig", description: "Zugang aktiv" },
+const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
+  {
+    id: "package",
+    title: "Paket wählen",
+    description: "Auswahl und Vergleich",
+    details: "Wähle das passende Paket für deine Bedürfnisse"
+  },
+  {
+    id: "auth",
+    title: "Konto einrichten",
+    description: "Login oder Registrierung",
+    details: "Erstelle ein Konto oder melde dich an"
+  },
+  {
+    id: "payment",
+    title: "Bezahlung",
+    description: "Sichere Zahlung",
+    details: "Gib deine Zahlungsdaten ein"
+  },
+  {
+    id: "confirmation",
+    title: "Fertig!",
+    description: "Zugang aktiv",
+    details: "Dein Paket ist aktiviert"
+  },
 ];

 const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
--- a/resources/js/pages/marketing/checkout/WizardContext.tsx
+++ b/resources/js/pages/marketing/checkout/WizardContext.tsx
@@ -1,110 +1,25 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
-import type { CheckoutPackage, CheckoutStepId, CheckoutWizardContextValue, CheckoutWizardState } from "./types";
+  const cancelCheckout = useCallback(() => {
+    // Track abandoned checkout (fire and forget)
+    if (state.authUser || state.selectedPackage) {
+      fetch('/checkout/track-abandoned', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({
+          package_id: state.selectedPackage.id,
+          last_step: ['package', 'auth', 'payment', 'confirmation'].indexOf(state.currentStep) + 1,
+          user_id: state.authUser?.id,
+          email: state.authUser?.email,
+        }),
+      }).catch(error => {
+        console.error('Failed to track abandoned checkout:', error);
+      });
+    }

-interface CheckoutWizardProviderProps {
-  initialPackage: CheckoutPackage;
-  packageOptions: CheckoutPackage[];
-  initialStep?: CheckoutStepId;
-  initialAuthUser?: CheckoutWizardState['authUser'];
-  initialIsAuthenticated?: boolean;
-  children: React.ReactNode;
-}
-
-const CheckoutWizardContext = createContext<CheckoutWizardContextValue | undefined>(undefined);
-
-export const CheckoutWizardProvider: React.FC<CheckoutWizardProviderProps> = ({
-  initialPackage,
-  packageOptions,
-  initialStep = 'package',
-  initialAuthUser = null,
-  initialIsAuthenticated,
-  children,
-}) => {
-  const [state, setState] = useState<CheckoutWizardState>(() => ({
-    currentStep: initialStep,
-    selectedPackage: initialPackage,
-    packageOptions,
-    isAuthenticated: Boolean(initialIsAuthenticated || initialAuthUser),
-    authUser: initialAuthUser ?? null,
-    paymentProvider: undefined,
-    isProcessing: false,
-  }));
-
-  const setStep = useCallback((step: CheckoutStepId) => {
-    setState((prev) => ({ ...prev, currentStep: step }));
-  }, []);
-
-  const nextStep = useCallback(() => {
-    setState((prev) => {
-      const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
-      const currentIndex = order.indexOf(prev.currentStep);
-      const nextIndex = currentIndex === -1 ? 0 : Math.min(order.length - 1, currentIndex + 1);
-      return { ...prev, currentStep: order[nextIndex] };
-    });
-  }, []);
-
-  const previousStep = useCallback(() => {
-    setState((prev) => {
-      const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
-      const currentIndex = order.indexOf(prev.currentStep);
-      const nextIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
-      return { ...prev, currentStep: order[nextIndex] };
-    });
-  }, []);
-
-  const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
-    setState((prev) => ({
-      ...prev,
-      selectedPackage: pkg,
-      paymentProvider: undefined,
-    }));
-  }, []);
-
-  const markAuthenticated = useCallback<CheckoutWizardContextValue['markAuthenticated']>((user) => {
-    setState((prev) => ({
-      ...prev,
-      isAuthenticated: Boolean(user),
-      authUser: user ?? null,
-    }));
-  }, []);
-
-  const setPaymentProvider = useCallback<CheckoutWizardContextValue['setPaymentProvider']>((provider) => {
-    setState((prev) => ({
-      ...prev,
-      paymentProvider: provider,
-    }));
-  }, []);
-
-  const resetPaymentState = useCallback(() => {
-    setState((prev) => ({
-      ...prev,
-      paymentProvider: undefined,
-      isProcessing: false,
-    }));
-  }, []);
-
-  const value = useMemo<CheckoutWizardContextValue>(() => ({
-    ...state,
-    setStep,
-    nextStep,
-    previousStep,
-    setSelectedPackage,
-    markAuthenticated,
-    setPaymentProvider,
-    resetPaymentState,
-  }), [state, setStep, nextStep, previousStep, setSelectedPackage, markAuthenticated, setPaymentProvider, resetPaymentState]);
-
-  return (
-    <CheckoutWizardContext.Provider value={value}>
-      {children}
-    </CheckoutWizardContext.Provider>
-  );
-};
-
-export const useCheckoutWizard = () => {
-  const context = useContext(CheckoutWizardContext);
-  if (!context) {
-    throw new Error('useCheckoutWizard must be used within CheckoutWizardProvider');
-  }
-  return context;
-};
+    // State aus localStorage entfernen
+    localStorage.removeItem('checkout-wizard-state');
+    // Zur Package-Übersicht zurückleiten
+    window.location.href = '/packages';
+  }, [state]);
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -3,8 +3,8 @@ import { usePage } from "@inertiajs/react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
-import LoginForm, { AuthUserPayload } from "../../auth/LoginForm";
-import RegisterForm, { RegisterSuccessPayload } from "../../auth/RegisterForm";
+import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
+import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";

 interface AuthStepProps {
  privacyHtml: string;
--- a/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
@@ -15,7 +15,7 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfil
      <Alert>
        <AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
        <AlertDescription>
-          {Ihr Paket "" ist aktiviert. Wir haben Ihnen eine Bestaetigung per E-Mail gesendet.}
+          Ihr Paket "{selectedPackage.name}" ist aktiviert. Wir haben Ihnen eine Bestätigung per E-Mail gesendet.
        </AlertDescription>
      </Alert>
      <div className="flex flex-wrap gap-3 justify-end">
--- a/resources/js/pages/marketing/checkout/steps/PackageStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PackageStep.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
-import { Check, Package as PackageIcon } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Check, Package as PackageIcon, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -70,6 +70,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc

 export const PackageStep: React.FC = () => {
  const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
+  const [isLoading, setIsLoading] = useState(false);

  const comparablePackages = useMemo(() => {
    return packageOptions.filter((pkg) => pkg.type === selectedPackage.type);
@@ -83,13 +84,29 @@ export const PackageStep: React.FC = () => {
    resetPaymentState();
  };

+  const handleNextStep = async () => {
+    setIsLoading(true);
+    // Kleine Verzögerung für bessere UX
+    setTimeout(() => {
+      nextStep();
+      setIsLoading(false);
+    }, 300);
+  };
+
  return (
    <div className="grid gap-8 lg:grid-cols-[2fr_1fr]">
      <div className="space-y-6">
        <PackageSummary pkg={selectedPackage} />
        <div className="flex justify-end">
-          <Button size="lg" onClick={nextStep}>
-            Weiter zum Konto
+          <Button size="lg" onClick={handleNextStep} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Wird geladen...
+              </>
+            ) : (
+              "Weiter zum Konto"
+            )}
          </Button>
        </div>
      </div>
--- a/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { useState, useEffect } from "react";
+import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -9,13 +10,138 @@ interface PaymentStepProps {
 }

 export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
-  const { selectedPackage, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
+  const stripe = useStripe();
+  const elements = useElements();
+  const { selectedPackage, authUser, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
+
+  const [clientSecret, setClientSecret] = useState<string>('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [paymentStatus, setPaymentStatus] = useState<'idle' | 'processing' | 'succeeded' | 'failed'>('idle');

  useEffect(() => {
    resetPaymentState();
  }, [selectedPackage.id, resetPaymentState]);

-  const isFree = selectedPackage.price === 0;
+  const isFree = selectedPackage.price <= 0;
+
+  // Payment Intent für kostenpflichtige Pakete laden
+  useEffect(() => {
+    if (isFree || !authUser) return;
+
+    const loadPaymentIntent = async () => {
+      try {
+        const response = await fetch('/stripe/create-payment-intent', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+          },
+          body: JSON.stringify({
+            package_id: selectedPackage.id,
+          }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.clientSecret) {
+          setClientSecret(data.clientSecret);
+          setError('');
+        } else {
+          setError(data.error || 'Fehler beim Laden der Zahlungsdaten');
+        }
+      } catch (err) {
+        setError('Netzwerkfehler beim Laden der Zahlungsdaten');
+      }
+    };
+
+    loadPaymentIntent();
+  }, [selectedPackage.id, authUser, isFree]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!stripe || !elements) {
+      setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
+      return;
+    }
+
+    if (!clientSecret) {
+      setError('Zahlungsdaten konnten nicht geladen werden. Bitte erneut versuchen.');
+      return;
+    }
+
+    setIsProcessing(true);
+    setError('');
+    setPaymentStatus('processing');
+
+    try {
+      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: `${window.location.origin}/checkout/success`,
+        },
+        redirect: 'if_required', // Wichtig für SCA
+      });
+
+      if (stripeError) {
+        console.error('Stripe Payment Error:', stripeError);
+        let errorMessage = 'Zahlung fehlgeschlagen. ';
+
+        switch (stripeError.type) {
+          case 'card_error':
+            errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
+            break;
+          case 'validation_error':
+            errorMessage += 'Eingabedaten sind ungültig.';
+            break;
+          case 'api_connection_error':
+            errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
+            break;
+          case 'api_error':
+            errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
+            break;
+          case 'authentication_error':
+            errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
+            break;
+          default:
+            errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
+        }
+
+        setError(errorMessage);
+        setPaymentStatus('failed');
+      } else if (paymentIntent) {
+        switch (paymentIntent.status) {
+          case 'succeeded':
+            setPaymentStatus('succeeded');
+            // Kleiner Delay für bessere UX
+            setTimeout(() => nextStep(), 1000);
+            break;
+          case 'processing':
+            setError('Zahlung wird verarbeitet. Bitte warten...');
+            setPaymentStatus('processing');
+            break;
+          case 'requires_payment_method':
+            setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
+            setPaymentStatus('failed');
+            break;
+          case 'requires_confirmation':
+            setError('Zahlung muss bestätigt werden.');
+            setPaymentStatus('failed');
+            break;
+          default:
+            setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
+            setPaymentStatus('failed');
+        }
+      }
+    } catch (err) {
+      console.error('Unexpected payment error:', err);
+      setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
+      setPaymentStatus('failed');
+    } finally {
+      setIsProcessing(false);
+    }
+  };

  if (isFree) {
    return (
@@ -23,7 +149,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
        <Alert>
          <AlertTitle>Kostenloses Paket</AlertTitle>
          <AlertDescription>
-            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestaetigung.
+            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
          </AlertDescription>
        </Alert>
        <div className="flex justify-end">
@@ -42,35 +168,58 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
          <TabsTrigger value="stripe">Stripe</TabsTrigger>
          <TabsTrigger value="paypal">PayPal</TabsTrigger>
        </TabsList>
+
        <TabsContent value="stripe" className="mt-4">
-          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
-            <p className="text-sm text-muted-foreground">
-              Karten- oder SEPA-Zahlung via Stripe Elements. Wir erzeugen beim Fortfahren einen Payment Intent.
-            </p>
-            <Alert variant="secondary">
-              <AlertTitle>Integration folgt</AlertTitle>
-              <AlertDescription>
-                Stripe Elements wird im naechsten Schritt integriert. Aktuell dient dieser Block als Platzhalter fuer UI und API Hooks.
-              </AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button disabled>Stripe Zahlung starten</Button>
-            </div>
-          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {clientSecret ? (
+              <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  Sichere Zahlung mit Kreditkarte, Debitkarte oder SEPA-Lastschrift.
+                </p>
+                <PaymentElement />
+                <Button
+                  type="submit"
+                  disabled={!stripe || isProcessing}
+                  size="lg"
+                  className="w-full"
+                >
+                  {isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage.price})`}
+                </Button>
+              </div>
+            ) : (
+              <div className="rounded-lg border bg-card p-6 shadow-sm">
+                <Alert>
+                  <AlertTitle>Lade Zahlungsdaten...</AlertTitle>
+                  <AlertDescription>
+                    Bitte warten Sie, während wir die Zahlungsdaten vorbereiten.
+                  </AlertDescription>
+                </Alert>
+              </div>
+            )}
+          </form>
        </TabsContent>
+
        <TabsContent value="paypal" className="mt-4">
          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
            <p className="text-sm text-muted-foreground">
-              PayPal Express Checkout mit Rueckleitung zur Bestaetigung. Wir hinterlegen Paket- und Tenant-Daten im Order-Metadata.
+              PayPal Express Checkout mit Rückleitung zur Bestätigung.
            </p>
-            <Alert variant="secondary">
-              <AlertTitle>Integration folgt</AlertTitle>
+            <Alert>
+              <AlertTitle>PayPal Integration</AlertTitle>
              <AlertDescription>
-                PayPal Buttons werden im Folge-PR angebunden. Dieser Platzhalter zeigt den spaeteren Container fuer die Buttons.
+                PayPal wird in einem späteren Schritt implementiert. Aktuell nur Stripe verfügbar.
              </AlertDescription>
            </Alert>
            <div className="flex justify-end">
-              <Button disabled>PayPal Bestellung anlegen</Button>
+              <Button disabled size="lg">
+                PayPal (bald verfügbar)
+              </Button>
            </div>
          </div>
        </TabsContent>
--- a/resources/js/pages/marketing/checkout/types.ts
+++ b/resources/js/pages/marketing/checkout/types.ts
@@ -35,5 +35,6 @@ export interface CheckoutWizardContextValue extends CheckoutWizardState {
  markAuthenticated: (user: CheckoutWizardState['authUser']) => void;
  setPaymentProvider: (provider: CheckoutWizardState['paymentProvider']) => void;
  resetPaymentState: () => void;
+  cancelCheckout: () => void;
 }

--- a/resources/lang/de/auth.json
+++ b/resources/lang/de/auth.json
@@ -21,8 +21,12 @@
  "login": {
    "title": "Anmelden",
    "username_or_email": "Username oder E-Mail",
+    "email": "E-Mail-Adresse",
+    "email_placeholder": "ihre@email.de",
    "password": "Passwort",
+    "password_placeholder": "Ihr Passwort",
    "remember": "Angemeldet bleiben",
+    "forgot": "Passwort vergessen?",
    "submit": "Anmelden"
  },
  "register": {
--- a/resources/lang/de/emails.php
+++ b/resources/lang/de/emails.php
@@ -0,0 +1,52 @@
+<?php
+
+return [
+    'welcome' => [
+        'subject' => 'Willkommen bei Fotospiel, :name!',
+        'greeting' => 'Willkommen bei Fotospiel, :name!',
+        'body' => 'Vielen Dank für Ihre Registrierung. Ihr Account ist nun aktiv.',
+        'username' => 'Benutzername: :username',
+        'email' => 'E-Mail: :email',
+        'verification' => 'Bitte verifizieren Sie Ihre E-Mail-Adresse, um auf das Admin-Panel zuzugreifen.',
+        'footer' => 'Mit freundlichen Grüßen,<br>Das Fotospiel-Team',
+    ],
+
+    'purchase' => [
+        'subject' => 'Kauf-Bestätigung - :package',
+        'greeting' => 'Vielen Dank für Ihren Kauf, :name!',
+        'package' => 'Package: :package',
+        'price' => 'Preis: :price €',
+        'activation' => 'Das Package ist nun in Ihrem Tenant-Account aktiviert.',
+        'footer' => 'Mit freundlichen Grüßen,<br>Das Fotospiel-Team',
+    ],
+
+    'abandoned_checkout' => [
+        'subject_1h' => 'Ihr :package Paket wartet auf Sie',
+        'subject_24h' => 'Erinnerung: Schließen Sie Ihren Kauf ab',
+        'subject_1w' => 'Letzte Chance: Ihr gespeichertes Paket',
+
+        'greeting' => 'Hallo :name,',
+
+        'body_1h' => 'Sie haben vor kurzem begonnen, unser :package Paket zu kaufen, aber noch nicht abgeschlossen. Ihr Warenkorb ist für Sie reserviert.',
+
+        'body_24h' => 'Erinnerung: Ihr :package Paket wartet seit 24 Stunden auf Sie. Schließen Sie jetzt Ihren Kauf ab und sichern Sie sich alle Vorteile.',
+
+        'body_1w' => 'Letzte Erinnerung: Ihr :package Paket wartet seit einer Woche auf Sie. Dies ist Ihre letzte Chance, den Kauf abzuschließen.',
+
+        'cta_button' => 'Jetzt fortfahren',
+        'cta_link' => 'Oder kopieren Sie diesen Link: :url',
+
+        'benefits_title' => 'Warum jetzt kaufen?',
+        'benefit1' => 'Schneller Checkout in 2 Minuten',
+        'benefit2' => 'Sichere Zahlung mit Stripe',
+        'benefit3' => 'Sofortiger Zugriff nach Zahlung',
+        'benefit4' => '10% Rabatt sichern',
+
+        'footer' => 'Mit freundlichen Grüßen,<br>Das Fotospiel-Team',
+    ],
+
+    'contact' => [
+        'subject' => 'Neue Kontakt-Anfrage',
+        'body' => 'Kontakt-Anfrage von :name (:email): :message',
+    ],
+];
--- a/resources/lang/en/auth.json
+++ b/resources/lang/en/auth.json
@@ -0,0 +1,50 @@
+{
+  "login_failed": "Invalid email or password.",
+  "login_success": "You are now logged in.",
+  "registration_failed": "Registration failed.",
+  "registration_success": "Registration successful – proceed with purchase.",
+  "already_logged_in": "You are already logged in.",
+  "failed_credentials": "Wrong credentials.",
+  "header": {
+    "login": "Login",
+    "register": "Register",
+    "home": "Home",
+    "packages": "Packages",
+    "blog": "Blog",
+    "occasions": {
+      "wedding": "Wedding",
+      "birthday": "Birthday",
+      "corporate": "Corporate Event"
+    },
+    "contact": "Contact"
+  },
+  "login": {
+    "title": "Login",
+    "username_or_email": "Username or Email",
+    "email": "Email Address",
+    "email_placeholder": "your@email.com",
+    "password": "Password",
+    "password_placeholder": "Your password",
+    "remember": "Stay logged in",
+    "forgot": "Forgot password?",
+    "submit": "Login"
+  },
+  "register": {
+    "title": "Register",
+    "name": "Full Name",
+    "username": "Username",
+    "email": "Email Address",
+    "password": "Password",
+    "password_confirmation": "Confirm password",
+    "first_name": "First Name",
+    "last_name": "Last Name",
+    "address": "Address",
+    "phone": "Phone Number",
+    "privacy_consent": "I agree to the privacy policy and accept the processing of my personal data.",
+    "submit": "Register"
+  },
+  "verification": {
+    "notice": "Please verify your email address.",
+    "resend": "Resend email"
+  }
+}
--- a/resources/lang/en/emails.php
+++ b/resources/lang/en/emails.php
@@ -0,0 +1,52 @@
+<?php
+
+return [
+    'welcome' => [
+        'subject' => 'Welcome to Fotospiel, :name!',
+        'greeting' => 'Welcome to Fotospiel, :name!',
+        'body' => 'Thank you for your registration. Your account is now active.',
+        'username' => 'Username: :username',
+        'email' => 'Email: :email',
+        'verification' => 'Please verify your email address to access the admin panel.',
+        'footer' => 'Best regards,<br>The Fotospiel Team',
+    ],
+
+    'purchase' => [
+        'subject' => 'Purchase Confirmation - :package',
+        'greeting' => 'Thank you for your purchase, :name!',
+        'package' => 'Package: :package',
+        'price' => 'Price: :price €',
+        'activation' => 'The package is now activated in your tenant account.',
+        'footer' => 'Best regards,<br>The Fotospiel Team',
+    ],
+
+    'abandoned_checkout' => [
+        'subject_1h' => 'Your :package Package is Waiting for You',
+        'subject_24h' => 'Reminder: Complete Your Purchase',
+        'subject_1w' => 'Last Chance: Your Saved Package',
+
+        'greeting' => 'Hello :name,',
+
+        'body_1h' => 'You recently started purchasing our :package package but haven\'t completed it yet. Your cart is reserved for you.',
+
+        'body_24h' => 'Reminder: Your :package package has been waiting for 24 hours. Complete your purchase now and secure all the benefits.',
+
+        'body_1w' => 'Final reminder: Your :package package has been waiting for a week. This is your last chance to complete the purchase.',
+
+        'cta_button' => 'Continue Now',
+        'cta_link' => 'Or copy this link: :url',
+
+        'benefits_title' => 'Why buy now?',
+        'benefit1' => 'Quick checkout in 2 minutes',
+        'benefit2' => 'Secure payment with Stripe',
+        'benefit3' => 'Instant access after payment',
+        'benefit4' => 'Secure 10% discount',
+
+        'footer' => 'Best regards,<br>The Fotospiel Team',
+    ],
+
+    'contact' => [
+        'subject' => 'New Contact Request',
+        'body' => 'Contact request from :name (:email): :message',
+    ],
+];
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -3,6 +3,7 @@
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">

        {{-- Inline script to detect system dark mode preference and apply it immediately --}}
        <script>
--- a/resources/views/emails/abandoned-checkout.blade.php
+++ b/resources/views/emails/abandoned-checkout.blade.php
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ __('emails.abandoned_checkout.subject_' . $timing, ['package' => $package->name]) }}</title>
+    <style>
+        .cta-button {
+            background-color: #007bff;
+            color: white;
+            padding: 12px 24px;
+            text-decoration: none;
+            border-radius: 4px;
+            display: inline-block;
+            margin: 10px 0;
+        }
+        .benefits {
+            background-color: #f8f9fa;
+            padding: 15px;
+            border-radius: 4px;
+            margin: 15px 0;
+        }
+        .benefit-item {
+            margin: 5px 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>{{ __('emails.abandoned_checkout.greeting', ['name' => $user->fullName]) }}</h1>
+
+    <p>{{ __('emails.abandoned_checkout.body_' . $timing, ['package' => $package->name]) }}</p>
+
+    <a href="{{ $resumeUrl }}" class="cta-button">
+        {{ __('emails.abandoned_checkout.cta_button') }}
+    </a>
+
+    <p>{{ __('emails.abandoned_checkout.cta_link', ['url' => $resumeUrl]) }}</p>
+
+    <div class="benefits">
+        <h3>{{ __('emails.abandoned_checkout.benefits_title') }}</h3>
+        <div class="benefit-item">✓ {{ __('emails.abandoned_checkout.benefit1') }}</div>
+        <div class="benefit-item">✓ {{ __('emails.abandoned_checkout.benefit2') }}</div>
+        <div class="benefit-item">✓ {{ __('emails.abandoned_checkout.benefit3') }}</div>
+        <div class="benefit-item">✓ {{ __('emails.abandoned_checkout.benefit4') }}</div>
+    </div>
+
+    <p>{!! __('emails.abandoned_checkout.footer') !!}</p>
+</body>
+</html>
--- a/resources/views/emails/purchase.blade.php
+++ b/resources/views/emails/purchase.blade.php
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Purchase Confirmation</title>
+    <title>{{ __('emails.purchase.subject', ['package' => $package->name]) }}</title>
 </head>
 <body>
-    <h1>Kauf-Bestätigung</h1>
-    <p>Vielen Dank für Ihren Kauf, {{ $purchase->user->fullName }}!</p>
-    <p>Package: {{ $purchase->package->name }}</p>
-    <p>Preis: {{ $purchase->amount }} €</p>
-    <p>Das Package ist nun in Ihrem Tenant-Account aktiviert.</p>
-    <p>Mit freundlichen Grüßen,<br>Das Fotospiel-Team</p>
+    <h1>{{ __('emails.purchase.greeting', ['name' => $user->fullName]) }}</h1>
+    <p>{{ __('emails.purchase.package', ['package' => $package->name]) }}</p>
+    <p>{{ __('emails.purchase.price', ['price' => $purchase->price]) }}</p>
+    <p>{{ __('emails.purchase.activation') }}</p>
+    <p>{!! __('emails.purchase.footer') !!}</p>
 </body>
 </html>
--- a/resources/views/emails/welcome.blade.php
+++ b/resources/views/emails/welcome.blade.php
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Welcome to Fotospiel</title>
+    <title>{{ __('emails.welcome.subject', ['name' => $user->fullName]) }}</title>
 </head>
 <body>
-    <h1>Willkommen bei Fotospiel, {{ $user->fullName }}!</h1>
-    <p>Vielen Dank für Ihre Registrierung. Ihr Account ist nun aktiv.</p>
-    <p>Username: {{ $user->username }}</p>
-    <p>E-Mail: {{ $user->email }}</p>
-    <p>Bitte verifizieren Sie Ihre E-Mail-Adresse, um auf das Admin-Panel zuzugreifen.</p>
-    <p>Mit freundlichen Grüßen,<br>Das Fotospiel-Team</p>
+    <h1>{{ __('emails.welcome.greeting', ['name' => $user->fullName]) }}</h1>
+    <p>{{ __('emails.welcome.body') }}</p>
+    <p>{{ __('emails.welcome.username', ['username' => $user->username]) }}</p>
+    <p>{{ __('emails.welcome.email', ['email' => $user->email]) }}</p>
+    <p>{{ __('emails.welcome.verification') }}</p>
+    <p>{!! __('emails.welcome.footer') !!}</p>
 </body>
 </html>