Langsung ke konten utama
Dodo Payments menyediakan adaptor framework resmi yang menyederhanakan integrasi pembayaran. Setiap adaptor dirancang untuk bekerja secara mulus dengan konvensi framework Anda, menawarkan checkout, portal pelanggan, dan penanganan webhook secara langsung.
Adaptor kerangka kerja memungkinkan Anda mengintegrasikan Dodo Payments dalam kurang dari 10 baris kode. Mereka menangani otentikasi, penguraian permintaan, dan pemformatan respons secara otomatis.

​
Adaptor Framework yang Tersedia

Pilih adaptor yang sesuai dengan framework Anda:

Next.js

Dukungan App Router dengan handler rute untuk checkout, portal, dan webhook

Nuxt

Kerangka kerja full-stack berbasis Vue dengan integrasi rute server

Express

Handler berbasis middleware untuk kerangka kerja Node.js populer

Fastify

Kerangka kerja Node.js berperforma tinggi dengan arsitektur plugin

Hono

Kerangka kerja web super cepat untuk edge, Cloudflare Workers, dan lainnya

Astro

Kerangka kerja berfokus pada konten dengan dukungan endpoint server

SvelteKit

Kerangka kerja Svelte full-stack dengan integrasi hook server

Remix

Kerangka kerja React full-stack dengan handler loader dan action

TanStack Start

Kerangka kerja React full-stack tipe-aman dengan fungsi server

Better Auth

Plugin kerangka kerja otentikasi untuk integrasi auth + pembayaran yang mulus

Convex

Komponen Backend-as-a-Service untuk sinkronisasi pembayaran waktu nyata

Bun

Handler Bun.serve() native untuk checkout, portal, dan webhook

​
Fitur Utama

Semua adaptor kerangka kerja menyediakan kemampuan bawaan berikut:
FiturDeskripsi
Checkout HandlerDukungan untuk alur checkout statis, dinamis, dan berbasis sesi
Customer PortalHandler bawaan untuk manajemen langganan dan penagihan
Webhook HandlerVerifikasi tanda tangan aman dengan handler event bertipe
Environment ConfigPengaturan sederhana melalui variabel lingkungan
Type SafetyDukungan TypeScript penuh dengan payload bertipe

​
Mulai Cepat

Mulailah dengan adaptor kerangka kerja mana pun dalam tiga langkah:
1

Install the Adaptor

Gunakan manajer paket Anda untuk menginstal adaptor spesifik kerangka kerja:
npm install @dodopayments/nextjs
2

Configure Environment Variables

Tambahkan kredensial Dodo Payments Anda ke lingkungan Anda:
DODO_PAYMENTS_API_KEY=your-api-key
DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret
DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
DODO_PAYMENTS_ENVIRONMENT="test_mode" # or "live_mode"
Jangan pernah meng-commit file .env atau rahasia Anda ke kontrol versi.
3

Create Route Handlers

Siapkan rute checkout, portal pelanggan, dan webhook Anda:
// app/checkout/route.ts
import { Checkout } from "@dodopayments/nextjs";

export const GET = Checkout({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
});
Sekarang Anda siap memproses pembayaran! Kunjungi halaman adaptor individual untuk panduan mendetail dan semua opsi yang tersedia.

​
Jenis Alur Checkout

Semua adaptor mendukung tiga jenis alur checkout:
Gunakan checkout statis untuk tautan pembayaran sederhana yang bisa dibagikan. Sertakan ID produk sebagai parameter kueri:
/api/checkout?productId=pdt_xxx&quantity=1
Mendukung pengisian awal pelanggan opsional dan penyesuaian melalui parameter kueri.
Gunakan checkout dinamis untuk membuat pembayaran secara programatik dengan detail khusus:
{
  "product_id": "pdt_xxx",
  "customer": {
    "email": "customer@example.com",
    "name": "John Doe"
  },
  "quantity": 1
}
Mendukung pembayaran satu kali dan langganan.
Gunakan sesi checkout untuk pengalaman checkout paling fleksibel dengan dukungan keranjang belanja:
{
  "product_cart": [
    { "product_id": "pdt_xxx", "quantity": 1 },
    { "product_id": "pdt_yyy", "quantity": 2 }
  ],
  "customer": {
    "email": "customer@example.com"
  }
}
Pelajari lebih lanjut di Panduan Sesi Checkout.

​
Penanganan Event Webhook

Semua adaptor menyediakan penanganan webhook tipe-aman dengan callback event yang terperinci: 
Webhooks({
  webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY,
  onPayload: async (payload) => {
    // Handle any webhook event
  },
  onPaymentSucceeded: async (payload) => {
    // Handle successful payments
  },
  onSubscriptionActive: async (payload) => {
    // Handle new subscriptions
  },
  // ... 20+ event types supported
});
Semua handler webhook secara otomatis memverifikasi tanda tangan dan memvalidasi payload menggunakan skema Zod. Permintaan tidak valid ditolak dengan kode error yang sesuai.

​
Memilih Adaptor yang Tepat

FrameworkTerbaik untukRuntime
Next.jsAplikasi React full-stack dengan App RouterNode.js, Edge
NuxtAplikasi Vue.js full-stackNode.js
ExpressAPI REST dan aplikasi Node.js tradisionalNode.js
FastifyAPI berperforma tinggiNode.js
HonoDeploy di edge, Cloudflare WorkersEdge, Node.js
AstroSitus konten dengan endpoint serverNode.js, Edge
SvelteKitAplikasi Svelte full-stackNode.js
RemixReact full-stack dengan routing bertingkatNode.js
TanStack StartReact full-stack tipe-amanNode.js
Better AuthAplikasi yang sudah menggunakan Better AuthBeragam
ConvexAplikasi yang menggunakan Convex untuk backendConvex Runtime
BunAplikasi server Bun nativeBun

​
Mendapatkan Bantuan

Butuh bantuan dengan adaptor kerangka kerja?