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

# Overlay Checkout

> Thư viện TypeScript hiện đại để nhúng thanh toán overlay Dodo và lắng nghe các sự kiện thanh toán theo thời gian thực.

## Tổng quan

SDK Thanh toán Dodo cung cấp một cách tích hợp liền mạch để đưa overlay thanh toán của chúng tôi vào ứng dụng web của bạn. Được xây dựng bằng TypeScript và các tiêu chuẩn web hiện đại, nó cung cấp một giải pháp mạnh mẽ để xử lý thanh toán với việc xử lý sự kiện theo thời gian thực và các chủ đề tùy chỉnh.

<Frame>
  <img src="https://mintcdn.com/dodopayments/mOQO5ej_lx0yH9p-/images/cover-images/overlay-checkout.png?fit=max&auto=format&n=mOQO5ej_lx0yH9p-&q=85&s=15d90c695e92914a9d54b10509d6fe47" alt="Overlay Checkout Cover Image" style={{ maxHeight: '500px', width: 'auto' }} width="3826" height="2160" data-path="images/cover-images/overlay-checkout.png" />
</Frame>

## Demo

<Card title="Interactive Demo" icon="play" href="https://atlas.dodopayments.com/pricing">
  Xem thanh toán phủ hoạt động qua bản demo trực tiếp của chúng tôi.
</Card>

## Bắt đầu nhanh

Bắt đầu với SDK Thanh toán Dodo chỉ trong vài dòng mã:

```typescript theme={null}
import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

<Tip>
  Lấy URL thanh toán từ [API tạo phiên thanh toán](/api-reference/checkout-sessions/create).
</Tip>

## Hướng dẫn tích hợp từng bước

<Steps>
  <Step title="Install the SDK">
    Cài đặt SDK Thanh toán Dodo bằng cách sử dụng trình quản lý gói ưa thích của bạn:

    <CodeGroup>
      ```bash npm theme={null}
      npm install dodopayments-checkout
      ```

      ```bash yarn theme={null}
      yarn add dodopayments-checkout
      ```

      ```bash pnpm theme={null}
      pnpm add dodopayments-checkout
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Khởi tạo SDK trong ứng dụng của bạn, thường là trong thành phần chính hoặc điểm vào ứng dụng:

    ```typescript theme={null}
    import { DodoPayments } from "dodopayments-checkout";

    DodoPayments.Initialize({
      mode: "test", // Change to 'live' for production
      displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
      onEvent: (event) => {
        console.log("Checkout event:", event);
        
        // Handle different events
        switch (event.event_type) {
          case "checkout.opened":
            // Checkout overlay has been opened
            break;
          case "checkout.closed":
            // Checkout has been closed
            break;
          case "checkout.error":
            // Handle errors
            console.error("Checkout error:", event.data?.message);
            break;
        }
      },
    });
    ```

    <Warning>
      Luôn khởi tạo SDK trước khi cố mở thanh toán. Việc khởi tạo chỉ nên diễn ra một lần khi ứng dụng của bạn tải lên.
    </Warning>
  </Step>

  <Step title="Create a Checkout Button Component">
    Tạo một thành phần mở overlay thanh toán:

    ```typescript theme={null}
    // components/CheckoutButton.tsx
    "use client";

    import { Button } from "@/components/ui/button";
    import { DodoPayments } from "dodopayments-checkout";
    import { useEffect, useState } from "react";

    export function CheckoutButton() {
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        // Initialize the SDK
        DodoPayments.Initialize({
          mode: "test",
          displayType: "overlay",
          onEvent: (event) => {
            switch (event.event_type) {
              case "checkout.opened":
                setIsLoading(false);
                break;
              case "checkout.error":
                setIsLoading(false);
                console.error("Checkout error:", event.data?.message);
                break;
            }
          },
        });
      }, []);

      const handleCheckout = async () => {
        try {
          setIsLoading(true);
          await DodoPayments.Checkout.open({
            checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
          });
        } catch (error) {
          console.error("Failed to open checkout:", error);
          setIsLoading(false);
        }
      };

      return (
        <Button 
          onClick={handleCheckout}
          disabled={isLoading}
        >
          {isLoading ? "Loading..." : "Checkout Now"}
        </Button>
      );
    }
    ```
  </Step>

  <Step title="Add Checkout to Your Page">
    Sử dụng thành phần nút thanh toán trong ứng dụng của bạn:

    ```typescript theme={null}
    // app/page.tsx
    import { CheckoutButton } from "@/components/CheckoutButton";

    export default function Home() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
          <h1>Welcome to Our Store</h1>
          <CheckoutButton />
        </main>
      );
    }
    ```
  </Step>

  <Step title="Handle Success and Failure Pages">
    Tạo các trang để xử lý chuyển hướng thanh toán:

    ```typescript theme={null}
    // app/success/page.tsx
    export default function SuccessPage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Successful!</h1>
          <p>Thank you for your purchase.</p>
        </div>
      );
    }

    // app/failure/page.tsx
    export default function FailurePage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Failed</h1>
          <p>Please try again or contact support.</p>
        </div>
      );
    }
    ```
  </Step>

  <Step title="Test Your Integration">
    1. Bắt đầu máy chủ phát triển của bạn:

    ```bash theme={null}
    npm run dev
    ```

    2. Kiểm tra quy trình thanh toán:
       * Nhấp vào nút thanh toán
       * Xác minh overlay xuất hiện
       * Kiểm tra quy trình thanh toán bằng cách sử dụng thông tin xác thực thử nghiệm
       * Xác nhận các chuyển hướng hoạt động chính xác

    <Check>
      Bạn sẽ thấy các sự kiện thanh toán được ghi lại trong bảng điều khiển trình duyệt.
    </Check>
  </Step>

  <Step title="Go Live">
    Khi bạn đã sẵn sàng cho sản xuất:

    1. Thay đổi chế độ thành `'live'`:

    ```typescript theme={null}
    DodoPayments.Initialize({
      mode: "live",
      displayType: "overlay",
      onEvent: (event) => {
        console.log("Checkout event:", event);
      }
    });
    ```

    2. Cập nhật các URL thanh toán của bạn để sử dụng các phiên thanh toán trực tiếp từ backend của bạn
    3. Kiểm tra quy trình hoàn chỉnh trong sản xuất
    4. Giám sát các sự kiện và lỗi
  </Step>
