> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma Plugin Boilerplate

> Erstellen Sie Figma-Plugins mit Dodo Payments Lizenzschlüsselvalidierung und -aktivierung

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

<Steps>
  <Step title="Create Base Plugin">
    Erstellen Sie Ihr eigenes Figma-Plugin-Projekt mithilfe der [Figma-Plugin-Schnellstartanleitung](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Dadurch wird ein Gerüst mit einer `manifest.json`-Datei erstellt.

    <Tip>
      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.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Klonen Sie das [dodopayments-figma-Repository](https://github.com/dodopayments/dodopayments-figma) und aktualisieren Sie dessen `manifest.json` mit dem Namen und der ID aus Ihrem generierten Plugin-Ordner.

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    Dieses Beispiel dient als Ausgangspunkt für Ihre Integration.

    <Tip>
      Sie müssen die Remote-Origin-URL für die Versionierung auf Ihr eigenes Repository ändern.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    Setzen Sie die `API_MODE` in `src/ui/api.ts`:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      Verwenden Sie während der Entwicklung stets `test_mode`, um die Verarbeitung echter Zahlungen zu vermeiden.
    </Warning>
  </Step>

  <Step title="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

    <Note>
      Die `Authenticated.tsx`-Komponente ist der Ort, an dem Sie die Premium-Funktionen Ihres Plugins hinzufügen, die einen gültigen Lizenzschlüssel erfordern.
    </Note>
  </Step>
</Steps>

## Konfiguration

<Steps>
  <Step title="Configure Network Access">
    Das Plugin benötigt Netzwerkzugang, um mit dem CORS-Proxy zu kommunizieren. Fügen Sie Folgendes zu Ihrer `manifest.json` hinzu:

    ```json theme={null}
    {
      "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.

    <Info>
      Der CORS-Proxy ist notwendig, da die Dodo Payments API derzeit keine API-Aufrufe von browserbasierten Anwendungen zulässt.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    Konfigurieren Sie im `src/ui/api.ts` den API-Modus:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      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.
    </Tip>
  </Step>
</Steps>

## Entwicklung

<Steps>
  <Step title="Import Plugin">
    Importieren Sie das Plugin in Figma über „Manifest importieren“ in der Figma-Desktop-App.

    <Note>
      Sie müssen die Figma-Desktop-App installiert haben, um Plugins lokal zu entwickeln und zu testen.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Dies startet den Entwicklungsserver mit Dateibeobachtung für automatische Neuaufbauten.

    <Check>
      Ihr Plugin wird automatisch neu erstellt, wenn Sie Änderungen am Quellcode vornehmen.
    </Check>
  </Step>
</Steps>

## Build-Befehle

| Befehl           | Beschreibung                                            |
| ---------------- | ------------------------------------------------------- |
| `npm run build`  | Erstellen Sie das Plugin für die Produktion             |
| `npm run dev`    | Starten Sie den Entwicklungsserver mit Dateiüberwachung |
| `npm run lint`   | Überprüfen Sie den Code-Stil und Fehler                 |
| `npm run format` | Formatieren 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](https://www.figma.com/plugin-docs/publishing-plugins/)
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](https://github.com/dodopayments/dodopayments-figma)

Verwenden Sie dies als Ausgangspunkt, um Ihr eigenes Premium-Figma-Plugin mit Dodo Payments Lizenzschlüsselintegration zu erstellen.