Ikhtisar Adaptor Framework - Dodo Payments Documentation

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:

Fitur	Deskripsi
Checkout Handler	Dukungan untuk alur checkout statis, dinamis, dan berbasis sesi
Customer Portal	Handler bawaan untuk manajemen langganan dan penagihan
Webhook Handler	Verifikasi tanda tangan aman dengan handler event bertipe
Environment Config	Pengaturan sederhana melalui variabel lingkungan
Type Safety	Dukungan TypeScript penuh dengan payload bertipe

Mulai Cepat

Mulailah dengan adaptor kerangka kerja mana pun dalam tiga langkah:

Install the Adaptor

Gunakan manajer paket Anda untuk menginstal adaptor spesifik kerangka kerja:

npm install @dodopayments/nextjs

npm install @dodopayments/nuxt

npm install @dodopayments/express

npm install @dodopayments/hono

npm install @dodopayments/astro

npm install @dodopayments/sveltekit

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.

Create Route Handlers

Siapkan rute checkout, portal pelanggan, dan webhook Anda:

Next.js
Express
Hono

// 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,
});

import { checkoutHandler } from '@dodopayments/express';

app.get('/api/checkout', checkoutHandler({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
  environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
}));

import { Checkout } from "@dodopayments/hono";

app.get('/checkout', 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:

Static Checkout (GET)

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.

Dynamic Checkout (POST)

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.

Checkout Sessions (POST)

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

Framework	Terbaik untuk	Runtime
Next.js	Aplikasi React full-stack dengan App Router	Node.js, Edge
Nuxt	Aplikasi Vue.js full-stack	Node.js
Express	API REST dan aplikasi Node.js tradisional	Node.js
Fastify	API berperforma tinggi	Node.js
Hono	Deploy di edge, Cloudflare Workers	Edge, Node.js
Astro	Situs konten dengan endpoint server	Node.js, Edge
SvelteKit	Aplikasi Svelte full-stack	Node.js
Remix	React full-stack dengan routing bertingkat	Node.js
TanStack Start	React full-stack tipe-aman	Node.js
Better Auth	Aplikasi yang sudah menggunakan Better Auth	Beragam
Convex	Aplikasi yang menggunakan Convex untuk backend	Convex Runtime
Bun	Aplikasi server Bun native	Bun

Mendapatkan Bantuan

Butuh bantuan dengan adaptor kerangka kerja?

Discord: Bergabunglah dengan server komunitas kami untuk bantuan waktu nyata
Email: Hubungi kami di support@dodopayments.com
GitHub: Buka isu di repositori adaptor terkait
Dokumentasi: Kunjungi API reference kami

​Adaptor Framework yang Tersedia

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

Bun

​Fitur Utama

​Mulai Cepat

​Jenis Alur Checkout

​Penanganan Event Webhook

​Memilih Adaptor yang Tepat

​Mendapatkan Bantuan

Adaptor Framework yang Tersedia

Fitur Utama

Mulai Cepat

Jenis Alur Checkout

Penanganan Event Webhook

Memilih Adaptor yang Tepat

Mendapatkan Bantuan