Zum Hauptinhalt springen
Dies ist eine Beispielimplementierung und ein Boilerplate, das als Ausgangspunkt für Figma-Plugin-Entwickler gedacht ist, die die Dodo Payments Lizenzschlüssel-API integrieren möchten, um den Zugriff auf ihre Plugins zu gewähren. Die Vorlage demonstriert die vollständige Lizenzschlüsselvalidierung und -aktivierungsfunktionalität und bietet alles, was Sie benötigen, um Premium-Figma-Plugins mit integrierter Lizenzierung zu erstellen.

​
Funktionen

  • Lizenzschlüsselvalidierung: Validiert Lizenzschlüssel gegen die Dodo Payments API
  • Lizenzschlüsselaktivierung: Aktiviert Lizenzschlüssel mit Benutzeridentifikation
  • Umgebungsunterstützung: Konfigurierbar für Test- und Live-Umgebungen
  • CORS-Proxy: Verwendet einen Cloudflare Worker-Proxy, um CORS-Einschränkungen zu handhaben
  • TypeScript-Unterstützung: Vollständig typisierte Implementierung mit ordnungsgemäßer Fehlerbehandlung

​
Erste Schritte

1

Basis-Plugin erstellen

Erstellen Sie Ihr eigenes Figma-Plugin-Projekt mithilfe des Figma Plugin Quickstart Guides. Dies generiert ein Gerüst mit einer manifest.json Datei.
Dieser Schritt dient nur dazu, einen eindeutigen Namen und eine ID für Ihr Plugin zu erhalten. Sie können die generierten Dateien nach dem Commit der ID und des Namens in Ihrem Git-Repository im nächsten Schritt verwerfen.
2

Beispielimplementierung klonen

Klonen Sie das dodopayments-figma Repository und aktualisieren Sie dessen manifest.json mit dem Namen und der ID aus Ihrem generierten Plugin-Ordner.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Dieses Beispiel dient als Ausgangspunkt für Ihre Integration.
Sie müssen die Remote-Origin-URL auf Ihr eigenes Repository für die Versionskontrolle ändern.
3

Abhängigkeiten installieren

Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:
npm install
4

Umgebung konfigurieren

Setzen Sie die API_MODE in src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Verwenden Sie immer test_mode während der Entwicklung, um zu vermeiden, dass echte Zahlungen verarbeitet werden.
5

Komponenten anpassen

Passen Sie die Plugin-Komponenten an Ihre Bedürfnisse an:
  • Aktualisieren Sie Authenticated.tsx, um Funktionen für Benutzer mit gültigen Lizenzschlüsseln bereitzustellen
  • Passen Sie LicenseKeyInput.tsx an Ihre Designvorlieben an
Die Authenticated.tsx Komponente ist der Ort, an dem Sie die Premium-Funktionen Ihres Plugins hinzufügen, die einen gültigen Lizenzschlüssel erfordern.

​
Konfiguration

1

Netzwerkzugriff konfigurieren

Das Plugin benötigt Netzwerkzugriff, um mit dem CORS-Proxy zu kommunizieren. Fügen Sie Folgendes zu Ihrem manifest.json hinzu:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Dies ermöglicht es dem Plugin, Lizenzschlüssel mithilfe der Dodo Payments API zu validieren und zu aktivieren.
Der CORS-Proxy ist notwendig, da die Dodo Payments API derzeit keine API-Aufrufe von browserbasierten Anwendungen zulässt.
2

API-Modus konfigurieren

Konfigurieren Sie im src/ui/api.ts den API-Modus:
const API_MODE = "test_mode"; // or "live_mode"
Wechseln Sie zu live_mode, wenn Sie bereit für die Produktion sind und gründlich im Testmodus getestet haben.

​
Entwicklung

1

Plugin importieren

Importieren Sie das Plugin in Figma mit “Manifest importieren” aus der Figma-Desktop-App.
Sie müssen die Figma-Desktop-App installiert haben, um Plugins lokal zu entwickeln und zu testen.
2

Entwicklungsserver starten

npm run dev
Dies startet den Entwicklungsserver mit Dateibeobachtung für automatische Neuaufbauten.
Ihr Plugin wird automatisch neu aufgebaut, wenn Sie Änderungen am Quellcode vornehmen.

​
Build-Befehle

BefehlBeschreibung
npm run buildBauen Sie das Plugin für die Produktion
npm run devStarten Sie den Entwicklungsserver mit Dateibeobachtung
npm run lintÜberprüfen Sie den Code-Stil und Fehler
npm run formatFormatieren Sie den Code mit Prettier

​
Lizenzschlüsselintegration

Die Beispielimplementierung umfasst eine vollständige Lizenzschlüsselvalidierung und -aktivierung, die Sie für Ihr Plugin anpassen können:
  1. Benutzereingabe: Benutzer geben ihren Lizenzschlüssel in der Plugin-Benutzeroberfläche ein
  2. Validierung: Das Plugin validiert den Schlüssel gegen die Dodo Payments API
  3. Aktivierung: Gültige Schlüssel werden mit Benutzeridentifikation aktiviert
  4. Zugriffskontrolle: Die Plugin-Funktionalität wird für Inhaber gültiger Lizenzschlüssel freigeschaltet

​
Veröffentlichung

Sobald Ihr Plugin bereit ist:
  1. Bauen Sie für die Produktion: npm run build
  2. Testen Sie gründlich sowohl im Test- als auch im Live-Modus
  3. Befolgen Sie die Veröffentlichungsrichtlinien für Figma-Plugins
  4. Reichen Sie zur Überprüfung über die Figma-Community ein

​
Repository

Die vollständige Beispielimplementierung ist verfügbar unter: github.com/dodopayments/dodopayments-figma Verwenden Sie dies als Ausgangspunkt, um Ihr eigenes Premium-Figma-Plugin mit Dodo Payments Lizenzschlüsselintegration zu erstellen.