Skip to main content
Ví dụ Figma của Dodo Payments là một plugin mẫu chỉ mở khóa các tính năng cho người dùng có license key hợp lệ của Dodo Payments. Sử dụng ví dụ này làm nền tảng để xây dựng plugin Figma cao cấp: ví dụ bao gồm trường nhập license key, chức năng xác thực và kích hoạt với Dodo Payments API, cùng một component dành cho các tính năng cao cấp của bạn.

​
Tính năng

  • Xác thực License Key: Xác thực license key với Dodo Payments API.
  • Kích hoạt License Key: Kích hoạt license key với tên instance dành cho các key có giới hạn kích hoạt.
  • Hỗ trợ môi trường: Có thể cấu hình cho cả test mode và live mode.
  • Hỗ trợ TypeScript: Triển khai đầy đủ kiểu dữ liệu kèm xử lý lỗi.

​
Bắt đầu

Trước khi bắt đầu, bạn cần ứng dụng Figma trên máy tính và một sản phẩm Dodo Payments có cấp license key.
1

Create Base Plugin

Tạo project plugin Figma riêng bằng hướng dẫn bắt đầu nhanh về plugin của Figma. Figma sẽ tạo một bộ khung có file manifest.json.
Bạn chỉ cần thực hiện bước này để lấy tên và ID duy nhất cho plugin. Sau khi sao chép tên và ID vào manifest.json của ví dụ ở bước tiếp theo và commit chúng vào Git repository, bạn có thể xóa các file đã tạo.
2

Clone the Example Implementation

Clone repository dodopayments-figma:
Trong manifest.json đã clone, thay name và id bằng các giá trị từ manifest.json của plugin đã tạo. Ví dụ này là điểm bắt đầu để bạn tích hợp.
Thay đổi URL remote origin thành repository riêng của bạn để quản lý phiên bản, chẳng hạn bằng git remote set-url origin <your-repository-url>.
3

Install Dependencies

Trong thư mục gốc của project, chạy:
4

Configure Environment

Đặt API_MODE trong src/ui/api.ts:
API_MODE chọn API host: https://test.dodopayments.com cho test_mode hoặc https://live.dodopayments.com cho live_mode.
Sử dụng test_mode trong quá trình phát triển để tránh xử lý các khoản thanh toán thực.
5

Customize Components

Tùy chỉnh các component của plugin trong src/ui/components/ để 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ó license key hợp lệ.
  • Tùy chỉnh LicenseKeyInput.tsx để phù hợp với thiết kế của bạn.
Authenticated.tsx là nơi bạn thêm các tính năng cao cấp của plugin. Plugin chỉ hiển thị phần này sau khi license key được xác thực hoặc kích hoạt.

​
Cấu hình

1

Configure Network Access

Ví dụ gửi mọi yêu cầu license key qua CORS proxy tại https://dodo-payments-proxy.aagarwal9782.workers.dev và manifest.json chỉ cho phép truy cập mạng đến proxy đó. Proxy không khả dụng, vì vậy hãy gọi trực tiếp Dodo Payments API. API chấp nhận các yêu cầu cross-origin từ mọi origin, bao gồm origin null của plugin UI.Trong manifest.json, hãy thay domain của proxy bằng các host của Dodo Payments API:
Trong src/ui/api.ts, hãy thay fetch(proxyReq) bằng fetch(req) trong validateLicenseKey và activateLicenseKey để mỗi yêu cầu được gửi trực tiếp đến API.Điều này cho phép plugin xác thực và kích hoạt license key với Dodo Payments API.
2

Configure API Mode

Trong src/ui/api.ts, hãy cấu hình API mode:
Chỉ chuyển sang live_mode khi bạn đã sẵn sàng cho production và đã kiểm thử kỹ lưỡng trong test mode.

​
Development

1

Import Plugin

Import plugin vào Figma desktop app:
  1. Mở một design file.
  2. Mở menu Figma và chọn Plugins.
  3. Trong Development, chọn Import new plugin from manifest…, sau đó chọn file manifest.json trong project root.
Manifest tải plugin từ các file đã build trong dist/, vì vậy hãy khởi động development server hoặc chạy npm run build trước khi chạy plugin.
Bạn cần Figma desktop app để phát triển và kiểm thử plugin local, vì Figma đọc code của plugin từ các file local.
2

Start Development Server

Lệnh này khởi động development server với tính năng theo dõi file để tự động build lại. Lệnh cũng kiểm tra kiểu dữ liệu khi bạn thay đổi code.
Plugin của bạn sẽ tự động build lại khi bạn thay đổi source code.

​
Build Commands

Project bao gồm các npm script sau:

​
Tích hợp License Key

Implementation mẫu kiểm tra license key trước khi mở khóa plugin. Bạn có thể tùy chỉnh từng bước:
  1. User Input: Người dùng nhập license key trong plugin UI.
  2. Validation: Theo mặc định, plugin xác thực key bằng Validate License (POST /licenses/validate).
  3. Activation: Nếu license key của bạn có giới hạn kích hoạt, hãy đặt needsActivation thành true trong src/ui/components/Unauthenticated.tsx. Sau đó, plugin sẽ kích hoạt key bằng Activate License (POST /licenses/activate) thay vì xác thực key, đồng thời đặt tên instance là Figma Plugin.
  4. Access Control: Với key hợp lệ, plugin lưu key bằng figma.clientStorage và hiển thị Authenticated.tsx. Khi plugin được mở lần tiếp theo, plugin sẽ xác thực lại key đã lưu.

​
Publishing

Khi plugin của bạn đã sẵn sàng:
  1. Build cho production: npm run build
  2. Kiểm thử kỹ lưỡng trong cả test mode và live mode.
  3. Làm theo hướng dẫn publishing plugin của Figma.
  4. Gửi plugin để review thông qua Figma Community.

​
Repository

Bạn có thể xem bản triển khai ví dụ hoàn chỉnh tại github.com/dodopayments/dodopayments-figma. Sử dụng ví dụ này làm điểm bắt đầu để xây dựng plugin Figma cao cấp với license key của Dodo Payments.
Lần sửa đổi cuối 26 tháng 9, 2026