> ## 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 插件模板

> 构建带有 Dodo Payments 许可证密钥验证和激活的 Figma 插件

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

## 特性

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

## 开始使用

<Steps>
  <Step title="Create Base Plugin">
    使用 [Figma 的插件快速入门指南](https://www.figma.com/plugin-docs/plugin-quickstart-guide/) 创建您自己的 Figma 插件项目。 这将生成一个带有 `manifest.json` 文件的脚手架。

    <Tip>
      此步骤仅用于获取插件的唯一名称和 ID。 在下一步将 ID 与名称提交到您的 git 仓库后，即可丢弃生成的文件。
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    克隆 [dodopayments-figma 仓库](https://github.com/dodopayments/dodopayments-figma)，并使用您生成的插件文件夹中的名称与 ID 更新其 `manifest.json`。

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

    此示例作为您集成的起点。

    <Tip>
      您需要将远程 origin URL 更改为您自己的仓库以便进行版本控制。
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    在项目根目录运行以下命令：

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

  <Step title="Configure Environment">
    在 `src/ui/api.ts` 中设置 `API_MODE`：

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

    <Warning>
      开发过程中始终使用 `test_mode`，以避免处理真实支付。
    </Warning>
  </Step>

  <Step title="Customize Components">
    根据需求自定义插件组件：

    * 更新 `Authenticated.tsx`，使其向拥有有效许可证密钥的用户开放功能
    * 自定义 `LicenseKeyInput.tsx` 以符合您的设计偏好

    <Note>
      `Authenticated.tsx` 组件是您将添加需要有效许可证才能使用的插件高级功能的地方。
    </Note>
  </Step>
</Steps>

## 配置

<Steps>
  <Step title="Configure Network Access">
    插件需要网络访问以与 CORS 代理通信。 在 `manifest.json` 中添加以下内容：

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

    这允许插件使用 Dodo Payments API 验证和激活许可证密钥。

    <Info>
      需要 CORS 代理，因为 Dodo Payments API 目前不允许来自浏览器应用的 API 调用。
    </Info>
  </Step>

  <Step title="Configure API Mode">
    在 `src/ui/api.ts` 中配置 API 模式：

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

    <Tip>
      仅当您准备好上线并在测试模式下彻底测试后，才切换至 `live_mode`。
    </Tip>
  </Step>
</Steps>

## 开发

<Steps>
  <Step title="Import Plugin">
    使用 Figma 桌面应用中的“导入清单”将插件导入 Figma。

    <Note>
      在本地开发和测试插件时，您需要安装 Figma 桌面应用。
    </Note>
  </Step>

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

    这将启动开发服务器，并监视文件以进行自动重建。

    <Check>
      每当您更改源代码时，插件会自动重新构建。
    </Check>
  </Step>
</Steps>

## 构建命令

| 命令               | 描述                |
| ---------------- | ----------------- |
| `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 的插件发布指南](https://www.figma.com/plugin-docs/publishing-plugins/)
4. 通过 Figma 社区提交审核

## 仓库

完整的示例实现可在以下位置找到： [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

将此作为您构建自己的高级 Figma 插件与 Dodo Payments 许可证密钥集成的起点。