</Steps>

## Tài liệu API

### Cấu hình

#### Tùy chọn khởi tạo

```typescript theme={null}
interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}
```

| Tùy chọn      | Loại                    | Bắt buộc | Mô tả                                                                                       |
| ------------- | ----------------------- | -------- | ------------------------------------------------------------------------------------------- |
| `mode`        | `"test" \| "live"`      | Có       | Chế độ môi trường: `'test'` cho phát triển, `'live'` cho sản xuất                           |
| `displayType` | `"overlay" \| "inline"` | Không    | Loại hiển thị: `'overlay'` cho thanh toán modal (mặc định), `'inline'` cho thanh toán nhúng |
| `onEvent`     | `function`              | Có       | Hàm gọi lại để xử lý các sự kiện thanh toán                                                 |

#### Tùy chọn thanh toán

```typescript theme={null}
interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
  };
}
```

| Lựa chọn                    | Loại      | Bắt buộc | Mô tả                                                                                                                                   |
| --------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `checkoutUrl`               | `string`  | Có       | URL phiên thanh toán từ [API tạo phiên thanh toán](/api-reference/checkout-sessions/create)                                             |
| `options.showTimer`         | `boolean` | Không    | Hiện hoặc ẩn đồng hồ đếm ngược. Mặc định là `true`. Khi bị vô hiệu, bạn sẽ nhận được sự kiện `checkout.link_expired` khi phiên hết hạn. |
| `options.showSecurityBadge` | `boolean` | Không    | Hiện hoặc ẩn huy hiệu bảo mật. Mặc định là `true`.                                                                                      |

### Phương thức

#### Mở thanh toán

Mở overlay thanh toán với URL phiên thanh toán đã chỉ định.

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

Bạn cũng có thể truyền thêm tùy chọn để tùy chỉnh hành vi thanh toán:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: false,
    showSecurityBadge: false,
  },
});
```

#### Đóng Checkout

Đóng giao diện thanh toán bằng lập trình.

```typescript theme={null}
DodoPayments.Checkout.close();
```

#### Kiểm tra Trạng thái

Trả về trạng thái giao diện thanh toán hiện đang mở hay không.

```typescript theme={null}
const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean
```

### Sự kiện

SDK cung cấp sự kiện theo thời gian thực mà bạn có thể nghe qua callback `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.form_ready":
        // Checkout form is ready for user input
        break;
      case "checkout.payment_page_opened":
        // Payment page has been displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer and billing details submitted
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.redirect":
        // Checkout will perform a redirect
        break;
      case "checkout.error":
        // An error occurred
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Checkout session has expired (only when showTimer is false)
        break;
    }
  }
});
```

| Loại Sự kiện                          | Mô tả                                                                                         |
| ------------------------------------- | --------------------------------------------------------------------------------------------- |
| `checkout.opened`                     | Giao diện thanh toán đã được mở                                                               |
| `checkout.form_ready`                 | Biểu mẫu thanh toán đã sẵn sàng nhận thông tin từ người dùng. Hữu ích để ẩn trạng thái tải.   |
| `checkout.payment_page_opened`        | Trang thanh toán đã được hiển thị                                                             |
| `checkout.customer_details_submitted` | Thông tin khách hàng và hóa đơn đã được gửi                                                   |
| `checkout.closed`                     | Giao diện thanh toán đã được đóng                                                             |
| `checkout.redirect`                   | Thanh toán sẽ thực hiện chuyển hướng                                                          |
| `checkout.error`                      | Xảy ra lỗi trong quá trình thanh toán                                                         |
| `checkout.link_expired`               | Kích hoạt khi phiên thanh toán hết hạn. Chỉ nhận được khi `showTimer` được đặt thành `false`. |

## Tùy chọn Triển khai

### Cài đặt Trình quản lý Gói

Cài đặt qua npm, yarn, hoặc pnpm như được trình bày trong [Hướng dẫn Tích hợp Từng Bước](#step-by-step-integration-guide).

### Triển khai CDN

Để tích hợp nhanh mà không cần bước xây dựng, bạn có thể sử dụng CDN của chúng tôi:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test", // Change to 'live' for production
            displayType: "overlay",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <button onclick="openCheckout()">Checkout Now</button>

    <script>
        function openCheckout() {
            DodoPaymentsCheckout.DodoPayments.Checkout.open({
                checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
            });
        }
    </script>
</body>
</html>
```

