fix: page /checkout/success qui auto-sync le plan apres paiement Stripe (success_url corrige)
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 3m5s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 3m5s
This commit is contained in:
90
frontend/src/app/checkout/success/page.tsx
Normal file
90
frontend/src/app/checkout/success/page.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { CheckCircle2, XCircle, RefreshCw } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* /checkout/success
|
||||
* Stripe redirects here after a successful payment.
|
||||
* We call /api/v1/auth/checkout/sync to update the user plan in DB,
|
||||
* then redirect to /dashboard/profile?tab=subscription.
|
||||
*/
|
||||
export default function CheckoutSuccessPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const sessionId = searchParams.get('session_id');
|
||||
|
||||
const [status, setStatus] = useState<'syncing' | 'ok' | 'error'>('syncing');
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId) {
|
||||
// No session_id — just redirect to profile
|
||||
router.replace('/dashboard/profile?tab=subscription');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
router.replace('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
// Sync the checkout session to update plan in DB
|
||||
fetch(`${API_BASE}/api/v1/auth/checkout/sync?session_id=${sessionId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then(async (res) => {
|
||||
let data: any = {};
|
||||
try { data = await res.json(); } catch { /* ignore */ }
|
||||
if (res.ok) {
|
||||
setStatus('ok');
|
||||
setMessage(data.data?.plan ? `Forfait ${data.data.plan} activé !` : 'Abonnement activé !');
|
||||
// Redirect after 2s
|
||||
setTimeout(() => router.replace('/dashboard/profile?tab=subscription'), 2000);
|
||||
} else {
|
||||
setStatus('error');
|
||||
setMessage(data.message ?? data.error ?? 'Erreur de synchronisation');
|
||||
setTimeout(() => router.replace('/dashboard/profile?tab=subscription'), 3000);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setStatus('error');
|
||||
setMessage('Erreur réseau. Votre paiement est confirmé — rechargez votre profil.');
|
||||
setTimeout(() => router.replace('/dashboard/profile?tab=subscription'), 3000);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [sessionId]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-background">
|
||||
<div className="flex flex-col items-center gap-6 p-12 rounded-3xl bg-white dark:bg-[#141414] shadow-2xl max-w-md w-full mx-4 text-center">
|
||||
{status === 'syncing' && (
|
||||
<>
|
||||
<RefreshCw className="w-12 h-12 text-brand-accent animate-spin" />
|
||||
<h1 className="text-2xl font-black uppercase tracking-tight">Activation en cours…</h1>
|
||||
<p className="text-sm text-muted-foreground">Nous mettons à jour votre abonnement, veuillez patienter.</p>
|
||||
</>
|
||||
)}
|
||||
{status === 'ok' && (
|
||||
<>
|
||||
<CheckCircle2 className="w-12 h-12 text-emerald-500" />
|
||||
<h1 className="text-2xl font-black uppercase tracking-tight text-emerald-600">Paiement confirmé !</h1>
|
||||
<p className="text-sm text-muted-foreground">{message}</p>
|
||||
<p className="text-xs text-muted-foreground">Redirection vers votre profil…</p>
|
||||
</>
|
||||
)}
|
||||
{status === 'error' && (
|
||||
<>
|
||||
<XCircle className="w-12 h-12 text-amber-500" />
|
||||
<h1 className="text-2xl font-black uppercase tracking-tight">Paiement reçu</h1>
|
||||
<p className="text-sm text-muted-foreground">{message}</p>
|
||||
<p className="text-xs text-muted-foreground">Redirection…</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -117,7 +117,7 @@ async def create_checkout_session(
|
||||
mode="subscription",
|
||||
payment_method_types=["card"],
|
||||
line_items=[line_item],
|
||||
success_url=success_url or f"{os.getenv('FRONTEND_URL', 'http://localhost:3000')}/dashboard?session_id={{CHECKOUT_SESSION_ID}}",
|
||||
success_url=success_url or f"{os.getenv('FRONTEND_URL', 'http://localhost:3000')}/checkout/success?session_id={{CHECKOUT_SESSION_ID}}",
|
||||
cancel_url=cancel_url or f"{os.getenv('FRONTEND_URL', 'http://localhost:3000')}/pricing",
|
||||
metadata={"user_id": user_id, "plan": plan.value},
|
||||
subscription_data={
|
||||
|
||||
Reference in New Issue
Block a user