> ## 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-pluginmall

> Bygg Figma-plugins med Dodo Payments licensnyckelvalidering och aktivering

Detta är en exempelimplementation och mall som är utformad som en utgångspunkt för Figma-pluginutvecklare som vill integrera Dodo Payments licensnyckel-API för att ge åtkomst till sina plugins. Mallen demonstrerar fullständig licensnyckelvalidering och aktiveringsfunktionalitet, vilket ger allt du behöver för att skapa premium Figma-plugins med inbyggd licensiering.

## Funktioner

* **Licensnyckelvalidering**: Validerar licensnycklar mot Dodo Payments API
* **Licensnyckelaktivering**: Aktiverar licensnycklar med användaridentifiering
* **Miljöstöd**: Konfigurerbar för både test- och produktionsmiljöer
* **CORS Proxy**: Använder en Cloudflare Worker-proxy för att hantera CORS-restriktioner
* **TypeScript-stöd**: Fullt typad implementation med korrekt felhantering

## Komma igång

<Steps>
  <Step title="Create Base Plugin">
    Skapa ditt eget Figma-pluginprojekt med hjälp av [Figma's plugin quickstart guide](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Detta genererar ett grundbygge med en `manifest.json`-fil.

    <Tip>
      Detta steg är bara för att få ett unikt namn och ID till ditt plugin. Du kan kasta bort de genererade filerna efter att du har committat ID:t och namnet till ditt git-repo i nästa steg.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Klona [dodopayments-figma repository](https://github.com/dodopayments/dodopayments-figma) och uppdatera dess `manifest.json` med namnet och ID:t från din genererade plugin-mapp.

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

    Detta exempel fungerar som din utgångspunkt för integration.

    <Tip>
      Du behöver ändra remote origin-URL:en till ditt eget repository för versionshantering.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Kör följande kommando i projektets rotkatalog:

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

  <Step title="Configure Environment">
    Ställ in `API_MODE` i `src/ui/api.ts`:

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

    <Warning>
      Använd alltid `test_mode` under utvecklingen för att undvika att behandla riktiga betalningar.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Anpassa plugin-komponenterna efter dina behov:

    * Uppdatera `Authenticated.tsx` för att exponera funktionalitet för användare med giltiga licensnycklar
    * Anpassa `LicenseKeyInput.tsx` så att den matchar dina designpreferenser

    <Note>
      Komponenten `Authenticated.tsx` är där du lägger till pluginets premiummfunktioner som kräver en giltig licens.
    </Note>
  </Step>
</Steps>

## Konfiguration

<Steps>
  <Step title="Configure Network Access">
    Pluginet behöver nätverksåtkomst för att kommunicera med CORS-proxyn. Lägg till följande i din `manifest.json`:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    Detta gör att pluginen kan validera och aktivera licensnycklar med hjälp av Dodo Payments API.

    <Info>
      CORS-proxyn är nödvändig eftersom Dodo Payments API för närvarande inte tillåter API-anrop från webbläsarbaserade applikationer.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    I `src/ui/api.ts`, konfigurera API-läget:

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

    <Tip>
      Byt till `live_mode` först när du är redo för produktion och har testat noggrant i testläget.
    </Tip>
  </Step>
</Steps>

## Utveckling

<Steps>
  <Step title="Import Plugin">
    Importera pluginet till Figma genom att använda "Import Manifest" från Figma-skrivbordsappen.

    <Note>
      Du behöver ha Figma-skrivbordsappen installerad för att utveckla och testa plugin lokalt.
    </Note>
  </Step>

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

    Detta startar utvecklingsservern med filövervakning för automatisk ombyggnad.

    <Check>
      Ditt plugin kommer automatiskt byggas om när du gör ändringar i källkoden.
    </Check>
  </Step>
</Steps>

## Byggkommandon

| Kommandot        | Beskrivning                                 |
| ---------------- | ------------------------------------------- |
| `npm run build`  | Bygg pluginet för produktion                |
| `npm run dev`    | Starta utvecklingsserver med filövervakning |
| `npm run lint`   | Kontrollera kodstil och fel                 |
| `npm run format` | Formatera koden med Prettier                |

## Licensnyckelintegration

Exempelimplementationen inkluderar fullständig licensnyckelvalidering och aktivering som du kan anpassa för din plugin:

1. **Användarinmatning**: Användare anger sin licensnyckel i pluginens UI
2. **Validering**: Pluginen validerar nyckeln mot Dodo Payments API
3. **Aktivering**: Giltiga nycklar aktiveras med användaridentifiering
4. **Åtkomstkontroll**: Pluginens funktionalitet låses upp för innehavare av giltiga licensnycklar

## Publicering

När din plugin är redo:

1. Bygg för produktion: `npm run build`
2. Testa noggrant i både test- och live-lägen
3. Följ [Figma's plugin publishing guidelines](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Skicka in för granskning via Figma Community

## Repository

Den kompletta exempelimplementationen finns på: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

Använd detta som din utgångspunkt för att bygga din egen premium Figma-plugin med Dodo Payments licensnyckelintegration.