Framework Adaptors の概要

Dodo Payments は、payment integration を簡素化する公式の framework adaptor を提供します。各 adaptor は使用する framework の規約にシームレスに対応するよう設計されており、checkout、customer portal、webhook 処理をすぐに利用できます。

Framework adaptor を使えば、10行未満のコードで Dodo Payments を統合できます。認証、request の解析、response の formatting は自動的に処理されます。

利用可能な Framework Adaptor

使用する framework に合った adaptor を選択してください。

Next.js

checkout、portal、webhook 向けの route handler による App Router サポート

Nuxt

server route 統合に対応した Vue ベースの full-stack framework

Express

人気の Node.js framework 向け middleware ベースの handler

Fastify

plugin architecture を備えた高性能 Node.js framework

Hono

edge、Cloudflare Workers などに対応した超高速 Web framework

Astro

server endpoint をサポートするコンテンツ重視の framework

SvelteKit

server hook 統合に対応した full-stack Svelte framework

Remix

loader と action handler を備えた full-stack React framework

TanStack Start

server function を備えた type-safe な full-stack React framework

Better Auth

認証と payment をシームレスに統合する authentication framework plugin

Convex

リアルタイムの payment 同期に対応した Backend-as-a-Service component

Bun

checkout、portal、webhook に対応したネイティブ Bun.serve() handler

Core Features

すべての framework adaptor に、次の機能が組み込まれています。

Feature	Description
Checkout Handler	static、dynamic、session-based checkout flow に対応
Customer Portal	subscription と billing management 用の構築済み handler
Webhook Handler	typed event handler による安全な signature verification
Environment Config	environment variable による簡単な設定
Type Safety	typed payload による完全な TypeScript サポート

クイックスタート

次の3つの手順で、任意の framework adaptor の利用を開始できます。

Install the Adaptor

package manager を使用して、framework 専用の adaptor をインストールします。

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

Dodo Payments の credential を environment に追加します。

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"

.env ファイルや secret を version control に commit しないでください。

Create Route Handlers

checkout、customer portal、webhook の route を設定します。

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

これで payment を処理する準備が整いました。詳細な guide と利用可能なすべての option については、各 adaptor のページをご覧ください。

Checkout Flow の種類

すべての adaptor は、3種類の checkout flow に対応しています。

Static Checkout (GET)

シンプルで共有可能な payment link には、static checkout を使用します。query parameter として product ID を渡してください。

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

query parameter を使用して、customer の事前入力と customization を任意で設定できます。

Dynamic Checkout (POST)

dynamic checkout を使用すると、カスタムの詳細を指定して programmatically に payment を作成できます。

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

one-time payment と subscription の両方に対応しています。

Checkout Sessions (POST)

cart に対応した、柔軟性の高い checkout experience には checkout session を使用します。

{
  "product_cart": [
    { "product_id": "pdt_xxx", "quantity": 1 },
    { "product_id": "pdt_yyy", "quantity": 2 }
  ],
  "customer": {
    "email": "customer@example.com"
  }
}

詳しくは Checkout Sessions Guide をご覧ください。

Webhook Event Handling

すべての adaptor は、細かな event callback に対応した type-safe な webhook 処理を提供します。

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

すべての webhook handler は、Zod schema を使用して signature を自動的に検証し、payload を validate します。無効な request は適切な error code で拒否されます。

適切な Adaptor の選択

Framework	Best For	Runtime
Next.js	App Router を使用する full-stack React app	Node.js, Edge
Nuxt	full-stack Vue.js application	Node.js
Express	REST API と従来型の Node.js app	Node.js
Fastify	高性能 API	Node.js
Hono	edge deployment、Cloudflare Workers	Edge, Node.js
Astro	server endpoint を備えた content site	Node.js, Edge
SvelteKit	full-stack Svelte application	Node.js
Remix	nested routing に対応した full-stack React	Node.js
TanStack Start	type-safe な full-stack React	Node.js
Better Auth	すでに Better Auth を使用している app	Various
Convex	backend に Convex を使用する app	Convex Runtime
Bun	ネイティブ Bun server application	Bun

サポート

Framework adaptor についてサポートが必要ですか？

Discord: リアルタイムのサポートについては、community server に参加してください
Email: support@dodopayments.com までお問い合わせください
GitHub: 該当する adaptor repository で issue を作成してください
Documentation: API reference をご覧ください

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

利用可能な Framework Adaptor

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

Bun

Core Features

クイックスタート

Checkout Flow の種類

Webhook Event Handling

適切な Adaptor の選択

サポート

​利用可能な Framework Adaptor

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

Bun

​Core Features

​クイックスタート

​Checkout Flow の種類

​Webhook Event Handling

​適切な Adaptor の選択

​サポート

利用可能な Framework Adaptor

Core Features

クイックスタート

Checkout Flow の種類

Webhook Event Handling

適切な Adaptor の選択

サポート