- Wired the checkout wizard for Google “comfort login”: added Socialite controller + dependency, new Google env
hooks in config/services.php/.env.example, and updated wizard steps/controllers to store session payloads, attach packages, and surface localized success/error states. - Retooled payment handling for both Stripe and PayPal, adding richer status management in CheckoutController/ PayPalController, fallback flows in the wizard’s PaymentStep.tsx, and fresh feature tests for intent creation, webhooks, and the wizard CTA. - Introduced a consent-aware Matomo analytics stack: new consent context, cookie-banner UI, useAnalytics/ useCtaExperiment hooks, and MatomoTracker component, then instrumented marketing pages (Home, Packages, Checkout) with localized copy and experiment tracking. - Polished package presentation across marketing UIs by centralizing formatting in PresentsPackages, surfacing localized description tables/placeholders, tuning badges/layouts, and syncing guest/marketing translations. - Expanded docs & reference material (docs/prp/*, TODOs, public gallery overview) and added a Playwright smoke test for the hero CTA while reconciling outstanding checklist items.
This commit is contained in:
Codex Agent
@@ -1,35 +1,47 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { useCheckoutWizard } from "../WizardContext";
|
||||
import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
|
||||
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
import { useCheckoutWizard } from '../WizardContext';
|
||||
|
||||
interface PaymentStepProps {
|
||||
stripePublishableKey: string;
|
||||
paypalClientId: string;
|
||||
}
|
||||
|
||||
// Komponente für Stripe-Zahlungen
|
||||
const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any }> = ({ onError, onSuccess, selectedPackage, t }) => {
|
||||
type Provider = 'stripe' | 'paypal';
|
||||
type PaymentStatus = 'idle' | 'loading' | 'ready' | 'processing' | 'error' | 'success';
|
||||
|
||||
interface StripePaymentFormProps {
|
||||
onProcessing: () => void;
|
||||
onSuccess: () => void;
|
||||
onError: (message: string) => void;
|
||||
selectedPackage: any;
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}
|
||||
|
||||
const StripePaymentForm: React.FC<StripePaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, t }) => {
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [errorMessage, setErrorMessage] = useState<string>('');
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!stripe || !elements) {
|
||||
onError(t('checkout.payment_step.stripe_not_loaded'));
|
||||
const message = t('checkout.payment_step.stripe_not_loaded');
|
||||
onError(message);
|
||||
return;
|
||||
}
|
||||
|
||||
onProcessing();
|
||||
setIsProcessing(true);
|
||||
setError('');
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
|
||||
@@ -41,38 +53,41 @@ const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
|
||||
});
|
||||
|
||||
if (stripeError) {
|
||||
console.error('Stripe Payment Error:', stripeError);
|
||||
let errorMessage = t('checkout.payment_step.payment_failed');
|
||||
let message = t('checkout.payment_step.payment_failed');
|
||||
|
||||
switch (stripeError.type) {
|
||||
case 'card_error':
|
||||
errorMessage += stripeError.message || t('checkout.payment_step.error_card');
|
||||
message += stripeError.message || t('checkout.payment_step.error_card');
|
||||
break;
|
||||
case 'validation_error':
|
||||
errorMessage += t('checkout.payment_step.error_validation');
|
||||
message += t('checkout.payment_step.error_validation');
|
||||
break;
|
||||
case 'api_connection_error':
|
||||
errorMessage += t('checkout.payment_step.error_connection');
|
||||
message += t('checkout.payment_step.error_connection');
|
||||
break;
|
||||
case 'api_error':
|
||||
errorMessage += t('checkout.payment_step.error_server');
|
||||
message += t('checkout.payment_step.error_server');
|
||||
break;
|
||||
case 'authentication_error':
|
||||
errorMessage += t('checkout.payment_step.error_auth');
|
||||
message += t('checkout.payment_step.error_auth');
|
||||
break;
|
||||
default:
|
||||
errorMessage += stripeError.message || t('checkout.payment_step.error_unknown');
|
||||
message += stripeError.message || t('checkout.payment_step.error_unknown');
|
||||
}
|
||||
|
||||
setError(errorMessage);
|
||||
onError(errorMessage);
|
||||
} else if (paymentIntent && paymentIntent.status === 'succeeded') {
|
||||
onSuccess();
|
||||
} else if (paymentIntent) {
|
||||
onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
|
||||
setErrorMessage(message);
|
||||
onError(message);
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Unexpected payment error:', err);
|
||||
|
||||
if (paymentIntent && paymentIntent.status === 'succeeded') {
|
||||
onSuccess();
|
||||
return;
|
||||
}
|
||||
|
||||
onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent?.status }));
|
||||
} catch (error) {
|
||||
console.error('Stripe payment failed', error);
|
||||
onError(t('checkout.payment_step.error_unknown'));
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
@@ -81,56 +96,83 @@ const StripePaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
{errorMessage && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('checkout.payment_step.secure_payment_desc')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_payment_desc')}</p>
|
||||
<PaymentElement />
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!stripe || isProcessing}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
{isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
|
||||
<Button type="submit" disabled={!stripe || isProcessing} size="lg" className="w-full">
|
||||
{isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
// Komponente für PayPal-Zahlungen
|
||||
const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess: () => void; selectedPackage: any; t: any; authUser: any; paypalClientId: string }> = ({ onError, onSuccess, selectedPackage, t, authUser, paypalClientId }) => {
|
||||
interface PayPalPaymentFormProps {
|
||||
onProcessing: () => void;
|
||||
onSuccess: () => void;
|
||||
onError: (message: string) => void;
|
||||
selectedPackage: any;
|
||||
isReseller: boolean;
|
||||
paypalPlanId?: string | null;
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}
|
||||
|
||||
const PayPalPaymentForm: React.FC<PayPalPaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, isReseller, paypalPlanId, t }) => {
|
||||
const createOrder = async () => {
|
||||
if (!selectedPackage?.id) {
|
||||
const message = t('checkout.payment_step.paypal_order_error');
|
||||
onError(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/paypal/create-order', {
|
||||
onProcessing();
|
||||
|
||||
const endpoint = isReseller ? '/paypal/create-subscription' : '/paypal/create-order';
|
||||
const payload: Record<string, unknown> = {
|
||||
package_id: selectedPackage.id,
|
||||
};
|
||||
|
||||
if (isReseller) {
|
||||
if (!paypalPlanId) {
|
||||
const message = t('checkout.payment_step.paypal_missing_plan');
|
||||
onError(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
payload.plan_id = paypalPlanId;
|
||||
}
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
tenant_id: authUser?.tenant_id || authUser?.id, // Annahme: tenant_id verfügbar
|
||||
package_id: selectedPackage?.id,
|
||||
}),
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.id) {
|
||||
return data.id;
|
||||
if (response.ok) {
|
||||
const orderId = isReseller ? data.order_id : data.id;
|
||||
if (typeof orderId === 'string' && orderId.length > 0) {
|
||||
return orderId;
|
||||
}
|
||||
} else {
|
||||
onError(data.error || t('checkout.payment_step.paypal_order_error'));
|
||||
throw new Error('Failed to create order');
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
throw new Error('Failed to create PayPal order');
|
||||
} catch (error) {
|
||||
console.error('PayPal create order failed', error);
|
||||
onError(t('checkout.payment_step.network_error'));
|
||||
throw err;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -142,9 +184,7 @@ const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
order_id: data.orderID,
|
||||
}),
|
||||
body: JSON.stringify({ order_id: data.orderID }),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
@@ -154,105 +194,209 @@ const PayPalPaymentForm: React.FC<{ onError: (error: string) => void; onSuccess:
|
||||
} else {
|
||||
onError(result.error || t('checkout.payment_step.paypal_capture_error'));
|
||||
}
|
||||
} catch (err) {
|
||||
} catch (error) {
|
||||
console.error('PayPal capture failed', error);
|
||||
onError(t('checkout.payment_step.network_error'));
|
||||
}
|
||||
};
|
||||
|
||||
const onErrorHandler = (error: any) => {
|
||||
console.error('PayPal Error:', error);
|
||||
const handleError = (error: unknown) => {
|
||||
console.error('PayPal error', error);
|
||||
onError(t('checkout.payment_step.paypal_error'));
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
const handleCancel = () => {
|
||||
onError(t('checkout.payment_step.paypal_cancelled'));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}
|
||||
</p>
|
||||
<PayPalButtons
|
||||
style={{ layout: 'vertical' }}
|
||||
createOrder={createOrder}
|
||||
onApprove={onApprove}
|
||||
onError={onErrorHandler}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm">
|
||||
<p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}</p>
|
||||
<PayPalButtons
|
||||
style={{ layout: 'vertical' }}
|
||||
createOrder={async () => createOrder()}
|
||||
onApprove={onApprove}
|
||||
onError={handleError}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Wrapper-Komponente
|
||||
const statusVariantMap: Record<PaymentStatus, 'default' | 'destructive' | 'success' | 'secondary'> = {
|
||||
idle: 'secondary',
|
||||
loading: 'secondary',
|
||||
ready: 'secondary',
|
||||
processing: 'secondary',
|
||||
error: 'destructive',
|
||||
success: 'success',
|
||||
};
|
||||
|
||||
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey, paypalClientId }) => {
|
||||
const { t } = useTranslation('marketing');
|
||||
const { selectedPackage, authUser, nextStep, resetPaymentState } = useCheckoutWizard();
|
||||
const [clientSecret, setClientSecret] = useState<string>('');
|
||||
const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal'>('stripe');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [isFree, setIsFree] = useState(false);
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState<Provider>('stripe');
|
||||
const [clientSecret, setClientSecret] = useState('');
|
||||
const [status, setStatus] = useState<PaymentStatus>('idle');
|
||||
const [statusDetail, setStatusDetail] = useState<string>('');
|
||||
const [intentRefreshKey, setIntentRefreshKey] = useState(0);
|
||||
const [processingProvider, setProcessingProvider] = useState<Provider | null>(null);
|
||||
|
||||
const stripePromise = useMemo(() => loadStripe(stripePublishableKey), [stripePublishableKey]);
|
||||
const isFree = useMemo(() => (selectedPackage ? selectedPackage.price <= 0 : false), [selectedPackage]);
|
||||
const isReseller = selectedPackage?.type === 'reseller';
|
||||
|
||||
const paypalPlanId = useMemo(() => {
|
||||
if (!selectedPackage) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof selectedPackage.paypal_plan_id === 'string' && selectedPackage.paypal_plan_id.trim().length > 0) {
|
||||
return selectedPackage.paypal_plan_id;
|
||||
}
|
||||
|
||||
const metadata = (selectedPackage as Record<string, unknown>)?.metadata;
|
||||
if (metadata && typeof metadata === 'object') {
|
||||
const value = (metadata as Record<string, unknown>).paypal_plan_id;
|
||||
if (typeof value === 'string' && value.trim().length > 0) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [selectedPackage]);
|
||||
|
||||
const paypalDisabled = isReseller && !paypalPlanId;
|
||||
|
||||
useEffect(() => {
|
||||
const free = selectedPackage ? selectedPackage.price <= 0 : false;
|
||||
setIsFree(free);
|
||||
if (free) {
|
||||
setStatus('idle');
|
||||
setStatusDetail('');
|
||||
setClientSecret('');
|
||||
setProcessingProvider(null);
|
||||
}, [selectedPackage?.id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isFree) {
|
||||
resetPaymentState();
|
||||
setStatus('ready');
|
||||
setStatusDetail('');
|
||||
return;
|
||||
}
|
||||
|
||||
if (paymentMethod === 'stripe' && authUser && selectedPackage) {
|
||||
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.client_secret) {
|
||||
setClientSecret(data.client_secret);
|
||||
setError('');
|
||||
} else {
|
||||
setError(data.error || t('checkout.payment_step.payment_intent_error'));
|
||||
}
|
||||
} catch (err) {
|
||||
setError(t('checkout.payment_step.network_error'));
|
||||
}
|
||||
};
|
||||
|
||||
loadPaymentIntent();
|
||||
} else {
|
||||
setClientSecret('');
|
||||
if (!selectedPackage) {
|
||||
return;
|
||||
}
|
||||
}, [selectedPackage?.id, authUser, paymentMethod, isFree, t, resetPaymentState]);
|
||||
|
||||
const handlePaymentError = (errorMsg: string) => {
|
||||
setError(errorMsg);
|
||||
if (paymentMethod === 'paypal') {
|
||||
if (paypalDisabled) {
|
||||
setStatus('error');
|
||||
setStatusDetail(t('checkout.payment_step.paypal_missing_plan'));
|
||||
} else {
|
||||
setStatus('ready');
|
||||
setStatusDetail('');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!authUser) {
|
||||
setStatus('error');
|
||||
setStatusDetail(t('checkout.payment_step.auth_required'));
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setStatus('loading');
|
||||
setStatusDetail(t('checkout.payment_step.status_loading'));
|
||||
setClientSecret('');
|
||||
|
||||
const loadIntent = 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.client_secret) {
|
||||
const message = data.error || t('checkout.payment_step.payment_intent_error');
|
||||
if (!cancelled) {
|
||||
setStatus('error');
|
||||
setStatusDetail(message);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!cancelled) {
|
||||
setClientSecret(data.client_secret);
|
||||
setStatus('ready');
|
||||
setStatusDetail(t('checkout.payment_step.status_ready'));
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
console.error('Failed to load payment intent', error);
|
||||
setStatus('error');
|
||||
setStatusDetail(t('checkout.payment_step.network_error'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadIntent();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [authUser, intentRefreshKey, isFree, paymentMethod, paypalDisabled, resetPaymentState, selectedPackage, t]);
|
||||
|
||||
const providerLabel = useCallback((provider: Provider) => {
|
||||
switch (provider) {
|
||||
case 'paypal':
|
||||
return 'PayPal';
|
||||
default:
|
||||
return 'Stripe';
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleProcessing = useCallback((provider: Provider) => {
|
||||
setProcessingProvider(provider);
|
||||
setStatus('processing');
|
||||
setStatusDetail(t('checkout.payment_step.status_processing', { provider: providerLabel(provider) }));
|
||||
}, [providerLabel, t]);
|
||||
|
||||
const handleSuccess = useCallback((provider: Provider) => {
|
||||
setProcessingProvider(provider);
|
||||
setStatus('success');
|
||||
setStatusDetail(t('checkout.payment_step.status_success'));
|
||||
setTimeout(() => nextStep(), 600);
|
||||
}, [nextStep, t]);
|
||||
|
||||
const handleError = useCallback((provider: Provider, message: string) => {
|
||||
setProcessingProvider(provider);
|
||||
setStatus('error');
|
||||
setStatusDetail(message);
|
||||
}, []);
|
||||
|
||||
const handleRetry = () => {
|
||||
if (paymentMethod === 'stripe') {
|
||||
setIntentRefreshKey((key) => key + 1);
|
||||
}
|
||||
|
||||
setStatus('idle');
|
||||
setStatusDetail('');
|
||||
setProcessingProvider(null);
|
||||
};
|
||||
|
||||
const handlePaymentSuccess = () => {
|
||||
setTimeout(() => nextStep(), 1000);
|
||||
};
|
||||
|
||||
// Für kostenlose Pakete
|
||||
if (isFree) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Alert>
|
||||
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
|
||||
<AlertDescription>
|
||||
{t('checkout.payment_step.free_package_desc')}
|
||||
</AlertDescription>
|
||||
<AlertDescription>{t('checkout.payment_step.free_package_desc')}</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex justify-end">
|
||||
<Button size="lg" onClick={nextStep}>
|
||||
@@ -263,78 +407,93 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey,
|
||||
);
|
||||
}
|
||||
|
||||
// Fehler anzeigen
|
||||
if (error && !clientSecret) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setError('')}>Versuchen Sie es erneut</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const renderStatusAlert = () => {
|
||||
if (status === 'idle') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const stripePromise = loadStripe(stripePublishableKey);
|
||||
const variant = statusVariantMap[status];
|
||||
|
||||
return (
|
||||
<Alert variant={variant}>
|
||||
<AlertTitle>
|
||||
{status === 'error'
|
||||
? t('checkout.payment_step.status_error_title')
|
||||
: status === 'success'
|
||||
? t('checkout.payment_step.status_success_title')
|
||||
: t('checkout.payment_step.status_info_title')}
|
||||
</AlertTitle>
|
||||
<AlertDescription className="flex items-center justify-between gap-4">
|
||||
<span>{statusDetail}</span>
|
||||
{status === 'processing' && <LoaderCircle className="h-4 w-4 animate-spin" />}
|
||||
{status === 'error' && (
|
||||
<Button size="sm" variant="outline" onClick={handleRetry}>
|
||||
{t('checkout.payment_step.status_retry')}
|
||||
</Button>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Zahlungsmethode Auswahl */}
|
||||
<div className="flex space-x-4">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button
|
||||
variant={paymentMethod === 'stripe' ? 'default' : 'outline'}
|
||||
onClick={() => setPaymentMethod('stripe')}
|
||||
className="flex-1"
|
||||
disabled={paymentMethod === 'stripe'}
|
||||
>
|
||||
Kreditkarte (Stripe)
|
||||
{t('checkout.payment_step.method_stripe')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={paymentMethod === 'paypal' ? 'default' : 'outline'}
|
||||
onClick={() => setPaymentMethod('paypal')}
|
||||
className="flex-1"
|
||||
disabled={paypalDisabled || paymentMethod === 'paypal'}
|
||||
>
|
||||
PayPal
|
||||
{t('checkout.payment_step.method_paypal')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{renderStatusAlert()}
|
||||
|
||||
{paymentMethod === 'stripe' && (
|
||||
{paymentMethod === 'stripe' && clientSecret && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<StripePaymentForm
|
||||
onError={handlePaymentError}
|
||||
onSuccess={handlePaymentSuccess}
|
||||
selectedPackage={selectedPackage}
|
||||
onProcessing={() => handleProcessing('stripe')}
|
||||
onSuccess={() => handleSuccess('stripe')}
|
||||
onError={(message) => handleError('stripe', message)}
|
||||
t={t}
|
||||
/>
|
||||
</Elements>
|
||||
)}
|
||||
|
||||
{paymentMethod === 'paypal' && (
|
||||
{paymentMethod === 'stripe' && !clientSecret && status === 'loading' && (
|
||||
<div className="rounded-lg border bg-card p-6 text-sm text-muted-foreground shadow-sm">
|
||||
<LoaderCircle className="mb-3 h-4 w-4 animate-spin" />
|
||||
{t('checkout.payment_step.status_loading')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{paymentMethod === 'paypal' && !paypalDisabled && (
|
||||
<PayPalScriptProvider options={{ clientId: paypalClientId, currency: 'EUR' }}>
|
||||
<PayPalPaymentForm
|
||||
onError={handlePaymentError}
|
||||
onSuccess={handlePaymentSuccess}
|
||||
isReseller={Boolean(isReseller)}
|
||||
onProcessing={() => handleProcessing('paypal')}
|
||||
onSuccess={() => handleSuccess('paypal')}
|
||||
onError={(message) => handleError('paypal', message)}
|
||||
paypalPlanId={paypalPlanId}
|
||||
selectedPackage={selectedPackage}
|
||||
t={t}
|
||||
authUser={authUser}
|
||||
paypalClientId={paypalClientId}
|
||||
/>
|
||||
</PayPalScriptProvider>
|
||||
)}
|
||||
|
||||
{!clientSecret && paymentMethod === 'stripe' && (
|
||||
<div className="rounded-lg border bg-card p-6 shadow-sm">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('checkout.payment_step.loading_payment')}
|
||||
</p>
|
||||
</div>
|
||||
{paymentMethod === 'paypal' && paypalDisabled && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{t('checkout.payment_step.paypal_missing_plan')}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user