Intégrer Stripe dans Next.js : Le guide complet pour les abonnements

L'objectif final de tout SaaS est de générer des revenus. Pour cela, vous devez intégrer un système de paiement. Stripe est le standard incontesté. Mais son intégration peut sembler intimidante avec ses concepts d'API, de Webhooks et de SCA.

Simplifions le processus pour une intégration SaaS moderne avec Next.js.

La stratégie "Stripe Checkout" (Low Code)

Oubliez l'idée de créer votre propre formulaire de carte bancaire avec des inputs React. C'est complexe, risqué pour la sécurité, et dur à maintenir (3D Secure). Utilisez Stripe Checkout.

Le principe est simple : quand l'utilisateur clique sur "S'abonner", vous redirigez l'utilisateur vers une page hébergée par Stripe. C'est là qu'il entre ses infos. Cette page est optimisée pour la conversion, mobile-friendly, et gère Apple Pay / Google Pay nativement.

Une fois le paiement validé, Stripe renvoie l'utilisateur sur votre site (`/success`). C'est propre et sécurisé.

Les Webhooks : Le cœur du système

C'est la partie la plus importante. Comment savoir si le paiement a vraiment réussi ? Ne faites jamais confiance au retour client (la page `/success`). Un utilisateur malin pourrait accéder à cette URL sans payer.

La vérité vient des Webhooks. Stripe envoie une notification HTTP sécurisée à votre serveur (route API Next.js `/api/webhooks/stripe`) pour dire "L'événement `checkout.session.completed` a eu lieu pour le client X".

C'est dans cette route API que vous devez écrire la logique métier :

1. Vérifier la signature du webhook (sécurité).
2. Récupérer l'ID utilisateur (passé en métadonnée).
3. Mettre à jour la base de données (Supabase) pour passer l'utilisateur en "Premium" et définir la date de fin d'abonnement.

Le Portail Client (Customer Portal)

Et si l'utilisateur veut changer de carte, télécharger une facture ou se désabonner ? Ne codez pas ces pages ! Stripe offre un Customer Portal hébergé.

Créez juste un bouton "Gérer mon abonnement" dans votre app qui redirige vers ce portail. Stripe gère tout le cycle de vie de l'abonnement pour vous. C'est un gain de temps de développement de plusieurs semaines.