Integrating Stripe with Next.js for Quick Payment Processing

•

Comment intégrer Stripe rapidement dans ton application Next.js et commencer à encaisser tes premiers euros maintenant en moins de 5 minutes ? Afin d'encaisser tes premiers euros maintenant 🎰 Voici toutes les étapes à faire en utilisant Auth.js V5 👇

1️⃣ Installer Stripe Pour ça, il te faut deux librairies : • @stripe/stripe-js • stripe Utilise ton package manager pour les installer.

2️⃣ Setup l'objet Stripe Je te conseille de créer un fichier `lib/stripe` dans lequel tu mets ce code : import Stripe from "stripe" import { env } from "./env" export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: "2023-10-16", typescript: true, })

Le `apiVersion` dépend de la version de librairie que tu utilises, mets celle que TypeScript valide.

3️⃣ Setup API Keys Il va falloir évidemment créer un compte Stripe et tu peux suivre ce tutoriel pour récupérer tes clés API de tests. stripe.com/docs/development/get-started

4️⃣ Créer un customer Stripe quand un utilisateur est créé Dans l'object de configuration de Auth.js tu trouveras une clé `event.createUser` qui prend en paramètre l’user : createUser: ({ user }) => ...

Tu vas devoir créer un customer Stripe en utilsant user.email : const customer = await stripe.customers.create({ email: user.email, name: user.name ?? undefined, });

Puis dans ta database, il faudra sauvegarder la valeur de l'id du customer (customer.id) dans ton object database user. Moi j'ai ajouté un field `stripeCustomerId`. Faire ceci te permettera de créer des checkouts, des portails user...

4️⃣ Setup les webhooks On va partir sur le principes que tu fais un SaaS et que l'utilisateur paie un abonnement. Pour ça, tu vas devoir définir des webhooks pour ajouter un rôle premium dans ta database ou au contraire, l'enlever quand il ne paie pas.

Pour ça on va créer une route `api/webhooks/stripe` qui va récupérer l'event comme ceci : export const POST = async (req: NextRequest) => { const event = await req.json(); switch(event.type) {...} }

ℹ️ À noter qu'en prod, il faudra utiliser des "secrets" pour vérifier que l'event vient bien de l'API Stripe.

Une fois fait, tu peux à peu près écouter les 5 événements suivants : • "checkout.session.completed" : quand l'utilisateur à terminer un checkout. Tu peux le mettre premium. • "checkout.session.expired" : quand l'utilisateur abondonne un panier, tu peux lui envoyer un email.

• "invoice.paid" : dans le cas d'un abonnement, cet event sera appelé chaque mensualité. Tu peux continuer de lui mettre le premium. • "invoice.payment_failed" : une mensualité à fail, tu peux soit lui enlever le premium, soit lui envoyer un mail de rappel.

• "customer.subscription.deleted" : quand l'utilisateur arrête son abonnement. Tu peux lui enlever le premium.

5️⃣ Créer un checkout avec le product Il faudra créer un produit Stripe, mais une fois fais, tu pourras récupérer l'URL du checkout avec : stripe.checkout.sessions.create N’oublie pas de récupérer le stripeCustomerId si l'utilisateur est connecté pour pré-fill l'email !

⚠️ Tout ça... Je l'ai déjà fait pour toi dans nowts.app et en plus, je t'explique de A à Z comment je l'ai fait pour que tu comprennes TOUT ! On se retrouve là-bas 😉