Passer au contenu principal

​
Aperçu

Le boilerplate minimal Next.js fournit un point de départ prêt à l’emploi pour intégrer Dodo Payments avec votre application Next.js. Ce modèle inclut des sessions de paiement, la gestion des webhooks, un portail client et des composants UI modernes pour vous aider à commencer à accepter des paiements rapidement.
Cette base utilise Next.js 16 App Router avec TypeScript, Tailwind CSS 4 et l’adaptateur @dodopayments/nextjs.

​
Caractéristiques

  • Quick Setup - Commencez en moins de 5 minutes
  • Payment Integration - Flux de paiement préconfiguré utilisant @dodopayments/nextjs
  • Modern UI - Page tarifaire épurée avec thème sombre en Tailwind CSS
  • Webhook Handler - Point de terminaison webhook prêt à l’emploi pour les événements de paiement
  • Customer Portal - Gestion des abonnements en un clic
  • TypeScript - Complètement typé avec des types minimaux et ciblés
  • Pre-filled Checkout - Montre comment transmettre les données client pour améliorer l’expérience utilisateur

​
Prérequis

Avant de commencer, assurez-vous d’avoir :
  • Node.js 20.9+ (nécessaire pour Next.js 16)
  • Compte Dodo Payments (pour accéder aux clés API et Webhook depuis le tableau de bord)

​
Démarrage Rapide

1

Clone the Repository

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
2

Install Dependencies

npm install
3

Get API Credentials

Inscrivez-vous sur Dodo Payments et récupérez vos identifiants depuis le tableau de bord :
Assurez-vous d’être en mode Test pendant le développement !
4

Configure Environment Variables

Créez un fichier .env à la racine du projet :
cp .env.example .env
Mettez à jour les valeurs avec vos identifiants Dodo Payments :
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode
Ne commitez jamais votre fichier .env dans le contrôle de version. Il est déjà inclus dans .gitignore.
5

Add Your Products

Mettez à jour src/lib/products.ts avec vos véritables identifiants de produit depuis Dodo Payments :
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

Run the Development Server

npm run dev
Ouvrez http://localhost:3000 pour voir votre page tarifaire !

​
Structure du Projet

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​
Personnalisation

​
Mettre à Jour les Informations sur les Produits

Modifiez src/lib/products.ts pour ajuster :
  • les identifiants de produit (depuis votre tableau de bord Dodo)
  • les tarifs
  • les fonctionnalités
  • les descriptions

​
Pré-remplir les Données Client

Dans src/app/components/ProductCard.tsx, remplacez les valeurs codées en dur par vos véritables données utilisateur : 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
Mettre à Jour le Portail Client

Dans src/app/components/Header.tsx, remplacez l’identifiant client codé en dur : 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Vous pouvez effectuer un achat test pour obtenir l’identifiant client pour les tests.

​
Événements Webhook

Le boilerplate montre la gestion de deux événements webhook dans src/app/api/webhook/route.ts :
  • onSubscriptionActive - Déclenché lorsqu’un abonnement devient actif
  • onPaymentSucceeded - Déclenché lorsqu’un paiement réussit
Ajoutez votre logique métier à l’intérieur de ces gestionnaires : 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Ajoutez d’autres événements webhook si nécessaire. Pour le développement local, vous pouvez utiliser des outils comme ngrok pour créer un tunnel sécurisé vers votre serveur local et l’utiliser comme votre URL de webhook.

​
Déploiement

​
Construire pour la Production

npm run build
npm start

​
Déployer sur Vercel

[ Déployer avec Vercel ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) N’oubliez pas d’ajouter vos variables d’environnement dans le tableau de bord Vercel !

​
Mettre à Jour l’URL du Webhook

Après le déploiement, mettez à jour votre URL de webhook dans le Tableau de bord Dodo Payments : 
https://example.com/api/webhook

​
Dépannage

Supprimez node_modules et réinstallez les dépendances :
rm -rf node_modules package-lock.json
npm install
Causes courantes :
  • Identifiant de produit invalide : vérifiez qu’il existe dans votre tableau de bord Dodo
  • Mauvaise clé API ou configuration d’environnement dans .env
  • Consultez la console du navigateur et le terminal pour rechercher des erreurs
Pour les tests locaux, utilisez ngrok afin d’exposer votre serveur :
ngrok http 3000
Mettez à jour l’URL du webhook dans votre tableau de bord Dodo avec l’URL ngrok. Pensez à mettre à jour votre fichier .env avec la bonne clé de vérification du webhook.

​
En Savoir Plus

​
Support

Besoin d’aide avec le boilerplate ?