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

​
機能

  • ライセンスキー検証: Dodo Payments APIに対してライセンスキーを検証します
  • ライセンスキーアクティベーション: ユーザー識別を伴うライセンスキーをアクティベートします
  • 環境サポート: テスト環境と本番環境の両方に対応可能
  • CORSプロキシ: CORS制限を処理するためにCloudflare Workerプロキシを使用します
  • 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 formatPrettierでコードをフォーマット

​
ライセンスキー統合

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

​
公開

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

​
リポジトリ

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