跳转到主要内容
这是一个示例实现和模板，旨在为希望集成 Dodo Payments 许可证密钥 API 以授予对其插件访问权限的 Figma 插件开发者提供一个起点。该模板演示了完整的许可证密钥验证和激活功能，提供了创建具有内置许可的高级 Figma 插件所需的一切。

​
特性

  • 许可证密钥验证：通过 Dodo Payments API 验证许可证密钥
  • 许可证密钥激活：通过用户身份验证激活许可证密钥
  • 环境支持：可配置为测试和生产环境
  • CORS 代理：使用 Cloudflare Worker 代理处理 CORS 限制
  • TypeScript 支持：完全类型化的实现，具有适当的错误处理

​
开始使用

1

Create Base Plugin

使用 Figma 的插件快速入门指南 创建您自己的 Figma 插件项目。 这将生成一个带有 manifest.json 文件的脚手架。
此步骤仅用于获取插件的唯一名称和 ID。 在下一步将 ID 与名称提交到您的 git 仓库后，即可丢弃生成的文件。
2

Clone the Example Implementation

克隆 dodopayments-figma 仓库，并使用您生成的插件文件夹中的名称与 ID 更新其 manifest.json。
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
此示例作为您集成的起点。
您需要将远程 origin URL 更改为您自己的仓库以便进行版本控制。
3

Install Dependencies

在项目根目录运行以下命令：
npm install
4

Configure Environment

在 src/ui/api.ts 中设置 API_MODE：
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
开发过程中始终使用 test_mode，以避免处理真实支付。
5

Customize Components

根据需求自定义插件组件：
  • 更新 Authenticated.tsx，使其向拥有有效许可证密钥的用户开放功能
  • 自定义 LicenseKeyInput.tsx 以符合您的设计偏好
Authenticated.tsx 组件是您将添加需要有效许可证才能使用的插件高级功能的地方。

​
配置

1

Configure Network Access

插件需要网络访问以与 CORS 代理通信。 在 manifest.json 中添加以下内容：
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
这允许插件使用 Dodo Payments API 验证和激活许可证密钥。
需要 CORS 代理，因为 Dodo Payments API 目前不允许来自浏览器应用的 API 调用。
2

Configure API Mode

在 src/ui/api.ts 中配置 API 模式：
const API_MODE = "test_mode"; // or "live_mode"
仅当您准备好上线并在测试模式下彻底测试后，才切换至 live_mode。

​
开发

1

Import Plugin

使用 Figma 桌面应用中的“导入清单”将插件导入 Figma。
在本地开发和测试插件时，您需要安装 Figma 桌面应用。
2

Start Development Server

npm run dev
这将启动开发服务器，并监视文件以进行自动重建。
每当您更改源代码时，插件会自动重新构建。

​
构建命令

命令描述
npm run build为生产环境构建插件
npm run dev启动带文件监听的开发服务器
npm run lint检查代码风格与错误
npm run format使用 Prettier 格式化代码

​
许可证密钥集成

示例实现包括完整的许可证密钥验证和激活，您可以为您的插件自定义：
  1. 用户输入：用户在插件 UI 中输入他们的许可证密钥
  2. 验证：插件通过 Dodo Payments API 验证密钥
  3. 激活：有效的密钥通过用户身份验证激活
  4. 访问控制：对有效许可证持有者解锁插件功能

​
发布

一旦您的插件准备就绪：
  1. 为生产构建：npm run build
  2. 在测试模式和实况模式下彻底测试
  3. 遵循 Figma 的插件发布指南
  4. 通过 Figma 社区提交审核

​
仓库

完整的示例实现可在以下位置找到： github.com/dodopayments/dodopayments-figma 将此作为您构建自己的高级 Figma 插件与 Dodo Payments 许可证密钥集成的起点。