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

# Figma Plugin Boilerplate

> Xây dựng các plugin Figma với xác thực và kích hoạt khóa bản quyền Dodo Payments

Đây là một ví dụ về cách triển khai và mẫu thiết kế như một điểm khởi đầu cho các nhà phát triển plugin Figma muốn tích hợp API khóa bản quyền Dodo Payments để cấp quyền truy cập cho các plugin của họ. Mẫu này thể hiện đầy đủ chức năng xác thực và kích hoạt khóa bản quyền, cung cấp mọi thứ bạn cần để tạo ra các plugin Figma cao cấp với tính năng cấp phép tích hợp sẵn.

## Tính năng

* **Xác thực khóa bản quyền**: Xác thực khóa bản quyền với API Dodo Payments
* **Kích hoạt khóa bản quyền**: Kích hoạt khóa bản quyền với xác định người dùng
* **Hỗ trợ môi trường**: Có thể cấu hình cho cả môi trường thử nghiệm và môi trường thực
* **Proxy CORS**: Sử dụng proxy Cloudflare Worker để xử lý các hạn chế CORS
* **Hỗ trợ TypeScript**: Triển khai hoàn toàn có kiểu với xử lý lỗi đúng cách

## Bắt đầu

<Steps>
  <Step title="Create Base Plugin">
    Tạo dự án plugin Figma của riêng bạn bằng [Hướng dẫn khởi động nhanh plugin của Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Điều này sẽ tạo ra một bộ khung với một tệp `manifest.json`.

    <Tip>
      Bước này chỉ nhằm lấy tên và ID duy nhất cho plugin của bạn. Bạn có thể bỏ những tệp đã tạo sau khi đã cam kết ID và tên đó vào kho git ở bước tiếp theo.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Sao chép [kho mở dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) và cập nhật `manifest.json` của nó bằng tên và ID từ thư mục plugin bạn đã tạo.

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    Ví dụ này phục vụ như điểm khởi đầu của bạn cho việc tích hợp.

    <Tip>
      Bạn cần thay đổi URL remote origin thành kho của riêng bạn để quản lý phiên bản.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Chạy lệnh sau trong thư mục gốc dự án của bạn:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    Đặt `API_MODE` trong `src/ui/api.ts`:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      Luôn sử dụng `test_mode` trong quá trình phát triển để tránh xử lý các giao dịch thanh toán thật.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Tùy chỉnh các thành phần plugin để phù hợp với nhu cầu của bạn:

    * Cập nhật `Authenticated.tsx` để cung cấp chức năng cho người dùng có khóa bản quyền hợp lệ
    * Tùy chỉnh `LicenseKeyInput.tsx` sao cho phù hợp với sở thích thiết kế của bạn

    <Note>
      Thành phần `Authenticated.tsx` là nơi bạn sẽ thêm các tính năng cao cấp của plugin yêu cầu giấy phép hợp lệ.
    </Note>
  </Step>
</Steps>

## Cấu Hình

<Steps>
  <Step title="Configure Network Access">
    Plugin cần quyền truy cập mạng để giao tiếp với proxy CORS. Thêm nội dung sau vào `manifest.json` của bạn:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    Điều này cho phép plugin xác thực và kích hoạt các khóa bản quyền bằng cách sử dụng API Dodo Payments.

    <Info>
      Proxy CORS là cần thiết vì hiện tại API của Dodo Payments không cho phép gọi API từ các ứng dụng chạy trên trình duyệt.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    Trong `src/ui/api.ts`, cấu hình chế độ API:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      Chuyển sang `live_mode` chỉ khi bạn đã sẵn sàng cho môi trường sản xuất và đã kiểm tra kỹ trong chế độ thử nghiệm.
    </Tip>
  </Step>
</Steps>

## Phát Triển

<Steps>
  <Step title="Import Plugin">
    Nhập plugin vào Figma bằng cách sử dụng “Import Manifest” từ ứng dụng Figma trên máy tính.

    <Note>
      Bạn sẽ cần cài đặt ứng dụng Figma trên máy tính để phát triển và kiểm thử plugin cục bộ.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Điều này khởi động máy chủ phát triển với việc theo dõi tệp để tự động tái xây dựng.

    <Check>
      Plugin của bạn sẽ tự động xây dựng lại khi bạn thực hiện thay đổi trong mã nguồn.
    </Check>
  </Step>
</Steps>

## Lệnh Xây Dựng

| Command          | Description                                   |
| ---------------- | --------------------------------------------- |
| `npm run build`  | Xây dựng plugin cho môi trường sản xuất       |
| `npm run dev`    | Khởi chạy máy chủ phát triển với theo dõi tệp |
| `npm run lint`   | Kiểm tra kiểu mã và lỗi                       |
| `npm run format` | Định dạng mã bằng Prettier                    |

## Tích Hợp Khóa Bản Quyền

Triển khai ví dụ bao gồm xác thực và kích hoạt khóa bản quyền hoàn chỉnh mà bạn có thể tùy chỉnh cho plugin của mình:

1. **Nhập liệu của người dùng**: Người dùng nhập khóa bản quyền của họ trong giao diện plugin
2. **Xác thực**: Plugin xác thực khóa với API Dodo Payments
3. **Kích hoạt**: Các khóa hợp lệ được kích hoạt với xác định người dùng
4. **Kiểm soát truy cập**: Chức năng của plugin được mở khóa cho những người sở hữu khóa bản quyền hợp lệ

## Xuất Bản

Khi plugin của bạn đã sẵn sàng:

1. Xây dựng cho môi trường sản xuất: `npm run build`
2. Kiểm thử kỹ lưỡng cả ở chế độ thử nghiệm và trực tiếp
3. Tuân theo [Hướng dẫn xuất bản plugin của Figma](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Gửi để xem xét thông qua Cộng đồng Figma

## Kho Lưu Trữ

Triển khai ví dụ hoàn chỉnh có sẵn tại: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

Sử dụng điều này như điểm khởi đầu của bạn để xây dựng plugin Figma cao cấp của riêng bạn với tích hợp khóa bản quyền Dodo Payments.