vor marketing zu website umbenennung. stripe ist lauffähig

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>
   );
 };