Skip to main content
Das Dodo Payments-Figma-Beispiel ist ein Boilerplate-Plugin, das seine Funktionen nur für Benutzer mit einem gültigen Dodo Payments-Lizenzschlüssel freischaltet. Verwenden Sie es als Ausgangspunkt für ein Premium-Figma-Plugin: Es enthält ein Eingabefeld für Lizenzschlüssel, die Validierung und Aktivierung über die Dodo Payments API sowie eine Komponente für Ihre Premium-Funktionen.

​
Funktionen

  • Lizenzschlüssel-Validierung: Validiert Lizenzschlüssel gegen die Dodo Payments API.
  • Lizenzschlüssel-Aktivierung: Aktiviert Lizenzschlüssel mit einem Instanznamen für Schlüssel mit einem Aktivierungslimit.
  • Umgebungsunterstützung: Konfigurierbar für den Testmodus und den Live-Modus.
  • TypeScript-Unterstützung: Vollständig typisierte Implementierung mit Fehlerbehandlung.

​
Erste Schritte

Bevor Sie beginnen, benötigen Sie die Figma-Desktop-App und ein Dodo Payments-Produkt, das Lizenzschlüssel ausstellt.
1

Create Base Plugin

Erstellen Sie Ihr eigenes Figma-Plugin-Projekt mit Figma’s plugin quickstart guide. Figma generiert ein Gerüst mit einer manifest.json-Datei.
Sie benötigen diesen Schritt nur, um einen eindeutigen Namen und eine eindeutige ID für Ihr Plugin zu erhalten. Nachdem Sie den Namen und die ID im nächsten Schritt in die manifest.json des Beispiels kopiert und sie in Ihr Git-Repository übertragen haben, können Sie die generierten Dateien löschen.
2

Clone the Example Implementation

Klonen Sie das dodopayments-figma-Repository:
Ersetzen Sie in der geklonten manifest.json name und id durch die Werte aus der manifest.json Ihres generierten Plugins. Dieses Beispiel ist Ihr Ausgangspunkt für die Integration.
Ändern Sie die URL des Remote-Ursprungs für die Versionskontrolle in Ihr eigenes Repository, beispielsweise mit git remote set-url origin <your-repository-url>.
3

Install Dependencies

Führen Sie im Projektstamm Folgendes aus:
4

Configure Environment

Legen Sie API_MODE in src/ui/api.ts fest:
API_MODE wählt den API-Host aus: https://test.dodopayments.com für test_mode oder https://live.dodopayments.com für live_mode.
Verwenden Sie test_mode während der Entwicklung, um die Verarbeitung echter Zahlungen zu vermeiden.
5

Customize Components

Passen Sie die Plugin-Komponenten in src/ui/components/ an Ihre Anforderungen an:
  • Aktualisieren Sie Authenticated.tsx, um Benutzern mit gültigen Lizenzschlüsseln Funktionen bereitzustellen.
  • Passen Sie LicenseKeyInput.tsx an Ihr Design an.
Authenticated.tsx ist der Bereich, in dem Sie die Premium-Funktionen Ihres Plugins hinzufügen. Das Plugin zeigt sie erst an, nachdem ein Lizenzschlüssel validiert oder aktiviert wurde.

​
Konfiguration

1

Configure Network Access

Das Beispiel sendet jede Lizenzschlüssel-Anfrage über einen CORS-Proxy unter https://dodo-payments-proxy.aagarwal9782.workers.dev, und sein manifest.json erlaubt den Netzwerkzugriff nur auf diesen Proxy. Der Proxy ist nicht verfügbar, daher solltest du die Dodo Payments API direkt aufrufen. Die API akzeptiert Cross-Origin-Anfragen von jedem Origin, einschließlich des null-Origin der Plugin-Benutzeroberfläche.Ersetze in deinem manifest.json die Proxy-Domain durch die Hosts der Dodo Payments API:
Ersetze in src/ui/api.ts fetch(proxyReq) durch fetch(req) in validateLicenseKey und activateLicenseKey, damit jede Anfrage direkt an die API gesendet wird.Dadurch kann das Plugin Lizenzschlüssel mit der Dodo Payments API validieren und aktivieren.
2

Configure API Mode

Konfiguriere in src/ui/api.ts den API-Modus:
Wechsle erst dann zu live_mode, wenn du für den Produktionseinsatz bereit bist und gründlich im Testmodus getestet hast.

​
Entwicklung

1

Import Plugin

Importiere das Plugin in die Figma-Desktop-App:
  1. Öffne eine Designdatei.
  2. Öffne das Figma-Menü und wähle Plugins aus.
  3. Wähle unter Entwicklung die Option Import new plugin from manifest… aus und wähle anschließend die manifest.json-Datei im Projektstammverzeichnis aus.
Das Manifest lädt das Plugin aus den erstellten Dateien in dist/. Starte daher den Entwicklungsserver oder führe npm run build aus, bevor du das Plugin startest.
Du benötigst die Figma-Desktop-App, um Plugins lokal zu entwickeln und zu testen, da Figma den Plugin-Code aus lokalen Dateien liest.
2

Start Development Server

Dadurch wird der Entwicklungsserver mit Dateiüberwachung für automatische Neubuilds gestartet. Außerdem wird der Code während deiner Änderungen auf korrekte Typen geprüft.
Dein Plugin wird automatisch neu erstellt, wenn du den Quellcode änderst.

​
Build-Befehle

Das Projekt enthält die folgenden npm-Skripte:

​
Integration von Lizenzschlüsseln

Die Beispielimplementierung prüft einen Lizenzschlüssel, bevor sie das Plugin freischaltet. Du kannst jeden Schritt anpassen:
  1. Benutzereingabe: Benutzer geben ihren Lizenzschlüssel in der Plugin-Benutzeroberfläche ein.
  2. Validierung: Standardmäßig validiert das Plugin den Schlüssel mit Validate License (POST /licenses/validate).
  3. Aktivierung: Wenn deine Lizenzschlüssel ein Aktivierungslimit haben, setze needsActivation in src/ui/components/Unauthenticated.tsx auf true. Das Plugin aktiviert den Schlüssel anschließend mit Activate License (POST /licenses/activate), anstatt ihn zu validieren, und benennt die Instanz Figma Plugin.
  4. Zugriffskontrolle: Bei einem gültigen Schlüssel speichert das Plugin den Schlüssel mit figma.clientStorage und zeigt Authenticated.tsx an. Beim nächsten Öffnen des Plugins wird der gespeicherte Schlüssel erneut validiert.

​
Veröffentlichung

Wenn dein Plugin bereit ist:
  1. Für die Produktion erstellen: npm run build
  2. Sowohl im Testmodus als auch im Live-Modus gründlich testen.
  3. Befolge Figma’s Richtlinien zur Veröffentlichung von Plugins.
  4. Reiche das Plugin über die Figma Community zur Überprüfung ein.

​
Repository

Die vollständige Beispielimplementierung ist unter github.com/dodopayments/dodopayments-figma verfügbar. Verwenden Sie sie als Ausgangspunkt, um ein Premium-Figma-Plugin mit Dodo Payments-Lizenzschlüsseln zu erstellen.
Zuletzt geändert am 26. September 2026