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

​
特性

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

​
开始使用

1

创建基础插件

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

克隆示例实现

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

安装依赖

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

配置环境

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

自定义组件

自定义插件组件以满足您的需求：
  • 更新 Authenticated.tsx 以向具有有效许可证密钥的用户公开功能
  • 自定义 LicenseKeyInput.tsx 以匹配您的设计偏好
Authenticated.tsx 组件是您将添加插件的高级功能的地方，这些功能需要有效的许可证。

​
配置

1

配置网络访问

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

配置 API 模式

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

​
开发

1

导入插件

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

启动开发服务器

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 许可证密钥集成的起点。