soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Implementierung des Checkout-Logins mit E-Mail/Username-Support

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 21:57:46 +02:00
parent cee279cbab
commit 417b1da484
25 changed files with 730 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from "react";
import { useTranslation } from 'react-i18next';
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Button } from "@/components/ui/button";
@@ -14,6 +15,7 @@ const PaymentForm: React.FC = () => {
const stripe = useStripe();
const elements = useElements();
const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const { t } = useTranslation('marketing');
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string>('');
@@ -27,7 +29,7 @@ const PaymentForm: React.FC = () => {
event.preventDefault();
if (!stripe || !elements) {
setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
setError(t('checkout.payment_step.stripe_not_loaded'));
return;
}
@@ -46,26 +48,26 @@ const PaymentForm: React.FC = () => {
if (stripeError) {
console.error('Stripe Payment Error:', stripeError);
let errorMessage = 'Zahlung fehlgeschlagen. ';
let errorMessage = t('checkout.payment_step.payment_failed');
switch (stripeError.type) {
case 'card_error':
errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_card');
break;
case 'validation_error':
errorMessage += 'Eingabedaten sind ungültig.';
errorMessage += t('checkout.payment_step.error_validation');
break;
case 'api_connection_error':
errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
errorMessage += t('checkout.payment_step.error_connection');
break;
case 'api_error':
errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
errorMessage += t('checkout.payment_step.error_server');
break;
case 'authentication_error':
errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
errorMessage += t('checkout.payment_step.error_auth');
break;
default:
errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_unknown');
}
setError(errorMessage);
@@ -78,25 +80,25 @@ const PaymentForm: React.FC = () => {
setTimeout(() => nextStep(), 1000);
break;
case 'processing':
setError('Zahlung wird verarbeitet. Bitte warten...');
setError(t('checkout.payment_step.processing'));
setPaymentStatus('processing');
break;
case 'requires_payment_method':
setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
setError(t('checkout.payment_step.needs_method'));
setPaymentStatus('failed');
break;
case 'requires_confirmation':
setError('Zahlung muss bestätigt werden.');
setError(t('checkout.payment_step.needs_confirm'));
setPaymentStatus('failed');
break;
default:
setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
setError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
setPaymentStatus('failed');
}
}
} catch (err) {
console.error('Unexpected payment error:', err);
setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
setError(t('checkout.payment_step.error_unknown'));
setPaymentStatus('failed');
} finally {
setIsProcessing(false);
@@ -114,7 +116,7 @@ const PaymentForm: React.FC = () => {
<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.
{t('checkout.payment_step.secure_payment_desc')}
</p>
<PaymentElement />
<Button
@@ -123,7 +125,7 @@ const PaymentForm: React.FC = () => {
size="lg"
className="w-full"
>
{isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage?.price || 0})`}
{isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
</Button>
</div>
</form>
@@ -133,13 +135,14 @@ const PaymentForm: React.FC = () => {
// Wrapper-Komponente mit eigenem Elements Provider
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
const { t } = useTranslation('marketing');
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
// Payment Intent für kostenpflichtige Pakete laden
useEffect(() => {
if (isFree || !authUser || !selectedPackage) return;
@@ -168,31 +171,31 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
setClientSecret(data.client_secret);
setError('');
} else {
const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
const errorMsg = data.error || t('checkout.payment_step.payment_intent_error');
console.error('Payment Intent Error:', errorMsg);
setError(errorMsg);
}
} catch (err) {
setError('Netzwerkfehler beim Laden der Zahlungsdaten');
setError(t('checkout.payment_step.network_error'));
}
};
loadPaymentIntent();
}, [selectedPackage?.id, authUser, isFree]);
}, [selectedPackage?.id, authUser, isFree, t]);
// Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
if (isFree) {
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Kostenloses Paket</AlertTitle>
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
<AlertDescription>
Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
{t('checkout.payment_step.free_package_desc')}
</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button size="lg" onClick={nextStep}>
Paket aktivieren
{t('checkout.payment_step.activate_package')}
</Button>
</div>
</div>
@@ -210,7 +213,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
)}
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">
Zahlungsdaten werden geladen...
{t('checkout.payment_step.loading_payment')}
</p>
</div>
</div>