Figmaプラグインボイラープレート - Dodo Payments Documentation

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

機能

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

始め方

Create Base Plugin

Figma のプラグインクイックスタートガイドを使用して独自の Figma プラグインプロジェクトを作成してください。これにより、manifest.json ファイルを含むスキャフォールドが生成されます。

このステップでは、プラグインに固有の名前と ID を取得するだけです。次のステップで ID と名前を git リポジトリにコミットした後に、生成されたファイルは破棄できます。

Clone the Example Implementation

dodopayments-figma リポジトリをクローンし、生成したプラグインフォルダーから得た名前と ID で manifest.json を更新してください。

git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma

この例は、統合の出発点として機能します。

バージョン管理のためにリモート origin URL を自分のリポジトリに変更する必要があります。

Install Dependencies

プロジェクトのルートで次のコマンドを実行してください：

npm install

Configure Environment

src/ui/api.ts で API_MODE を設定してください：

const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production

本番の支払いを処理しないように、開発中は常に test_mode を使用してください。

Customize Components

プラグインコンポーネントをニーズに合わせてカスタマイズしてください：

有効なライセンスキーを持つユーザー向けの機能を公開するため、Authenticated.tsx を更新
デザインの好みに合わせて LicenseKeyInput.tsx をカスタマイズ

Authenticated.tsx コンポーネントには、有効なライセンスを必要とするプラグインのプレミアム機能を追加します。

設定

Configure Network Access

プラグインは CORS プロキシと通信するためのネットワークアクセスが必要です。次の内容を manifest.json に追加してください：

{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}

これにより、プラグインはDodo Payments APIを使用してライセンスキーを検証およびアクティベートできます。

Dodo Payments API は現在、ブラウザベースのアプリケーションからの API 呼び出しを許可していないため、CORS プロキシが必要です。

Configure API Mode

src/ui/api.ts で API モードを構成します：

const API_MODE = "test_mode"; // or "live_mode"

テストモードで十分にテストした後、本番準備が整ったら live_mode に切り替えてください。

開発

Import Plugin

Figma デスクトップアプリから「Import Manifest」を使ってプラグインを Figma にインポートしてください。

ローカルでプラグインを開発およびテストするには、Figma デスクトップアプリをインストールする必要があります。

Start Development Server

npm run dev

これにより、ファイル監視を伴う開発サーバーが起動します。

ソースコードに変更を加えると、プラグインは自動的に再ビルドされます。

ビルドコマンド

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

ライセンスキー統合

例の実装には、プラグイン用にカスタマイズ可能な完全なライセンスキー検証とアクティベーションが含まれています:

ユーザー入力: ユーザーはプラグインUIにライセンスキーを入力します
検証: プラグインはDodo Payments APIに対してキーを検証します
アクティベーション: 有効なキーはユーザー識別とともにアクティベートされます
アクセス制御: 有効なライセンス保持者のためにプラグイン機能が解除されます

公開

プラグインの準備が整ったら:

本番用にビルド：npm run build
テストモードとライブモードの両方で十分にテスト
Figma のプラグイン公開ガイドラインに従う
Figma Community を通じてレビューに提出

リポジトリ

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

​機能

​始め方

​設定

​開発

​ビルドコマンド

​ライセンスキー統合

​公開

​リポジトリ

機能

始め方

設定

開発

ビルドコマンド

ライセンスキー統合

公開

リポジトリ