vor marketing zu website umbenennung. stripe ist lauffähig

app/Http/Controllers/CheckoutController.php

@@ -1,75 +1,182 @@
-    private function transformUser(?User $user): ?array
-    {
-        if (!$user) {
-            return null;
-        }
+<?php
 
-        return [
-            'id' => $user->id,
-            'email' => $user->email,
-            'name' => trim(($user->first_name ?? '').' '.($user->last_name ?? '')) ?: $user->name,
-            'pending_purchase' => (bool) $user->pending_purchase,
-            'email_verified_at' => $user->email_verified_at,
-        ];
+namespace App\Http\Controllers;
+
+use App\Models\Package;
+use App\Models\Tenant;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rules\Password;
+use Inertia\Inertia;
+use Laravel\Cashier\Cashier;
+use Stripe\PaymentIntent;
+use Stripe\Stripe;
+
+class CheckoutController extends Controller
+{
+    public function show(Package $package)
+    {
+        // Alle verfügbaren Pakete laden
+        $packages = Package::all();
+
+        return Inertia::render('marketing/CheckoutWizardPage', [
+            'package' => $package,
+            'packageOptions' => $packages,
+            'stripePublishableKey' => config('services.stripe.key'),
+            'privacyHtml' => view('legal.datenschutz-partial')->render(),
+            'auth' => [
+                'user' => Auth::user(),
+            ],
+        ]);
     }
 
-    /**
-     * Track an abandoned checkout for reminder emails
-     */
-    public function trackAbandonedCheckout(Request $request): JsonResponse
+    public function register(Request $request)
     {
-        $request->validate([
-            'package_id' => 'required|integer|exists:packages,id',
-            'last_step' => 'required|integer|min:1|max:4',
-            'user_id' => 'nullable|integer|exists:users,id',
-            'email' => 'nullable|email',
+        $validator = Validator::make($request->all(), [
+            'email' => 'required|email|unique:users,email',
+            'password' => ['required', 'confirmed', Password::defaults()],
+            'package_id' => 'required|exists:packages,id',
+            'terms' => 'required|accepted',
         ]);
 
+        if ($validator->fails()) {
+            return response()->json([
+                'errors' => $validator->errors(),
+            ], 422);
+        }
+
+        $package = Package::findOrFail($request->package_id);
+
+        DB::transaction(function () use ($request, $package) {
+            // User erstellen
+            $user = User::create([
+                'email' => $request->email,
+                'password' => Hash::make($request->password),
+                'pending_purchase' => true,
+            ]);
+
+            // Tenant erstellen
+            $tenant = Tenant::create([
+                'name' => 'Neuer Tenant',
+                'domain' => null,
+                'database' => null,
+                'user_id' => $user->id,
+            ]);
+
+            // Package zuweisen
+            $tenant->packages()->attach($package->id, [
+                'purchased_at' => now(),
+                'expires_at' => $package->is_free ? null : now()->addYear(),
+                'is_active' => $package->is_free, // Kostenlose Pakete sofort aktivieren
+            ]);
+
+            // E-Mail-Verifizierung senden
+            $user->sendEmailVerificationNotification();
+
+            // Willkommens-E-Mail senden
+            Mail::to($user->email)->send(new \App\Mail\WelcomeMail($user, $package));
+        });
+
+        return response()->json([
+            'message' => 'Registrierung erfolgreich. Bitte überprüfen Sie Ihre E-Mail zur Verifizierung.',
+        ]);
+    }
+
+    public function createPaymentIntent(Request $request)
+    {
+        $request->validate([
+            'package_id' => 'required|exists:packages,id',
+        ]);
+
+        $package = Package::findOrFail($request->package_id);
+
+        \Log::info('Create Payment Intent', [
+            'package_id' => $package->id,
+            'package_name' => $package->name,
+            'price' => $package->price,
+            'is_free' => $package->is_free,
+            'user_id' => Auth::id(),
+        ]);
+
+        if ($package->is_free) {
+            \Log::info('Free package detected, returning null client_secret');
+            return response()->json([
+                'client_secret' => null,
+                'free_package' => true,
+            ]);
+        }
+
+        // Stripe API Key setzen
+        Stripe::setApiKey(config('services.stripe.secret'));
+
         try {
-            $userId = $request->user_id;
-            $email = $request->email;
-
-            // Wenn kein user_id aber email, versuche User zu finden
-            if (!$userId && $email) {
-                $user = User::where('email', $email)->first();
-                $userId = $user?->id;
-            }
-
-            // Nur tracken wenn wir einen User haben
-            if (!$userId) {
-                return response()->json(['success' => false, 'message' => 'No user found to track']);
-            }
-
-            $user = User::find($userId);
-            if (!$user) {
-                return response()->json(['success' => false, 'message' => 'User not found']);
-            }
-
-            // Erstelle oder update abandoned checkout
-            AbandonedCheckout::updateOrCreate(
-                [
-                    'user_id' => $userId,
-                    'package_id' => $request->package_id,
+            $paymentIntent = PaymentIntent::create([
+                'amount' => $package->price * 100, // Stripe erwartet Cent
+                'currency' => 'eur',
+                'metadata' => [
+                    'package_id' => $package->id,
+                    'user_id' => Auth::id(),
                 ],
-                [
-                    'email' => $user->email,
-                    'checkout_state' => null, // Später erweitern
-                    'last_step' => $request->last_step,
-                    'abandoned_at' => now(),
-                    'reminded_at' => null,
-                    'reminder_stage' => 'none',
-                    'expires_at' => now()->addDays(7), // 7 Tage gültig
-                    'converted' => false,
-                ]
-            );
+            ]);
 
-            Log::info("Abandoned checkout tracked for user {$userId}, package {$request->package_id}, step {$request->last_step}");
-
-            return response()->json(['success' => true]);
+            \Log::info('PaymentIntent created successfully', [
+                'payment_intent_id' => $paymentIntent->id,
+                'client_secret' => substr($paymentIntent->client_secret, 0, 50) . '...',
+            ]);
 
+            return response()->json([
+                'client_secret' => $paymentIntent->client_secret,
+            ]);
         } catch (\Exception $e) {
-            Log::error('Failed to track abandoned checkout: ' . $e->getMessage());
-            return response()->json(['success' => false, 'message' => 'Failed to track checkout'], 500);
+            \Log::error('Stripe PaymentIntent creation failed', [
+                'error' => $e->getMessage(),
+                'package_id' => $package->id,
+            ]);
+
+            return response()->json([
+                'error' => 'Fehler beim Erstellen der Zahlungsdaten: ' . $e->getMessage(),
+            ], 500);
         }
     }
+
+    public function confirmPayment(Request $request)
+    {
+        $request->validate([
+            'payment_intent_id' => 'required|string',
+            'package_id' => 'required|exists:packages,id',
+        ]);
+
+        // Stripe API Key setzen
+        Stripe::setApiKey(config('services.stripe.secret'));
+
+        $paymentIntent = PaymentIntent::retrieve($request->payment_intent_id);
+
+        if ($paymentIntent->status !== 'succeeded') {
+            return response()->json([
+                'error' => 'Zahlung nicht erfolgreich.',
+            ], 400);
+        }
+
+        $package = Package::findOrFail($request->package_id);
+        $user = Auth::user();
+
+        // Package dem Tenant zuweisen
+        $user->tenant->packages()->attach($package->id, [
+            'purchased_at' => now(),
+            'expires_at' => now()->addYear(),
+            'is_active' => true,
+        ]);
+
+        // pending_purchase zurücksetzen
+        $user->update(['pending_purchase' => false]);
+
+        return response()->json([
+            'message' => 'Zahlung erfolgreich bestätigt.',
+        ]);
+    }
 }

resources/js/layouts/auth/auth-simple-layout.tsx

@@ -1,5 +1,5 @@
 import AppLogoIcon from '@/components/app-logo-icon';
-import { marketing } from '@/routes';
+import { home } from '@/routes';
 import { Link } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
 
@@ -15,7 +15,7 @@ export default function AuthSimpleLayout({ children, title, description }: Props
             <div className="w-full max-w-sm">
                 <div className="flex flex-col gap-8">
                     <div className="flex flex-col items-center gap-4">
-                        <Link href={marketing()} className="flex flex-col items-center gap-2 font-medium">
+                        <Link href={home()} className="flex flex-col items-center gap-2 font-medium">
                             <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
                                 <AppLogoIcon className="size-9 fill-current text-[var(--foreground)] dark:text-white" />
                             </div>

resources/js/pages/marketing/CheckoutWizardPage.tsx

@@ -19,9 +19,10 @@ export default function CheckoutWizardPage({
   stripePublishableKey,
   privacyHtml,
 }: CheckoutWizardPageProps) {
-  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string } | null } }>();
+  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
   const currentUser = page.props.auth?.user ?? null;
 
+
   const dedupedOptions = React.useMemo(() => {
     const ids = new Set<number>();
     const list = [initialPackage, ...packageOptions];
@@ -57,7 +58,7 @@ export default function CheckoutWizardPage({
             packageOptions={dedupedOptions}
             stripePublishableKey={stripePublishableKey}
             privacyHtml={privacyHtml}
-            initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined } : null}
+            initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
           />
         </div>
       </div>

resources/js/pages/marketing/checkout/CheckoutWizard.tsx

@@ -53,6 +53,7 @@ const stepConfig: { id: CheckoutStepId; title: string; description: string; deta
 const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
   const { currentStep, nextStep, previousStep } = useCheckoutWizard();
 
+
   const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
   const progress = useMemo(() => {
     if (currentIndex < 0) {
@@ -95,6 +96,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
   initialAuthUser,
   initialStep,
 }) => {
+
   return (
     <CheckoutWizardProvider
       initialPackage={initialPackage}

resources/js/pages/marketing/checkout/WizardContext.tsx

@@ -1,3 +1,188 @@
+import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
+import type { CheckoutPackage, CheckoutStepId } from './types';
+
+interface CheckoutState {
+  currentStep: CheckoutStepId;
+  selectedPackage: CheckoutPackage | null;
+  packageOptions: CheckoutPackage[];
+  authUser: any;
+  isAuthenticated: boolean;
+  paymentIntent: string | null;
+  loading: boolean;
+  error: string | null;
+}
+
+interface CheckoutWizardContextType {
+  state: CheckoutState;
+  selectedPackage: CheckoutPackage | null;
+  packageOptions: CheckoutPackage[];
+  currentStep: CheckoutStepId;
+  isAuthenticated: boolean;
+  authUser: any;
+  selectPackage: (pkg: CheckoutPackage) => void;
+  setSelectedPackage: (pkg: CheckoutPackage) => void;
+  setAuthUser: (user: any) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  previousStep: () => void;
+  goToStep: (step: CheckoutStepId) => void;
+  cancelCheckout: () => void;
+  updatePaymentIntent: (clientSecret: string | null) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  resetPaymentState: () => void;
+}
+
+const CheckoutWizardContext = createContext<CheckoutWizardContextType | null>(null);
+
+const initialState: CheckoutState = {
+  currentStep: 'package',
+  selectedPackage: null,
+  packageOptions: [],
+  authUser: null,
+  isAuthenticated: false,
+  paymentIntent: null,
+  loading: false,
+  error: null,
+};
+
+type CheckoutAction =
+  | { type: 'SELECT_PACKAGE'; payload: CheckoutPackage }
+  | { type: 'SET_AUTH_USER'; payload: any }
+  | { type: 'NEXT_STEP' }
+  | { type: 'PREV_STEP' }
+  | { type: 'GO_TO_STEP'; payload: CheckoutStepId }
+  | { type: 'UPDATE_PAYMENT_INTENT'; payload: string | null }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null };
+
+function checkoutReducer(state: CheckoutState, action: CheckoutAction): CheckoutState {
+  switch (action.type) {
+    case 'SELECT_PACKAGE':
+      return { ...state, selectedPackage: action.payload };
+    case 'SET_AUTH_USER':
+      return { ...state, authUser: action.payload };
+    case 'NEXT_STEP':
+      const steps: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
+      const currentIndex = steps.indexOf(state.currentStep);
+      if (currentIndex < steps.length - 1) {
+        return { ...state, currentStep: steps[currentIndex + 1] };
+      }
+      return state;
+    case 'PREV_STEP':
+      const prevSteps: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
+      const prevIndex = prevSteps.indexOf(state.currentStep);
+      if (prevIndex > 0) {
+        return { ...state, currentStep: prevSteps[prevIndex - 1] };
+      }
+      return state;
+    case 'GO_TO_STEP':
+      return { ...state, currentStep: action.payload };
+    case 'UPDATE_PAYMENT_INTENT':
+      return { ...state, paymentIntent: action.payload };
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload };
+    case 'SET_ERROR':
+      return { ...state, error: action.payload };
+    default:
+      return state;
+  }
+}
+
+interface CheckoutWizardProviderProps {
+  children: React.ReactNode;
+  initialPackage?: CheckoutPackage;
+  packageOptions?: CheckoutPackage[];
+  initialStep?: CheckoutStepId;
+  initialAuthUser?: any;
+  initialIsAuthenticated?: boolean;
+}
+
+export function CheckoutWizardProvider({
+  children,
+  initialPackage,
+  packageOptions,
+  initialStep,
+  initialAuthUser,
+  initialIsAuthenticated
+}: CheckoutWizardProviderProps) {
+  const customInitialState: CheckoutState = {
+    ...initialState,
+    currentStep: initialStep || 'package',
+    selectedPackage: initialPackage || null,
+    packageOptions: packageOptions || [],
+    authUser: initialAuthUser || null,
+    isAuthenticated: initialIsAuthenticated || Boolean(initialAuthUser),
+  };
+
+
+  const [state, dispatch] = useReducer(checkoutReducer, customInitialState);
+
+  // Load state from localStorage on mount
+  useEffect(() => {
+    const savedState = localStorage.getItem('checkout-wizard-state');
+    if (savedState) {
+      try {
+        const parsed = JSON.parse(savedState);
+        // Restore state selectively
+        if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
+        if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
+      } catch (error) {
+        console.error('Failed to restore checkout state:', error);
+      }
+    }
+  }, []);
+
+  // Save state to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('checkout-wizard-state', JSON.stringify({
+      selectedPackage: state.selectedPackage,
+      currentStep: state.currentStep,
+    }));
+  }, [state.selectedPackage, state.currentStep]);
+
+  const selectPackage = useCallback((pkg: CheckoutPackage) => {
+    dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
+  }, []);
+
+  const setAuthUser = useCallback((user: any) => {
+    dispatch({ type: 'SET_AUTH_USER', payload: user });
+  }, []);
+
+  const nextStep = useCallback(() => {
+    dispatch({ type: 'NEXT_STEP' });
+  }, []);
+
+  const prevStep = useCallback(() => {
+    dispatch({ type: 'PREV_STEP' });
+  }, []);
+
+  const goToStep = useCallback((step: CheckoutStepId) => {
+    dispatch({ type: 'GO_TO_STEP', payload: step });
+  }, []);
+
+  const updatePaymentIntent = useCallback((clientSecret: string | null) => {
+    dispatch({ type: 'UPDATE_PAYMENT_INTENT', payload: clientSecret });
+  }, []);
+
+  const setLoading = useCallback((loading: boolean) => {
+    dispatch({ type: 'SET_LOADING', payload: loading });
+  }, []);
+
+  const setError = useCallback((error: string | null) => {
+    dispatch({ type: 'SET_ERROR', payload: error });
+  }, []);
+
+  const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
+    dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
+  }, []);
+
+  const resetPaymentState = useCallback(() => {
+    dispatch({ type: 'UPDATE_PAYMENT_INTENT', payload: null });
+    dispatch({ type: 'SET_LOADING', payload: false });
+    dispatch({ type: 'SET_ERROR', payload: null });
+  }, []);
+
   const cancelCheckout = useCallback(() => {
     // Track abandoned checkout (fire and forget)
     if (state.authUser || state.selectedPackage) {
@@ -8,9 +193,8 @@
           '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,
+          package_id: state.selectedPackage?.id,
+          step: state.currentStep,
           email: state.authUser?.email,
         }),
       }).catch(error => {
@@ -23,3 +207,39 @@
     // Zur Package-Übersicht zurückleiten
     window.location.href = '/packages';
   }, [state]);
