Comment intégrer Stripe rapidement dans ton application Next.js et commencer à encaisser tes premiers euros maintenant en moins de 5 minutes ?

Dans ce post on va voir :

• Les librairies à installer dans ton application
• Comment setup l'objet Stripe
• Comment créer un produit Stripe
• Comment ajouter les webhooks dans ton application pour gérer un abonnement

Installer Stripe

Pour ça, il te faut deux librairies :

• @stripe/stripe-js
• stripe

Utilise ton package manager pour les installer.

npm install @stripe/stripe-js stripe
# or
pnpm install @stripe/stripe-js stripe

Setup l'objet Stripe

Pour préparer le client stripe pour ton backend, tu vas avoir besoin d'une API Key Stripe (ainsi qu'un compte Stripe).

Pour ça, tu peux te rendre ici :

• https://stripe.com/docs/keys

Une fois fait, tu vas ajouter ta clé dans ton fichier .env :

STRIPE_SECRET_KEY=sk_test_51...

Et tu pourras ensuite créer l'objet Stripe dans un fichier stripe.ts :

import Stripe from "stripe";
import { env } from "./env";

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2023-10-16",
  typescript: true,
});

Créer un customer Stripe quand un utilisateur est créé (optionnel)

Si tu souhaites que l'email de l'utilisateur soit automatiquement rempli et que le checkout Stripe soit automatiquement lié à l'utilisateur, tu peux créer un customer Stripe quand un utilisateur est créé.

Setup les webhooks

On va partir sur le principe que tu fais un SaaS et que l'utilisateur paie un abonnement.

Les webhooks que je présente ici fonctionnent autant pour les paiements "one-time".

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.

Dans notre application Next.js, 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) {...}
}

Une fois fait, tu peux à peu près écouter les 5 événements suivants :

• checkout.session.completed : quand l'utilisateur a terminé un checkout. Tu peux le mettre premium.
• checkout.session.expired : quand l'utilisateur abandonne 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é a échoué, 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.

Créer un checkout avec le produit

Il va falloir créer un checkout Stripe avec la Stripe Checkout API.

N'oublie pas qu'il faut avoir :

• Un produit Stripe
• Récupérer le price_id

Maintenant tu vas pouvoir ajouter un bouton et lors du clic faire quelque chose de similaire à ça en utilisant les server actions :

import { auth } from "@/lib/auth/helper";
import { stripe } from "@/lib/stripe";
import { redirect } from "next/navigation";

export const App = () => {
  return (
    <form>
      <button
        formAction={async () => {
          "use server";

          // Récupérer l'utilisateur
          const user = await auth();

          const stripeCustomerId = user?.stripeCustomerId ?? undefined;

          const session = await stripe.checkout.sessions.create({
            customer: stripeCustomerId,
            mode: "subscription", // ou "payment"
            payment_method_types: ["card", "link"],
            line_items: [
              {
                // Ton price_id
                price: "price_1J3x4d2eZvKYlo2C5z3z4d2e",
                quantity: 1,
              },
            ],
            // Remplacer par ton url
            success_url: `http://localhost:3000/payment/success?session_id={CHECKOUT_SESSION_ID}`,
            cancel_url: `http://localhost:3000/payment/cancel`,
          });

          if (!session.url) {
            throw new Error("Something went wrong while creating the session.");
          }

          redirect(session.url);
        }}
      >
        Buy
      </button>
    </form>
  );
};

Ce code va automatiquement rediriger l'utilisateur sur le checkout Stripe lors du clic.

Excalidraw

Dès l'achat de ton produit, Stripe va envoyer le webhook suivant :

• checkout.session.completed

Tu vas pouvoir faire ce genre de chose dans ton webhook pour modifier l'utilisateur et ajouter le rôle premium :

switch (event.type) {
  case "checkout.session.completed": {
    const session = event.data.object as Stripe.Checkout.Session;

    const customerId = session.customer as string;

    // Ajouter le rôle premium
    await prisma.user.update({
      where: {
        stripeCustomerId: customerId,
      },
      data: {
        role: "premium",
      },
    });

    break;
  }
}

Si tu as plusieurs produits ou plans, il faudra modifier ce code pour venir récupérer le produit et ajouter le bon rôle à l'utilisateur.

Passer à la prochaine étape ?

Si tu veux créer des applications rapidement et comprendre comment les réaliser :