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

​
機能

  • ライセンスキー検証: Dodo Payments APIに対してライセンスキーを検証します
  • ライセンスキーアクティベーション: ユーザー識別を伴うライセンスキーをアクティベートします
  • 環境サポート: テスト環境と本番環境の両方に対応可能
  • CORSプロキシ: CORS制限を処理するためにCloudflare Workerプロキシを使用します
  • TypeScriptサポート: 適切なエラーハンドリングを伴う完全な型付けの実装

​
始め方

1

基本プラグインの作成

Figmのプラグインクイックスタートガイドを使用して、自分の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

環境の設定

API_MODEをsrc/ui/api.tsに設定します:
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プラグインを構築してください。