### Tùy chỉnh Giao diện

Bạn có thể tùy chỉnh giao diện thanh toán bằng cách truyền đối tượng `themeConfig` vào tham số `options` khi mở thanh toán. Cấu hình giao diện hỗ trợ cả chế độ sáng và tối, cho phép bạn tùy chỉnh màu sắc, viền, văn bản, nút, và bán kính viền.

<Info>
  Phần này đề cập đến cấu hình giao diện **client-side** bằng cách sử dụng SDK Checkout. Bạn cũng có thể cấu hình giao diện **server-side** khi tạo phiên thanh toán qua API bằng tham số `theme_config`. Xem [Tùy chỉnh Giao diện Thanh toán](/features/checkout#checkout-theme-customization) cho cấu hình mức API, hoặc sử dụng [trang Thiết kế](/features/design) trên bảng điều khiển để cấu hình giao diện một cách trực quan với xem trước trực tiếp.
</Info>

#### Cấu hình giao diện cơ bản

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### Cấu hình giao diện hoàn chỉnh

Tất cả các thuộc tính giao diện khả dụng:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});
```

#### Chỉ chế độ Sáng

Nếu bạn chỉ muốn tùy chỉnh giao diện sáng:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Chỉ chế độ Tối

Nếu bạn chỉ muốn tùy chỉnh giao diện tối:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Ghi đè Một phần giao diện

Bạn có thể ghi đè chỉ các thuộc tính nhất định. Thanh toán sẽ sử dụng các giá trị mặc định cho các thuộc tính bạn không chỉ định:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});
```

#### Cấu hình giao diện với các tùy chọn khác

Bạn có thể kết hợp cấu hình giao diện với các tùy chọn thanh toán khác:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### Loại TypeScript

Đối với người dùng TypeScript, tất cả các loại cấu hình giao diện đều được xuất khẩu:

```typescript theme={null}
import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};
```

## Xử lý Lỗi

SDK cung cấp thông tin lỗi chi tiết qua hệ thống sự kiện. Luôn triển khai xử lý lỗi đúng cách trong callback `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
      // You may want to show a user-friendly error message
      // or retry the checkout process
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
      console.warn("Checkout session has expired");
    }
  }
});
```

<Warning>
  Luôn xử lý sự kiện `checkout.error` để cung cấp trải nghiệm người dùng tốt khi xảy ra lỗi.
</Warning>

## Thực hành Tốt nhất

1. **Khởi tạo một lần**: Khởi tạo SDK một lần khi ứng dụng của bạn tải, không phải vào mỗi lần thử thanh toán
2. **Xử lý lỗi**: Luôn triển khai xử lý lỗi đúng cách trong callback sự kiện của bạn
3. **Chế độ kiểm tra**: Sử dụng chế độ `test` trong quá trình phát triển và chỉ chuyển sang `live` khi sẵn sàng sản xuất
4. **Xử lý sự kiện**: Xử lý tất cả các sự kiện liên quan để có trải nghiệm người dùng hoàn chỉnh
5. **URL hợp lệ**: Luôn sử dụng URL thanh toán hợp lệ từ API tạo phiên thanh toán
6. **TypeScript**: Sử dụng TypeScript để có an toàn loại tốt hơn và trải nghiệm nhà phát triển tốt hơn
7. **Trạng thái tải**: Hiển thị trạng thái tải trong khi thanh toán đang mở để cải thiện UX
8. **Quản lý đồng hồ đếm ngược**: Vô hiệu hóa đồng hồ (`showTimer: false`) nếu bạn muốn xử lý hết hạn phiên thủ công

