Hoppa till huvudinnehåll

​
Översikt

Next.js minimala mall ger en färdig att använda startpunkt för att integrera Dodo Payments med din Next.js-applikation. Denna mall inkluderar kassa-sessioner, webhook-hantering, kundportal och moderna UI-komponenter för att hjälpa dig att börja ta emot betalningar snabbt.
Detta boilerplate använder Next.js 16 App Router med TypeScript, Tailwind CSS 4 och @dodopayments/nextjs-adaptern.

​
Funktioner

  • Snabb start - Kom igång på under 5 minuter
  • Betalintegration - Förkonfigurerat checkoutflöde med @dodopayments/nextjs
  • Modern UI - Rent, mörkt prissättningsgränssnitt med Tailwind CSS
  • Webhook-hantering - Färdig webhook-ändpunkt för betalningshändelser
  • Kundportal - Hantering av prenumerationer med ett klick
  • TypeScript - Fullständigt typat med minimala, fokuserade typer
  • Förifylld checkout - Visar hur kunddata skickas för bättre användarupplevelse

​
Förutsättningar

Innan du börjar, se till att du har:
  • Node.js 20.9+ (krävs för Next.js 16)
  • Dodo Payments-konto (för att få tillgång till API och Webhook-nycklar från instrumentpanelen)

​
Snabbstart

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

Registrera dig på Dodo Payments och hämta dina uppgifter från instrumentpanelen:
Se till att du är i testläge medan du utvecklar!
4

Configure Environment Variables

Skapa en .env-fil i rotmappen:
cp .env.example .env
Uppdatera värdena med dina Dodo Payments-uppgifter:
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
Commita aldrig din .env-fil till versionshantering. Den ingår redan i .gitignore.
5

Add Your Products

Uppdatera src/lib/products.ts med dina faktiska produkt-ID:n från 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
Öppna http://localhost:3000 för att se din prissättningssida!

​
Projektstruktur

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

​
Anpassning

​
Uppdatera produktinformation

Redigera src/lib/products.ts för att ändra:
  • Produkt-ID:n (från din Dodo-instrumentpanel)
  • Prissättning
  • Funktioner
  • Beskrivningar

​
Förifyll kunddata

I src/app/components/ProductCard.tsx, ersätt de hårdkodade värdena med din faktiska användardata: 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
Uppdatera kundportalen

I src/app/components/Header.tsx, ersätt det hårdkodade kund-ID:t: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Du kan genomföra ett testköp för att få kund-ID:t för testning.

​
Webhook-händelser

Boilerplaten visar hur två webhook-händelser hanteras i src/app/api/webhook/route.ts:
  • onSubscriptionActive - Triggas när en prenumeration blir aktiv
  • onPaymentSucceeded - Triggas när en betalning lyckas
Lägg till din affärslogik inuti dessa hanterare: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Lägg till fler webhook-händelser vid behov. För lokal utveckling kan du använda verktyg som ngrok för att skapa en säker tunnel till din lokala server och använda den som din webhook-URL.

​
Distribution

​
Bygg för produktion

npm run build
npm start

​
Distribuera till Vercel

[ Distribuera med Vercel ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Glöm inte att lägga till dina miljövariabler i Vercel-instrumentpanelen!

​
Uppdatera Webhook-URL

Efter distribution, uppdatera din webhook-URL i Dodo Payments Dashboard: 
https://example.com/api/webhook

​
Felsökning

Radera node_modules och installera om beroenden:
rm -rf node_modules package-lock.json
npm install
Vanliga orsaker:
  • Ogiltigt produkt-ID - kontrollera att det finns i din Dodo-instrumentpanel
  • Fel API-nyckel eller miljöinställning i .env
  • Kontrollera webbläsarkonsol och terminal efter fel
För lokal testning, använd ngrok för att exponera din server:
ngrok http 3000
Uppdatera webhook-URL:en i din Dodo-dashboard till ngrok-URL:en. Kom ihåg att uppdatera din .env-fil med rätt webhook-verifieringsnyckel.

​
Lär dig mer

​
Support

Behöver du hjälp med mallen?