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

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>