+
+  const value: CheckoutWizardContextType = {
+    state,
+    selectedPackage: state.selectedPackage,
+    packageOptions: state.packageOptions,
+    currentStep: state.currentStep,
+    isAuthenticated: state.isAuthenticated,
+    authUser: state.authUser,
+    selectPackage,
+    setSelectedPackage,
+    setAuthUser,
+    nextStep,
+    prevStep,
+    previousStep: prevStep,
+    goToStep,
+    cancelCheckout,
+    updatePaymentIntent,
+    setLoading,
+    setError,
+    resetPaymentState,
+  };
+
+  return (
+    <CheckoutWizardContext.Provider value={value}>
+      {children}
+    </CheckoutWizardContext.Provider>
+  );
+}
+
+export function useCheckoutWizard(): CheckoutWizardContextType {
+  const context = useContext(CheckoutWizardContext);
+  if (!context) {
+    throw new Error('useCheckoutWizard must be used within a CheckoutWizardProvider');
+  }
+  return context;
+}

resources/js/pages/marketing/checkout/steps/AuthStep.tsx

@@ -13,7 +13,7 @@ interface AuthStepProps {
 export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
   const page = usePage<{ locale?: string }>();
   const locale = page.props.locale ?? "de";
-  const { isAuthenticated, authUser, markAuthenticated, nextStep, selectedPackage } = useCheckoutWizard();
+  const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
   const [mode, setMode] = useState<'login' | 'register'>('register');
 
   const handleLoginSuccess = (payload: AuthUserPayload | null) => {
@@ -21,7 +21,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
       return;
     }
 
-    markAuthenticated({
+    setAuthUser({
       id: payload.id ?? 0,
       email: payload.email ?? "",
       name: payload.name ?? undefined,
@@ -33,7 +33,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
   const handleRegisterSuccess = (result: RegisterSuccessPayload) => {
     const nextUser = result?.user ?? null;
     if (nextUser) {
-      markAuthenticated({
+      setAuthUser({
         id: nextUser.id ?? 0,
         email: nextUser.email ?? "",
         name: nextUser.name ?? undefined,
@@ -84,12 +84,14 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
 
       <div className="rounded-lg border bg-card p-6 shadow-sm">
         {mode === 'register' ? (
-          <RegisterForm
-            packageId={selectedPackage.id}
-            privacyHtml={privacyHtml}
-            locale={locale}
-            onSuccess={handleRegisterSuccess}
-          />
+          selectedPackage && (
+            <RegisterForm
+              packageId={selectedPackage.id}
+              privacyHtml={privacyHtml}
+              locale={locale}
+              onSuccess={handleRegisterSuccess}
+            />
+          )
         ) : (
           <LoginForm
             locale={locale}

resources/js/pages/marketing/checkout/steps/PackageStep.tsx

@@ -13,11 +13,13 @@ const currencyFormatter = new Intl.NumberFormat("de-DE", {
 });
 
 function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
+  const isFree = pkg.price === 0;
+
   return (
-    <Card className="shadow-sm">
+    <Card className={`shadow-sm ${isFree ? "opacity-75" : ""}`}>
       <CardHeader className="space-y-1">
-        <CardTitle className="flex items-center gap-3 text-2xl">
-          <PackageIcon className="h-6 w-6 text-primary" />
+        <CardTitle className={`flex items-center gap-3 text-2xl ${isFree ? "text-muted-foreground" : ""}`}>
+          <PackageIcon className={`h-6 w-6 ${isFree ? "text-muted-foreground" : "text-primary"}`} />
           {pkg.name}
         </CardTitle>
         <CardDescription className="text-base text-muted-foreground">
@@ -26,10 +28,10 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
       </CardHeader>
       <CardContent className="space-y-6">
         <div className="flex items-baseline gap-2">
-          <span className="text-3xl font-semibold">
+          <span className={`text-3xl font-semibold ${isFree ? "text-muted-foreground" : ""}`}>
             {pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
           </span>
-          <Badge variant="secondary" className="uppercase tracking-wider text-xs">
+          <Badge variant={isFree ? "outline" : "secondary"} className="uppercase tracking-wider text-xs">
             {pkg.type === "reseller" ? "Reseller" : "Endkunde"}
           </Badge>
         </div>
@@ -37,7 +39,7 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
           <ul className="space-y-3">
             {pkg.features.map((feature, index) => (
               <li key={index} className="flex items-start gap-3 text-sm text-muted-foreground">
-                <Check className="mt-0.5 h-4 w-4 text-primary" />
+                <Check className={`mt-0.5 h-4 w-4 ${isFree ? "text-muted-foreground" : "text-primary"}`} />
                 <span>{feature}</span>
               </li>
             ))}
@@ -49,17 +51,23 @@ function PackageSummary({ pkg }: { pkg: CheckoutPackage }) {
 }
 
 function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isActive: boolean; onSelect: () => void }) {
+  const isFree = pkg.price === 0;
+
   return (
     <button
       type="button"
       onClick={onSelect}
       className={`w-full rounded-md border bg-background p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${
-        isActive ? "border-primary shadow-sm" : "border-border hover:border-primary/40"
+        isActive
+          ? "border-primary shadow-sm"
+          : isFree
+            ? "border-border hover:border-primary/40 opacity-75 hover:opacity-100"
+            : "border-border hover:border-primary/40"
       }`}
     >
       <div className="flex items-center justify-between text-sm font-medium">
-        <span>{pkg.name}</span>
-        <span className="text-muted-foreground">
+        <span className={isFree ? "text-muted-foreground" : ""}>{pkg.name}</span>
+        <span className={isFree ? "text-muted-foreground font-normal" : "text-muted-foreground"}>
           {pkg.price === 0 ? "Kostenlos" : currencyFormatter.format(pkg.price)}
         </span>
       </div>
@@ -72,9 +80,28 @@ export const PackageStep: React.FC = () => {
   const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
   const [isLoading, setIsLoading] = useState(false);
 
+
+  // Early return if no package is selected
+  if (!selectedPackage) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-muted-foreground">Kein Paket ausgewählt. Bitte wähle ein Paket aus der Paketübersicht.</p>
+      </div>
+    );
+  }
+
   const comparablePackages = useMemo(() => {
-    return packageOptions.filter((pkg) => pkg.type === selectedPackage.type);
-  }, [packageOptions, selectedPackage.type]);
+    // Filter by type and sort: free packages first, then by price ascending
+    return packageOptions
+      .filter((pkg: CheckoutPackage) => pkg.type === selectedPackage.type)
+      .sort((a: CheckoutPackage, b: CheckoutPackage) => {
+        // Free packages first
+        if (a.price === 0 && b.price > 0) return -1;
+        if (a.price > 0 && b.price === 0) return 1;
+        // Then sort by price ascending
+        return a.price - b.price;
+      });
+  }, [packageOptions, selectedPackage]);
 
   const handlePackageChange = (pkg: CheckoutPackage) => {
     if (pkg.id === selectedPackage.id) {

resources/js/pages/marketing/checkout/steps/PaymentStep.tsx

@@ -1,62 +1,27 @@
 import { useState, useEffect } from "react";
-import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
+import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/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";
 import { useCheckoutWizard } from "../WizardContext";
 
 interface PaymentStepProps {
   stripePublishableKey: string;
 }
 
-export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
+// Komponente für kostenpflichtige Zahlungen (immer innerhalb Elements Provider)
+const PaymentForm: React.FC = () => {
   const stripe = useStripe();
   const elements = useElements();
-  const { selectedPackage, authUser, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();
+  const { selectedPackage, 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;
-
-  // 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]);
+  }, [selectedPackage?.id, resetPaymentState]);
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -66,11 +31,6 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
       return;
     }
 
-    if (!clientSecret) {
-      setError('Zahlungsdaten konnten nicht geladen werden. Bitte erneut versuchen.');
-      return;
-    }
-
     setIsProcessing(true);
     setError('');
     setPaymentStatus('processing');
@@ -143,6 +103,84 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
     }
   };
 
+  return (
+    <div className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <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 || 0})`}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+// Wrapper-Komponente mit eigenem Elements Provider
+export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
+  const { selectedPackage, authUser, nextStep } = useCheckoutWizard();
+  const [clientSecret, setClientSecret] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  const isFree = selectedPackage ? selectedPackage.price <= 0 : false;
+
+  // Payment Intent für kostenpflichtige Pakete laden
+  useEffect(() => {
+    if (isFree || !authUser || !selectedPackage) 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();
+
+        console.log('Payment Intent Response:', {
+          ok: response.ok,
+          status: response.status,
+          data: data
+        });
+
+        if (response.ok && data.client_secret) {
+          setClientSecret(data.client_secret);
+          setError('');
+        } else {
+          const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
+          console.error('Payment Intent Error:', errorMsg);
+          setError(errorMsg);
+        }
+      } catch (err) {
+        setError('Netzwerkfehler beim Laden der Zahlungsdaten');
+      }
+    };
+
+    loadPaymentIntent();
+  }, [selectedPackage?.id, authUser, isFree]);
+
+  // Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
   if (isFree) {
     return (
       <div className="space-y-6">
@@ -161,69 +199,30 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
     );
   }
 
+  // Für kostenpflichtige Pakete: Warten auf clientSecret
+  if (!clientSecret) {
+    return (
+      <div className="space-y-6">
+        {error && (
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+        <div className="rounded-lg border bg-card p-6 shadow-sm">
+          <p className="text-sm text-muted-foreground">
+            Zahlungsdaten werden geladen...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Eigener Elements Provider mit clientSecret für kostenpflichtige Pakete
+  const stripePromise = loadStripe(stripePublishableKey);
+
   return (
-    <div className="space-y-6">
-      <Tabs value={paymentProvider ?? 'stripe'} onValueChange={(value) => setPaymentProvider(value as 'stripe' | 'paypal')}>
-        <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="stripe">Stripe</TabsTrigger>
-          <TabsTrigger value="paypal">PayPal</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="stripe" className="mt-4">
-          <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 Rückleitung zur Bestätigung.
-            </p>
-            <Alert>
-              <AlertTitle>PayPal Integration</AlertTitle>
-              <AlertDescription>
-                PayPal wird in einem späteren Schritt implementiert. Aktuell nur Stripe verfügbar.
-              </AlertDescription>
-            </Alert>
-            <div className="flex justify-end">
-              <Button disabled size="lg">
-                PayPal (bald verfügbar)
-              </Button>
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </div>
+    <Elements stripe={stripePromise} options={{ clientSecret }}>
+      <PaymentForm />
+    </Elements>
   );
 };

routes/auth.php

@@ -11,6 +11,21 @@ use App\Http\Controllers\Auth\VerifyEmailController;
 use Illuminate\Support\Facades\Route;
 
 Route::middleware('guest')->group(function () {
+    Route::get('login', [AuthenticatedSessionController::class, 'create'])
+        ->name('login');
+
+    Route::post('login', [AuthenticatedSessionController::class, 'store'])
+        ->name('login.store');
+
+    Route::get('register', [RegisteredUserController::class, 'create'])
+        ->name('register');
+
+    Route::post('register', [RegisteredUserController::class, 'store'])
+        ->name('register.store');
+
+    Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
+        ->name('logout');
+
     Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
         ->name('password.request');
 

routes/web.php

@@ -1,5 +1,32 @@
+<?php
+
+use App\Http\Controllers\MarketingController;
+use App\Http\Controllers\CheckoutController;
+use Illuminate\Support\Facades\Route;
+use Inertia\Inertia;
+
+require __DIR__.'/auth.php';
+require __DIR__.'/settings.php';
+
+Route::get('/', [MarketingController::class, 'index'])->name('home');
+Route::get('/dashboard', function () {
+    return Inertia::render('dashboard');
+})->middleware(['auth', 'verified'])->name('dashboard');
+Route::get('/contact', [MarketingController::class, 'contactView'])->name('kontakt');
+Route::post('/contact', [MarketingController::class, 'contact'])->name('kontakt.submit');
+Route::get('/blog', [MarketingController::class, 'blogIndex'])->name('blog');
+Route::get('/blog/{slug}', [MarketingController::class, 'blogShow'])->name('blog.show');
+Route::get('/packages', [MarketingController::class, 'packagesIndex'])->name('packages');
+Route::get('/occasions/{type}', [MarketingController::class, 'occasionsType'])->name('occasions.type');
+Route::get('/success/{packageId?}', [MarketingController::class, 'success'])->name('marketing.success');
+Route::middleware('auth')->group(function () {
+    Route::get('/buy/{packageId}', [MarketingController::class, 'buyPackages'])->name('marketing.buy');
+});
+
 Route::get('/purchase-wizard/{package}', [CheckoutController::class, 'show'])->name('purchase.wizard');
 Route::get('/checkout/{package}', [CheckoutController::class, 'show'])->name('checkout.show');
 Route::post('/checkout/login', [CheckoutController::class, 'login'])->name('checkout.login');
 Route::post('/checkout/register', [CheckoutController::class, 'register'])->name('checkout.register');
+Route::post('/stripe/create-payment-intent', [CheckoutController::class, 'createPaymentIntent'])->name('stripe.create-payment-intent');
+Route::post('/stripe/confirm-payment', [CheckoutController::class, 'confirmPayment'])->name('stripe.confirm-payment');
 Route::post('/checkout/track-abandoned', [CheckoutController::class, 'trackAbandonedCheckout'])->name('checkout.track-abandoned');