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/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>