> ## 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.

# Tổng quan về các bộ chuyển đổi Framework

> Các bộ chuyển đổi đã được xây dựng sẵn cho các framework web phổ biến để tích hợp Dodo Payments trong vài phút với mã tối thiểu

Dodo Payments cung cấp các bộ chuyển đổi framework chính thức giúp đơn giản hóa việc tích hợp thanh toán. Mỗi bộ chuyển đổi được thiết kế để hoạt động liền mạch với các quy ước của framework của bạn, cung cấp chức năng thanh toán, cổng khách hàng và xử lý webhook ngay lập tức.

<Tip>
  Các bộ chuyển đổi framework cho phép bạn tích hợp Dodo Payments trong dưới 10 dòng mã. Chúng tự động xử lý xác thực, phân tích yêu cầu và định dạng phản hồi.
</Tip>

## Các bộ chuyển đổi Framework có sẵn

Chọn bộ chuyển đổi phù hợp với framework của bạn:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    Hỗ trợ App Router với các bộ xử lý route cho checkout, portal và webhook
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Framework full-stack dựa trên Vue với tích hợp route server
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Các bộ xử lý dựa trên middleware cho framework Node.js phổ biến
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Framework Node.js hiệu năng cao với kiến trúc plugin
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Framework web siêu nhanh cho edge, Cloudflare Workers và hơn thế nữa
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Framework tập trung nội dung với hỗ trợ endpoint server
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Framework Svelte full-stack với tích hợp hook server
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Framework React full-stack với các bộ xử lý loader và action
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Framework React full-stack an toàn kiểu với các hàm server
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Plugin framework xác thực để đồng bộ hóa auth và thanh toán
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Thành phần Backend-as-a-Service cho đồng bộ thanh toán thời gian thực
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Bộ xử lý Bun.serve() gốc cho checkout, portal và webhook
  </Card>
</CardGroup>

## Tính Năng Cốt Lõi

Tất cả bộ chuyển đổi framework cung cấp các khả năng tích hợp sau:

| Tính năng               | Mô tả                                                 |
| ----------------------- | ----------------------------------------------------- |
| **Bộ xử lý Checkout**   | Hỗ trợ luồng checkout tĩnh, động và dựa trên phiên    |
| **Cổng khách hàng**     | Bộ xử lý dựng sẵn cho quản lý đăng ký và thanh toán   |
| **Bộ xử lý Webhook**    | Xác minh chữ ký an toàn với các bộ xử lý sự kiện kiểu |
| **Cấu hình môi trường** | Thiết lập đơn giản qua biến môi trường                |
| **An toàn kiểu**        | Hỗ trợ đầy đủ TypeScript với payload có kiểu          |

## Bắt đầu Nhanh

Bắt đầu với bất kỳ bộ chuyển đổi framework nào trong ba bước:

<Steps>
  <Step title="Install the Adaptor">
    Sử dụng trình quản lý gói của bạn để cài đặt bộ chuyển đổi dành riêng cho framework:

    <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">
    Thêm thông tin xác thực Dodo Payments vào môi trường của bạn:

    ```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>
      Không bao giờ cam kết tệp `.env` hoặc bí mật vào hệ thống kiểm soát phiên bản.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Thiết lập các route cho checkout, cổng khách hàng và webhook của bạn:

    <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>
      Bây giờ bạn đã sẵn sàng xử lý thanh toán! Tham khảo từng trang bộ chuyển đổi riêng để biết hướng dẫn chi tiết và tất cả tùy chọn có sẵn.
    </Check>
  </Step>
</Steps>

## Các loại luồng Checkout

Tất cả bộ chuyển đổi hỗ trợ ba loại luồng checkout:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Sử dụng checkout tĩnh cho các liên kết thanh toán đơn giản, có thể chia sẻ. Truyền ID sản phẩm dưới dạng tham số truy vấn:

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

    Hỗ trợ tùy chọn điền trước và tùy chỉnh khách hàng qua tham số truy vấn.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Sử dụng checkout động để tạo thanh toán theo chương trình với các chi tiết tùy chỉnh:

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

    Hỗ trợ cả thanh toán một lần và đăng ký.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Sử dụng phiên checkout để có trải nghiệm linh hoạt nhất với hỗ trợ giỏ hàng:

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

    Tìm hiểu thêm trong [Hướng dẫn Phiên Checkout](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Xử lý Sự kiện Webhook

Tất cả bộ chuyển đổi cung cấp xử lý webhook an toàn kiểu với các callback sự kiện chi tiết:

```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>
  Tất cả bộ xử lý webhook tự động xác minh chữ ký và xác thực payload bằng các schema Zod. Các yêu cầu không hợp lệ bị từ chối với mã lỗi phù hợp.
</Info>

## Chọn Bộ chuyển đổi Phù hợp

| Framework          | Phù hợp với                               | Runtime          |
| ------------------ | ----------------------------------------- | ---------------- |
| **Next.js**        | Ứng dụng React full-stack với App Router  | Node.js, Edge    |
| **Nuxt**           | Ứng dụng Vue.js full-stack                | Node.js          |
| **Express**        | API REST và ứng dụng Node.js truyền thống | Node.js          |
| **Fastify**        | API hiệu suất cao                         | Node.js          |
| **Hono**           | Triển khai edge, Cloudflare Workers       | Edge, Node.js    |
| **Astro**          | Trang nội dung với endpoint server        | Node.js, Edge    |
| **SvelteKit**      | Ứng dụng Svelte full-stack                | Node.js          |
| **Remix**          | React full-stack với routing lồng nhau    | Node.js          |
| **TanStack Start** | React full-stack an toàn kiểu             | Node.js          |
| **Better Auth**    | Ứng dụng đã dùng Better Auth              | Nhiều môi trường |
| **Convex**         | Ứng dụng dùng Convex cho backend          | Convex Runtime   |
| **Bun**            | Ứng dụng server Bun gốc                   | Bun              |

## Nhận trợ giúp

Cần hỗ trợ với các bộ chuyển đổi framework?

* **Discord**: Tham gia [máy chủ cộng đồng](https://discord.gg/bYqAp4ayYh) của chúng tôi để được trợ giúp theo thời gian thực

* **Email**: Liên hệ với chúng tôi tại [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: Tạo issue trên kho bộ chuyển đổi tương ứng

* **Tài liệu**: Truy cập [tài liệu tham khảo API](/api-reference/introduction)

* **Discord**: Join our [community server](https://discord.gg/bYqAp4ayYh) for real-time help

* **Email**: Contact us at [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: Open an issue on the respective adaptor repository

* **Documentation**: Visit our [API reference](/api-reference/introduction)