## Khắc phục sự cố

<AccordionGroup>
  <Accordion title="Checkout not opening">
    **Nguyên nhân có thể:**

    * SDK chưa được khởi tạo trước khi gọi `open()`
    * URL thanh toán không hợp lệ
    * Lỗi JavaScript trong bảng điều khiển
    * Sự cố kết nối mạng

    **Giải pháp:**

    * Xác minh khởi tạo SDK diễn ra trước khi mở thanh toán
    * Kiểm tra lỗi trong bảng điều khiển
    * Đảm bảo URL thanh toán hợp lệ và từ API tạo phiên thanh toán
    * Xác minh kết nối mạng
  </Accordion>

  <Accordion title="Events not firing">
    **Nguyên nhân có thể:**

    * Trình xử lý sự kiện không được thiết lập đúng
    * Lỗi JavaScript ngăn cản sự kiện lan truyền
    * SDK chưa được khởi tạo đúng cách

    **Giải pháp:**

    * Xác nhận trình xử lý sự kiện được cấu hình đúng trong `Initialize()`
    * Kiểm tra lỗi JavaScript trong bảng điều khiển trình duyệt
    * Xác minh khởi tạo SDK hoàn tất một cách thành công
    * Thử nghiệm với một trình xử lý sự kiện đơn giản trước
  </Accordion>

  <Accordion title="Styling issues">
    **Nguyên nhân có thể:**

    * Xung đột CSS với kiểu ứng dụng của bạn
    * Cài đặt giao diện không được áp dụng đúng
    * Vấn đề thiết kế đáp ứng

    **Giải pháp:**

    * Kiểm tra xung đột CSS trong DevTools trình duyệt
    * Xác minh cấu hình giao diện đúng
    * Kiểm tra trên các kích thước màn hình khác nhau
    * Đảm bảo không có xung đột z-index với giao diện
  </Accordion>
</AccordionGroup>

## Kích hoạt Ví Điện Tử

Để biết thông tin chi tiết về thiết lập Google Pay và các ví điện tử khác, xem trang <a href="/features/payment-methods/digital-wallets">Ví Điện Tử</a>.

<Note>
  Apple Pay hiện chưa được hỗ trợ trong giao diện thanh toán lớp phủ. Hỗ trợ cho Apple Pay sẽ sớm có.
</Note>

## Hỗ trợ Trình duyệt

SDK Dodo Payments Checkout hỗ trợ các trình duyệt sau:

* Chrome (mới nhất)
* Firefox (mới nhất)
* Safari (mới nhất)
* Edge (mới nhất)
* IE11+

## Lớp phủ so với Thanh toán Trực tiếp

Chọn loại giao diện thanh toán phù hợp với trường hợp sử dụng của bạn:

| Tính năng         | Thanh toán Lớp phủ                   | Thanh toán Trực tiếp                             |
| ----------------- | ------------------------------------ | ------------------------------------------------ |
| Độ sâu tích hợp   | Modal trên trang                     | Nhúng hoàn toàn trong trang                      |
| Kiểm soát bố cục  | Hạn chế                              | Kiểm soát hoàn toàn                              |
| Thương hiệu       | Tách biệt với trang                  | Liền mạch                                        |
| Nỗ lực triển khai | Thấp hơn                             | Cao hơn                                          |
| Tốt nhất cho      | Tích hợp nhanh chóng, trang hiện tại | Trang thanh toán tùy chỉnh, luồng chuyển đổi cao |

<Tip>
  Sử dụng **thanh toán lớp phủ** để tích hợp nhanh hơn với sự thay đổi tối thiểu đối với các trang hiện tại của bạn. Sử dụng **thanh toán trực tiếp** khi bạn muốn kiểm soát tối đa trải nghiệm thanh toán và thương hiệu liền mạch.
</Tip>

## Tài nguyên liên quan

<CardGroup cols={2}>
  <Card title="Inline Checkout" icon="credit-card" href="/developer-resources/inline-checkout">
    Nhúng thanh toán trực tiếp vào trang của bạn để có trải nghiệm tích hợp đầy đủ.
  </Card>

  <Card title="Checkout Sessions API" icon="code" href="/api-reference/checkout-sessions/create">
    Tạo phiên thanh toán để hỗ trợ trải nghiệm thanh toán của bạn.
  </Card>

  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Xử lý sự kiện thanh toán phía máy chủ với webhooks.
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Hướng dẫn đầy đủ tích hợp Dodo Payments.
  </Card>
</CardGroup>

Để được trợ giúp thêm, hãy truy cập [cộng đồng Discord của chúng tôi](https://discord.gg/bYqAp4ayYh) hoặc liên hệ với đội ngũ hỗ trợ nhà phát triển của chúng tôi.