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

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

Browse Source
This commit is contained in:
Codex Agent
2025-10-07 22:25:03 +02:00
parent dd5545605c
commit aa8c6c67c5
38 changed files with 1848 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/app.tsx
View File

@@ -8,14 +8,19 @@ import AppLayout from './Components/Layout/AppLayout';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { Toaster } from 'react-hot-toast';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
// Initialize Stripe
const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || '');
createInertiaApp({
title: (title) => title ? `${title} - ${appName}` : appName,
resolve: (name) => resolvePageComponent(
`./Pages/${name}.tsx`,
import.meta.glob('./Pages/**/*.tsx')
`./pages/${name}.tsx`,
import.meta.glob('./pages/**/*.tsx')
).then((page) => {
if (page) {
const PageComponent = (page as any).default;
@@ -36,10 +41,12 @@ createInertiaApp({
}
root.render(
<I18nextProvider i18n={i18n}>
<App {...props} />
<Toaster position="top-right" toastOptions={{ duration: 4000 }} />
</I18nextProvider>
<Elements stripe={stripePromise}>
<I18nextProvider i18n={i18n}>
<App {...props} />
<Toaster position="top-right" toastOptions={{ duration: 4000 }} />
</I18nextProvider>
</Elements>
);
},
progress: {

72
resources/js/components/Layout/Header.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useCallback } from 'react';
import { usePage } from '@inertiajs/react';
import { Link, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
@@ -13,7 +13,7 @@ import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
const Header: React.FC = () => {
const { auth, locale } = usePage().props as any;
const { auth } = usePage().props as any;
const { t } = useTranslation('auth');
const { appearance, updateAppearance } = useAppearance();
const { localizedPath } = useLocalizedRoutes();
@@ -23,15 +23,29 @@ const Header: React.FC = () => {
updateAppearance(newAppearance);
};
const handleLanguageChange = (value: string) => {
router.post('/set-locale', { locale: value }, {
preserveState: true,
replace: true,
onSuccess: () => {
const handleLanguageChange = useCallback(async (value: string) => {
console.log('handleLanguageChange called with:', value);
try {
const response = await fetch('/set-locale', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
},
body: JSON.stringify({ locale: value }),
});
console.log('fetch response:', response.status);
if (response.ok) {
console.log('calling i18n.changeLanguage with:', value);
i18n.changeLanguage(value);
},
});
};
// Reload only the locale prop to update the page props
router.reload({ only: ['locale'] });
}
} catch (error) {
console.error('Failed to change locale:', error);
}
}, []);
const handleLogout = () => {
router.post('/logout');
@@ -45,18 +59,24 @@ const Header: React.FC = () => {
Fotospiel
</Link>
<nav className="flex space-x-8">
<Link href={localizedPath('/')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.home', 'Home')}
</Link>
<Link href={localizedPath('/packages')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.packages', 'Pakete')}
</Link>
<Link href={localizedPath('/blog')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.blog', 'Blog')}
</Link>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/')}>
{t('header.home', 'Home')}
</Link>
</Button>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/packages')}>
{t('header.packages', 'Pakete')}
</Link>
</Button>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/blog')}>
{t('header.blog', 'Blog')}
</Link>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
<Button variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
Anlässe
</Button>
</DropdownMenuTrigger>
@@ -78,9 +98,11 @@ const Header: React.FC = () => {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link href={localizedPath('/kontakt')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.contact', 'Kontakt')}
</Link>
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
<Link href={localizedPath('/kontakt')}>
{t('header.contact', 'Kontakt')}
</Link>
</Button>
</nav>
<div className="flex items-center space-x-4">
<Button
@@ -93,7 +115,7 @@ const Header: React.FC = () => {
<Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
<span className="sr-only">Theme Toggle</span>
</Button>
<Select value={locale} onValueChange={handleLanguageChange}>
<Select value={i18n.language || 'de'} onValueChange={handleLanguageChange}>
<SelectTrigger className="w-[70px] h-8">
<SelectValue placeholder="DE" />
</SelectTrigger>
@@ -140,7 +162,7 @@ const Header: React.FC = () => {
<>
<Link
href={localizedPath('/login')}
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
className="text-gray-700 hover:text-pink-600 dark:text-gray-300 dark:hover:text-pink-400 font-medium transition-colors duration-200"
>
{t('header.login')}
</Link>

13
resources/js/components/ui/Steps.tsx
View File

@@ -8,6 +8,7 @@ interface Step {
id: string
title: string
description: string
details?: string
}
interface StepsProps {
@@ -33,10 +34,18 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
{index + 1}
</div>
<div className="mt-2 text-xs font-medium text-center">
<p className={cn(index === currentStep ? "text-blue-600" : "text-gray-500")}>
<p className={cn(
"font-semibold",
index === currentStep ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
)}>
{step.title}
</p>
<p className="text-xs text-gray-400">{step.description}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{step.description}</p>
{step.details && index === currentStep && (
<p className="text-xs text-blue-500 dark:text-blue-300 mt-1 font-medium">
{step.details}
</p>
)}
</div>
{index < steps.length - 1 && (
<div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">

2
resources/js/hooks/useLocalizedRoutes.ts
View File

@@ -21,7 +21,7 @@ export const useLocalizedRoutes = () => {
const trimmed = path.trim();
const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });
// console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });
// Since prefix-free, return plain path. Locale is handled via session.
return normalized;

12
resources/js/i18n.ts
View File

@@ -1,13 +1,17 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n.on('languageChanged', (lng) => {
console.log('i18n languageChanged event:', lng);
console.trace('languageChanged trace for', lng);
});
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
lng: localStorage.getItem('i18nextLng') || 'de',
fallbackLng: 'de',
supportedLngs: ['de', 'en'],
ns: ['marketing', 'auth', 'common'],
@@ -20,8 +24,8 @@ i18n
loadPath: '/lang/{{lng}}/{{ns}}.json',
},
detection: {
order: ['sessionStorage', 'localStorage', 'htmlTag'],
caches: ['sessionStorage'],
order: [],
caches: ['localStorage'],
},
react: {
useSuspense: false,

14
resources/js/pages/auth/LoginForm.tsx
View File

@@ -40,18 +40,8 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
const { t } = useTranslation("auth");
const resolvedLocale = locale ?? page.props.locale ?? "de";
const loginEndpoint = useMemo(() => {
if (typeof route === "function") {
try {
return route("checkout.login");
} catch (error) {
// Ziggy might not be booted yet; fall back to locale-aware path.
}
}
return fallbackRoute(resolvedLocale);
}, [resolvedLocale]);
const loginEndpoint = '/checkout/login';
const [values, setValues] = useState({
email: "",
password: "",

16
resources/js/pages/auth/RegisterForm.tsx
View File

@@ -23,6 +23,7 @@ interface RegisterFormProps {
export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale }: RegisterFormProps) {
const [privacyOpen, setPrivacyOpen] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const { t } = useTranslation(['auth', 'common']);
const page = usePage<{ errors: Record<string, string>; locale?: string; auth?: { user?: any | null } }>();
const resolvedLocale = locale ?? page.props.locale ?? 'de';
@@ -46,18 +47,8 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
}
}, [errors, hasTriedSubmit]);
const registerEndpoint = useMemo(() => {
if (typeof route === 'function') {
try {
return route('checkout.register');
} catch (error) {
// ignore ziggy errors and fall back
}
}
return `/${resolvedLocale}/register`;
}, [resolvedLocale]);
const registerEndpoint = '/checkout/register';
const submit = async (event: React.FormEvent) => {
event.preventDefault();
setHasTriedSubmit(true);
@@ -71,6 +62,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
};
try {
const response = await fetch(registerEndpoint, {
method: 'POST',
headers: {

21
resources/js/pages/marketing/PurchaseWizard.tsx → resources/js/pages/marketing/CheckoutWizardPage.tsx
View File

@@ -3,20 +3,22 @@ import { Head, usePage } from "@inertiajs/react";
import MarketingLayout from "@/layouts/marketing/MarketingLayout";
import type { CheckoutPackage } from "./checkout/types";
import { CheckoutWizard } from "./checkout/CheckoutWizard";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
interface PurchaseWizardPageProps {
interface CheckoutWizardPageProps {
package: CheckoutPackage;
packageOptions: CheckoutPackage[];
stripePublishableKey: string;
privacyHtml: string;
}
export default function PurchaseWizardPage({
export default function CheckoutWizardPage({
package: initialPackage,
packageOptions,
stripePublishableKey,
privacyHtml,
}: PurchaseWizardPageProps) {
}: CheckoutWizardPageProps) {
const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string } | null } }>();
const currentUser = page.props.auth?.user ?? null;
@@ -37,6 +39,19 @@ export default function PurchaseWizardPage({
<Head title="Checkout Wizard" />
<div className="min-h-screen bg-muted/20 py-12">
<div className="mx-auto w-full max-w-4xl px-4">
{/* Abbruch-Button oben rechts */}
<div className="flex justify-end mb-4">
<Button
variant="ghost"
size="sm"
onClick={() => window.location.href = '/packages'}
className="text-muted-foreground hover:text-foreground"
>
<X className="h-4 w-4 mr-2" />
Abbrechen
</Button>
</div>
<CheckoutWizard
initialPackage={initialPackage}
packageOptions={dedupedOptions}

30
resources/js/pages/marketing/checkout/CheckoutWizard.tsx
View File

@@ -23,11 +23,31 @@ interface CheckoutWizardProps {
initialStep?: CheckoutStepId;
}
const stepConfig: { id: CheckoutStepId; title: string; description: string }[] = [
{ id: "package", title: "Paket", description: "Auswahl und Vergleich" },
{ id: "auth", title: "Konto", description: "Login oder Registrierung" },
{ id: "payment", title: "Zahlung", description: "Stripe oder PayPal" },
{ id: "confirmation", title: "Fertig", description: "Zugang aktiv" },
const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
{
id: "package",
title: "Paket wählen",
description: "Auswahl und Vergleich",
details: "Wähle das passende Paket für deine Bedürfnisse"
},
{
id: "auth",
title: "Konto einrichten",
description: "Login oder Registrierung",
details: "Erstelle ein Konto oder melde dich an"
},
{
id: "payment",
title: "Bezahlung",
description: "Sichere Zahlung",
details: "Gib deine Zahlungsdaten ein"
},
{
id: "confirmation",
title: "Fertig!",
description: "Zugang aktiv",
details: "Dein Paket ist aktiviert"
},
];
const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {

133
resources/js/pages/marketing/checkout/WizardContext.tsx
View File

@@ -1,110 +1,25 @@
import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
import type { CheckoutPackage, CheckoutStepId, CheckoutWizardContextValue, CheckoutWizardState } from "./types";
const cancelCheckout = useCallback(() => {
// Track abandoned checkout (fire and forget)
if (state.authUser || state.selectedPackage) {
fetch('/checkout/track-abandoned', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'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,
email: state.authUser?.email,
}),
}).catch(error => {
console.error('Failed to track abandoned checkout:', error);
});
}
interface CheckoutWizardProviderProps {
initialPackage: CheckoutPackage;
packageOptions: CheckoutPackage[];
initialStep?: CheckoutStepId;
initialAuthUser?: CheckoutWizardState['authUser'];
initialIsAuthenticated?: boolean;
children: React.ReactNode;
}
const CheckoutWizardContext = createContext<CheckoutWizardContextValue | undefined>(undefined);
export const CheckoutWizardProvider: React.FC<CheckoutWizardProviderProps> = ({
initialPackage,
packageOptions,
initialStep = 'package',
initialAuthUser = null,
initialIsAuthenticated,
children,
}) => {
const [state, setState] = useState<CheckoutWizardState>(() => ({
currentStep: initialStep,
selectedPackage: initialPackage,
packageOptions,
isAuthenticated: Boolean(initialIsAuthenticated || initialAuthUser),
authUser: initialAuthUser ?? null,
paymentProvider: undefined,
isProcessing: false,
}));
const setStep = useCallback((step: CheckoutStepId) => {
setState((prev) => ({ ...prev, currentStep: step }));
}, []);
const nextStep = useCallback(() => {
setState((prev) => {
const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
const currentIndex = order.indexOf(prev.currentStep);
const nextIndex = currentIndex === -1 ? 0 : Math.min(order.length - 1, currentIndex + 1);
return { ...prev, currentStep: order[nextIndex] };
});
}, []);
const previousStep = useCallback(() => {
setState((prev) => {
const order: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
const currentIndex = order.indexOf(prev.currentStep);
const nextIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
return { ...prev, currentStep: order[nextIndex] };
});
}, []);
const setSelectedPackage = useCallback((pkg: CheckoutPackage) => {
setState((prev) => ({
...prev,
selectedPackage: pkg,
paymentProvider: undefined,
}));
}, []);
const markAuthenticated = useCallback<CheckoutWizardContextValue['markAuthenticated']>((user) => {
setState((prev) => ({
...prev,
isAuthenticated: Boolean(user),
authUser: user ?? null,
}));
}, []);
const setPaymentProvider = useCallback<CheckoutWizardContextValue['setPaymentProvider']>((provider) => {
setState((prev) => ({
...prev,
paymentProvider: provider,
}));
}, []);
const resetPaymentState = useCallback(() => {
setState((prev) => ({
...prev,
paymentProvider: undefined,
isProcessing: false,
}));
}, []);
const value = useMemo<CheckoutWizardContextValue>(() => ({
...state,
setStep,
nextStep,
previousStep,
setSelectedPackage,
markAuthenticated,
setPaymentProvider,
resetPaymentState,
}), [state, setStep, nextStep, previousStep, setSelectedPackage, markAuthenticated, setPaymentProvider, resetPaymentState]);
return (
<CheckoutWizardContext.Provider value={value}>
{children}
</CheckoutWizardContext.Provider>
);
};
export const useCheckoutWizard = () => {
const context = useContext(CheckoutWizardContext);
if (!context) {
throw new Error('useCheckoutWizard must be used within CheckoutWizardProvider');
}
return context;
};
// State aus localStorage entfernen
localStorage.removeItem('checkout-wizard-state');
// Zur Package-Übersicht zurückleiten
window.location.href = '/packages';
}, [state]);

4
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
View File

@@ -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;

2
resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
View File

@@ -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">

25
resources/js/pages/marketing/checkout/steps/PackageStep.tsx
View File

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

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

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

1
resources/js/pages/marketing/checkout/types.ts
View File

@@ -35,5 +35,6 @@ export interface CheckoutWizardContextValue extends CheckoutWizardState {
markAuthenticated: (user: CheckoutWizardState['authUser']) => void;
setPaymentProvider: (provider: CheckoutWizardState['paymentProvider']) => void;
resetPaymentState: () => void;
cancelCheckout: () => void;
}