メインコンテンツへスキップ
これは、Dodo PaymentsのライセンスキーAPIを統合してプラグインへのアクセスを許可したいFigmaプラグイン開発者のための出発点として設計された例の実装とボイラープレートです。このテンプレートは、完全なライセンスキー検証とアクティベーション機能を示しており、組み込みライセンスを持つプレミアムFigmaプラグインを作成するために必要なすべてを提供します。

​
機能

  • ライセンスキー検証: Dodo Payments APIに対してライセンスキーを検証します
  • ライセンスキーアクティベーション: ユーザー識別を伴うライセンスキーをアクティベートします
  • 環境サポート: テスト環境と本番環境の両方に対応可能
  • CORSプロキシ: CORS制限を処理するためにCloudflare Workerプロキシを使用します
  • 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を使用してライセンスキーを検証およびアクティベートできます。
Dodo Payments API は現在、ブラウザベースのアプリケーションからの API 呼び出しを許可していないため、CORS プロキシが必要です。
2

Configure API Mode

src/ui/api.ts で API モードを構成します：
const API_MODE = "test_mode"; // or "live_mode"
テストモードで十分にテストした後、本番準備が整ったら live_mode に切り替えてください。

​
開発

1

Import Plugin

Figma デスクトップアプリから「Import Manifest」を使ってプラグインを Figma にインポートしてください。
ローカルでプラグインを開発およびテストするには、Figma デスクトップアプリをインストールする必要があります。
2

Start Development Server

npm run dev
これにより、ファイル監視を伴う開発サーバーが起動します。
ソースコードに変更を加えると、プラグインは自動的に再ビルドされます。

​
ビルドコマンド

CommandDescription
npm run build本番用にプラグインをビルド
npm run devファイルウォッチ付き開発サーバーを起動
npm run lintコードスタイルとエラーをチェック
npm run formatPrettier でコードを整形

​
ライセンスキー統合

例の実装には、プラグイン用にカスタマイズ可能な完全なライセンスキー検証とアクティベーションが含まれています:
  1. ユーザー入力: ユーザーはプラグインUIにライセンスキーを入力します
  2. 検証: プラグインはDodo Payments APIに対してキーを検証します
  3. アクティベーション: 有効なキーはユーザー識別とともにアクティベートされます
  4. アクセス制御: 有効なライセンス保持者のためにプラグイン機能が解除されます

​
公開

プラグインの準備が整ったら:
  1. 本番用にビルド：npm run build
  2. テストモードとライブモードの両方で十分にテスト
  3. Figma のプラグイン公開ガイドラインに従う
  4. Figma Community を通じてレビューに提出

​
リポジトリ

完全な例の実装は次の場所で入手できます: github.com/dodopayments/dodopayments-figma これを出発点として、Dodo Paymentsのライセンスキー統合を持つ独自のプレミアムFigmaプラグインを構築してください。