프레임워크 어댑터 개요 - Dodo Payments Documentation

Dodo Payments는 결제 통합을 간소화하는 공식 프레임워크 어댑터를 제공합니다. 각 어댑터는 프레임워크의 관례와 원활하게 작동하도록 설계되어 있으며, 체크아웃, 고객 포털 및 웹훅 처리를 즉시 제공합니다.

프레임워크 어댑터를 사용하면 10줄 미만의 코드로 Dodo Payments를 통합할 수 있습니다. 인증, 요청 파싱, 응답 형식을 자동으로 처리합니다.

사용 가능한 프레임워크 어댑터

귀하의 프레임워크에 맞는 어댑터를 선택하세요:

Next.js

체크아웃, 포털 및 웹후크용 라우트 핸들러를 갖춘 App Router 지원

Nuxt

서버 라우트 통합을 갖춘 Vue 기반 풀스택 프레임워크

Express

인기 있는 Node.js 프레임워크용 미들웨어 기반 핸들러

Fastify

플러그인 아키텍처를 갖춘 고성능 Node.js 프레임워크

Hono

엣지, Cloudflare Workers 등을 위한 초고속 웹 프레임워크

Astro

서버 엔드포인트 지원을 갖춘 콘텐츠 중심 프레임워크

SvelteKit

서버 훅 통합을 갖춘 풀스택 Svelte 프레임워크

Remix

로더 및 액션 핸들러를 갖춘 풀스택 React 프레임워크

TanStack Start

서버 함수를 갖춘 타입 안전 풀스택 React 프레임워크

Better Auth

인증과 결제를 매끄럽게 연결하는 인증 프레임워크 플러그인

Convex

실시간 결제 동기화를 위한 Backend-as-a-Service 구성 요소

Bun

체크아웃, 포털 및 웹후크용 네이티브 Bun.serve() 핸들러

핵심 기능

모든 프레임워크 어댑터는 다음과 같은 기본 기능을 제공합니다:

Feature	Description
체크아웃 핸들러	정적, 동적 및 세션 기반 체크아웃 흐름을 지원
고객 포털	구독 및 청구 관리를 위한 미리 구성된 핸들러
웹후크 핸들러	서명 검증과 타입 이벤트 핸들러를 포함한 보안 처리
환경 구성	환경 변수로 간단한 설정
타입 안전성	타입화된 페이로드를 갖춘 완전한 TypeScript 지원

빠른 시작

어떤 프레임워크 어댑터든 세 가지 단계로 시작할 수 있습니다:

Install the 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 자격 증명을 추가하세요:

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 파일이나 비밀을 버전 관리에 커밋하지 마세요.

Create Route Handlers

체크아웃, 고객 포털 및 웹후크 라우트를 설정하세요:

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

이제 결제 처리를 시작할 준비가 되었습니다! 자세한 가이드와 모든 옵션은 개별 어댑터 페이지를 방문하세요.

체크아웃 흐름 유형

모든 어댑터는 세 가지 체크아웃 흐름 유형을 지원합니다:

Static Checkout (GET)

간단하고 공유 가능한 결제 링크에는 정적 체크아웃을 사용하세요. 제품 ID를 쿼리 매개변수로 전달합니다:

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

쿼리 매개변수를 통한 선택적 고객 사전 입력 및 사용자 지정을 지원합니다.

Dynamic Checkout (POST)

맞춤 세부 정보를 프로그램 방식으로 생성하려면 동적 체크아웃을 사용하세요:

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

일회성 결제와 구독을 모두 지원합니다.

Checkout Sessions (POST)

장바구니 지원을 갖춘 가장 유연한 체크아웃 경험을 위해 체크아웃 세션을 사용하세요:

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

자세한 내용은 Checkout Sessions Guide를 참고하세요.

웹후크 이벤트 처리

모든 어댑터는 세분화된 이벤트 콜백을 갖춘 타입 안전 웹후크 처리를 제공합니다:

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

모든 웹후크 핸들러는 Zod 스키마를 사용하여 서명을 자동으로 검증하고 페이로드를 확인합니다. 잘못된 요청은 적절한 오류 코드로 거부됩니다.

적절한 어댑터 선택

Framework	Best For	Runtime
Next.js	App Router를 사용하는 풀스택 React 앱	Node.js, Edge
Nuxt	풀스택 Vue.js 애플리케이션	Node.js
Express	REST API 및 전통적인 Node.js 앱	Node.js
Fastify	고성능 API	Node.js
Hono	엣지 배포, Cloudflare Workers	Edge, Node.js
Astro	서버 엔드포인트가 있는 콘텐츠 사이트	Node.js, Edge
SvelteKit	풀스택 Svelte 애플리케이션	Node.js
Remix	중첩 라우팅을 갖춘 풀스택 React	Node.js
TanStack Start	타입 안전 풀스택 React	Node.js
Better Auth	Better Auth를 이미 사용하는 앱	Various
Convex	백엔드에 Convex를 사용하는 앱	Convex Runtime
Bun	네이티브 Bun 서버 애플리케이션	Bun

도움 받기

프레임워크 어댑터 관련 도움이 필요하신가요?

Discord: 실시간 도움을 얻으려면 커뮤니티 서버에 참여하세요
Email: support@dodopayments.com으로 연락하세요
GitHub: 해당 어댑터 리포지토리에 이슈를 열어주세요
Documentation: API reference를 방문하세요

​사용 가능한 프레임워크 어댑터

Next.js

Nuxt

Express

Fastify

Hono

Astro

SvelteKit

Remix

TanStack Start

Better Auth

Convex

Bun

​핵심 기능

​빠른 시작

​체크아웃 흐름 유형

​웹후크 이벤트 처리

​적절한 어댑터 선택

​도움 받기

사용 가능한 프레임워크 어댑터

핵심 기능

빠른 시작

체크아웃 흐름 유형

웹후크 이벤트 처리

적절한 어댑터 선택

도움 받기