Ikhtisar Adaptor Framework

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 framework memungkinkan Anda mengintegrasikan Dodo Payments dalam kurang dari 10 baris kode. Mereka menangani otentikasi, parsing permintaan, dan format respons secara otomatis.

Adaptor Framework yang Tersedia

Pilih adaptor yang sesuai dengan framework Anda:

Next.js

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

Nuxt

Framework full-stack berbasis Vue dengan integrasi rute server

Express

Penangan berbasis middleware untuk framework Node.js yang populer

Fastify

Framework Node.js berkinerja tinggi dengan arsitektur plugin

Hono

Framework web ultracepat untuk edge, Cloudflare Workers, dan lainnya

Astro

Framework yang berfokus pada konten dengan dukungan endpoint server

SvelteKit

Framework Svelte full-stack dengan integrasi hook server

Remix

Framework React full-stack dengan penangan loader dan action

TanStack Start

Framework React full-stack yang aman tipe dengan fungsi server

Better Auth

Plugin framework otentikasi untuk otentikasi + pembayaran yang mulus

Convex

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

Fitur Utama

Semua adaptor framework menyediakan kemampuan bawaan ini:

Fitur	Deskripsi
Penangan Checkout	Dukungan untuk alur checkout statis, dinamis, dan berbasis sesi
Portal Pelanggan	Penangan bawaan untuk manajemen langganan dan penagihan
Penangan Webhook	Verifikasi tanda tangan yang aman dengan penangan acara bertipe
Konfigurasi Lingkungan	Pengaturan sederhana melalui variabel lingkungan
Keamanan Tipe	Dukungan penuh TypeScript dengan payload bertipe

Memulai dengan Cepat

Mulai dengan adaptor framework mana pun dalam tiga langkah:

Instal Adaptor

Gunakan manajer paket Anda untuk menginstal adaptor spesifik framework:

npm install @dodopayments/nextjs

npm install @dodopayments/nuxt

npm install @dodopayments/express

npm install @dodopayments/hono

npm install @dodopayments/astro

npm install @dodopayments/sveltekit

Konfigurasi Variabel Lingkungan

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 mengkomit file .env atau rahasia Anda ke kontrol versi.

Buat Penangan Rute

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

Anda sekarang siap untuk memproses pembayaran! Kunjungi halaman adaptor individu untuk panduan rinci dan semua opsi yang tersedia.

Jenis Alur Checkout

Semua adaptor mendukung tiga jenis alur checkout:

Checkout Statis (GET)

Gunakan checkout statis untuk tautan pembayaran yang sederhana dan dapat dibagikan. Kirimkan ID produk sebagai parameter kueri:

/api/checkout?productId=pdt_xxx&quantity=1

Mendukung pengisian pra-pelanggan dan kustomisasi opsional melalui parameter kueri.

Checkout Dinamis (POST)

Gunakan checkout dinamis untuk membuat pembayaran secara programatis dengan detail kustom:

{
  "product_id": "pdt_xxx",
  "customer": {
    "email": "customer@example.com",
    "name": "John Doe"
  },
  "quantity": 1
}

Mendukung pembayaran satu kali dan langganan.

Sesi Checkout (POST)

Gunakan sesi checkout untuk pengalaman checkout yang paling fleksibel dengan dukungan keranjang:

{
  "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 Acara Webhook

Semua adaptor menyediakan penanganan webhook yang aman tipe dengan callback acara 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 penangan webhook secara otomatis memverifikasi tanda tangan dan memvalidasi payload menggunakan skema Zod. Permintaan yang tidak valid ditolak dengan kode kesalahan 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	REST API dan aplikasi Node.js tradisional	Node.js
Fastify	API berkinerja tinggi	Node.js
Hono	Penempatan 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 bersarang	Node.js
TanStack Start	React full-stack yang aman tipe	Node.js
Better Auth	Aplikasi yang sudah menggunakan Better Auth	Berbagai
Convex	Aplikasi yang menggunakan Convex untuk backend	Convex Runtime

Mendapatkan Bantuan

Butuh bantuan dengan adaptor framework?

Discord: Bergabunglah dengan server komunitas kami untuk bantuan waktu nyata
Email: Hubungi kami di support@dodopayments.com
GitHub: Buka masalah di repositori adaptor yang bersangkutan
Dokumentasi: Kunjungi referensi API kami

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Adaptor Framework yang Tersedia

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

Fitur Utama

Memulai dengan Cepat

Jenis Alur Checkout

Penanganan Acara Webhook

Memilih Adaptor yang Tepat

Mendapatkan Bantuan

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​Adaptor Framework yang Tersedia

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

​Fitur Utama

​Memulai dengan Cepat

​Jenis Alur Checkout

​Penanganan Acara Webhook

​Memilih Adaptor yang Tepat

​Mendapatkan Bantuan

Adaptor Framework yang Tersedia

Fitur Utama

Memulai dengan Cepat

Jenis Alur Checkout

Penanganan Acara Webhook

Memilih Adaptor yang Tepat

Mendapatkan Bantuan