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

Create Base Plugin

Erstellen Sie Ihr eigenes Figma-Plugin-Projekt mithilfe der Figma-Plugin-Schnellstartanleitung. Dadurch wird ein Gerüst mit einer manifest.json-Datei erstellt.
Dieser Schritt dient lediglich dazu, einen eindeutigen Namen und eine ID für Ihr Plugin zu erhalten. Sie können die generierten Dateien verwerfen, nachdem Sie die ID und den Namen im nächsten Schritt in Ihr Git-Repository übernommen haben.
2

Clone the Example Implementation

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 für die Versionierung auf Ihr eigenes Repository ändern.
3

Install Dependencies

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

Configure Environment

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 während der Entwicklung stets test_mode, um die Verarbeitung echter Zahlungen zu vermeiden.
5

Customize Components

Passen Sie die Plugin-Komponenten an Ihre Anforderungen an:
  • Aktualisieren Sie Authenticated.tsx, um Funktionen für Benutzer mit gültigen Lizenzschlüsseln bereitzustellen
  • Passen Sie LicenseKeyInput.tsx an Ihre Designpräferenzen 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

Configure Network Access

Das Plugin benötigt Netzwerkzugang, um mit dem CORS-Proxy zu kommunizieren. Fügen Sie Folgendes zu Ihrer 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

Configure API Mode

Konfigurieren Sie im src/ui/api.ts den API-Modus:
const API_MODE = "test_mode"; // or "live_mode"
Wechseln Sie ausschließlich dann auf live_mode, wenn Sie für die Produktion bereit sind und zuvor den Testmodus gründlich geprüft haben.

​
Entwicklung

1

Import Plugin

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

Start Development Server

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

​
Build-Befehle

BefehlBeschreibung
npm run buildErstellen Sie das Plugin für die Produktion
npm run devStarten Sie den Entwicklungsserver mit Dateiüberwachung
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. Für die Produktion bauen: npm run build
  2. Testen Sie umfangreich sowohl im Testmodus als auch im Live-Modus
  3. Befolgen Sie Figma’s Plugin-Veröffentlichungsrichtlinien
  4. Reichen Sie es 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.