> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 프레임워크 어댑터 개요

> 최소한의 코드로 몇 분 안에 Dodo Payments를 통합할 수 있는 인기 웹 프레임워크용 사전 구축된 어댑터

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

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

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

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

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    체크아웃, 포털 및 웹후크용 라우트 핸들러를 갖춘 App Router 지원
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    서버 라우트 통합을 갖춘 Vue 기반 풀스택 프레임워크
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    인기 있는 Node.js 프레임워크용 미들웨어 기반 핸들러
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    플러그인 아키텍처를 갖춘 고성능 Node.js 프레임워크
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    엣지, Cloudflare Workers 등을 위한 초고속 웹 프레임워크
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    서버 엔드포인트 지원을 갖춘 콘텐츠 중심 프레임워크
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    서버 훅 통합을 갖춘 풀스택 Svelte 프레임워크
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    로더 및 액션 핸들러를 갖춘 풀스택 React 프레임워크
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    서버 함수를 갖춘 타입 안전 풀스택 React 프레임워크
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    인증과 결제를 매끄럽게 연결하는 인증 프레임워크 플러그인
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    실시간 결제 동기화를 위한 Backend-as-a-Service 구성 요소
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    체크아웃, 포털 및 웹후크용 네이티브 Bun.serve() 핸들러
  </Card>
</CardGroup>

## 핵심 기능

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

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

## 빠른 시작

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

<Steps>
  <Step title="Install the Adaptor">
    패키지 관리자를 사용하여 프레임워크 전용 어댑터를 설치하세요:

    <Tabs>
      <Tab title="Next.js">
        ```bash theme={null}
        npm install @dodopayments/nextjs
        ```
      </Tab>

      <Tab title="Nuxt">
        ```bash theme={null}
        npm install @dodopayments/nuxt
        ```
      </Tab>

      <Tab title="Express">
        ```bash theme={null}
        npm install @dodopayments/express
        ```
      </Tab>

      <Tab title="Hono">
        ```bash theme={null}
        npm install @dodopayments/hono
        ```
      </Tab>

      <Tab title="Astro">
        ```bash theme={null}
        npm install @dodopayments/astro
        ```
      </Tab>

      <Tab title="SvelteKit">
        ```bash theme={null}
        npm install @dodopayments/sveltekit
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Environment Variables">
    환경에 Dodo Payments 자격 증명을 추가하세요:

    ```env theme={null}
    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"
    ```

    <Warning>
      `.env` 파일이나 비밀을 버전 관리에 커밋하지 마세요.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    체크아웃, 고객 포털 및 웹후크 라우트를 설정하세요:

    <Tabs>
      <Tab title="Next.js">
        ```typescript theme={null}
        // 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,
        });
        ```
      </Tab>

      <Tab title="Express">
        ```typescript theme={null}
        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,
        }));
        ```
      </Tab>

      <Tab title="Hono">
        ```typescript theme={null}
        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,
        }));
        ```
      </Tab>
    </Tabs>

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

## 체크아웃 흐름 유형

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

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    간단하고 공유 가능한 결제 링크에는 정적 체크아웃을 사용하세요. 제품 ID를 쿼리 매개변수로 전달합니다:

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

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

  <Accordion title="Dynamic Checkout (POST)">
    맞춤 세부 정보를 프로그램 방식으로 생성하려면 동적 체크아웃을 사용하세요:

    ```json theme={null}
    {
      "product_id": "pdt_xxx",
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "quantity": 1
    }
    ```

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

  <Accordion title="Checkout Sessions (POST)">
    장바구니 지원을 갖춘 가장 유연한 체크아웃 경험을 위해 체크아웃 세션을 사용하세요:

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

    자세한 내용은 [Checkout Sessions Guide](/developer-resources/checkout-session)를 참고하세요.
  </Accordion>
</AccordionGroup>

## 웹후크 이벤트 처리

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

```typescript theme={null}
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
});
```

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

## 적절한 어댑터 선택

| 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**: 실시간 도움을 얻으려면 [커뮤니티 서버](https://discord.gg/bYqAp4ayYh)에 참여하세요
* **Email**: [support@dodopayments.com](mailto:support@dodopayments.com)으로 연락하세요
* **GitHub**: 해당 어댑터 리포지토리에 이슈를 열어주세요
* **Documentation**: [API reference](/api-reference/introduction)를 방문하세요