Chuyển đến nội dung chính
Đâ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

1

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. Điều này sẽ tạo ra một bộ khung với một tệp manifest.json.
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.
2

Clone the Example Implementation

Sao chép kho mở 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.
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.
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.
3

Install Dependencies

Chạy lệnh sau trong thư mục gốc dự án của bạn:
npm install
4

Configure Environment

Đặt API_MODE trong src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
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.
5

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

​
Cấu Hình

1

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:
{
  "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.
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.
2

Configure API Mode

Trong src/ui/api.ts, cấu hình chế độ API:
const API_MODE = "test_mode"; // or "live_mode"
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.

​
Phát Triển

1

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.
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ộ.
2

Start Development Server

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

​
Lệnh Xây Dựng

CommandDescription
npm run buildXây dựng plugin cho môi trường sản xuất
npm run devKhởi chạy máy chủ phát triển với theo dõi tệp
npm run lintKiể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
  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 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.