Skip to main content
Dodo Payments Figma-exempel är ett plugin-skelett som låser upp sina funktioner endast för användare med en giltig Dodo Payments-licensnyckel. Använd det som utgångspunkt för ett premium-plugin för Figma: det innehåller ett fält för licensnyckel, validering och aktivering mot Dodo Payments API samt en komponent för dina premiumfunktioner.

​
Funktioner

  • Validering av licensnyckel: Validerar licensnycklar mot Dodo Payments API.
  • Aktivering av licensnyckel: Aktiverar licensnycklar med ett instansnamn för nycklar som har en aktiveringsgräns.
  • Stöd för miljöer: Kan konfigureras för både testläge och live-läge.
  • TypeScript-stöd: Fullständigt typad implementation med felhantering.

​
Komma igång

Innan du börjar behöver du Figma-skrivbordsappen och en Dodo Payments-produkt som utfärdar licensnycklar.
1

Create Base Plugin

Skapa ditt eget Figma-pluginprojekt med Figma’s plugin quickstart guide. Figma genererar ett skelett med en manifest.json-fil.
Du behöver endast det här steget för att få ett unikt namn och ID för ditt plugin. När du har kopierat namnet och ID:t till manifest.json i exemplet i nästa steg och committat dem till ditt Git-repository kan du ta bort de genererade filerna.
2

Clone the Example Implementation

Klona dodopayments-figma-repositoryt:
I det klonade manifest.json ersätter du name och id med värdena från ditt genererade plugins manifest.json. Det här exemplet är din utgångspunkt för integrationen.
Ändra URL:en för remote origin till ditt eget repository för versionshantering, till exempel med git remote set-url origin <your-repository-url>.
3

Install Dependencies

Kör följande i projektroten:
4

Configure Environment

Ange API_MODE i src/ui/api.ts:
API_MODE väljer API-värd: https://test.dodopayments.com för test_mode eller https://live.dodopayments.com för live_mode.
Använd test_mode under utvecklingen för att undvika att riktiga betalningar behandlas.
5

Customize Components

Anpassa pluginets komponenter i src/ui/components/ efter dina behov:
  • Uppdatera Authenticated.tsx för att exponera funktioner för användare med giltiga licensnycklar.
  • Anpassa LicenseKeyInput.tsx efter din design.
Authenticated.tsx är platsen där du lägger till pluginets premiumfunktioner. Pluginet visar dem först efter att en licensnyckel har validerats eller aktiverats.

​
Konfiguration

1

Configure Network Access

Exemplet skickar varje licensnyckelbegäran via en CORS-proxy på https://dodo-payments-proxy.aagarwal9782.workers.dev, och dess manifest.json tillåter nätverksåtkomst endast till den proxyn. Proxyn är inte tillgänglig, så anropa Dodo Payments API direkt. API:et accepterar cross-origin-begäranden från alla origins, inklusive null-originen för pluginets UI.I din manifest.json ersätter du proxydomänen med Dodo Payments API-värdarna:
I src/ui/api.ts ersätter du fetch(proxyReq) med fetch(req) i validateLicenseKey och activateLicenseKey, så att varje begäran går direkt till API:et.Detta gör att pluginet kan validera och aktivera licensnycklar med Dodo Payments API.
2

Configure API Mode

I src/ui/api.ts konfigurerar du API-läget:
Byt till live_mode först när du är redo för produktion och har testat noggrant i testläge.

​
Utveckling

1

Import Plugin

Importera pluginet i Figma-appen för datorer:
  1. Öppna en designfil.
  2. Öppna Figma-menyn och välj Plugins.
  3. Under Development väljer du Import new plugin from manifest… och väljer sedan filen manifest.json i projektets rotkatalog.
Manifestet läser in pluginet från de byggda filerna i dist/, så starta utvecklingsservern eller kör npm run build innan du kör pluginet.
Du behöver Figma-appen för datorer för att utveckla och testa plugins lokalt, eftersom Figma läser pluginets kod från lokala filer.
2

Start Development Server

Detta startar utvecklingsservern med filbevakning för automatiska ombyggnader. Koden typkontrolleras också medan du ändrar den.
Pluginet byggs automatiskt om när du ändrar källkoden.

​
Byggkommandon

Projektet innehåller följande npm-skript:

​
Integration av licensnyckel

Exempelimplementeringen kontrollerar en licensnyckel innan pluginet låses upp. Du kan anpassa varje steg:
  1. Användarinmatning: Användare anger sin licensnyckel i pluginets UI.
  2. Validering: Som standard validerar pluginet nyckeln med Validate License (POST /licenses/validate).
  3. Aktivering: Om dina licensnycklar har en aktiveringsgräns anger du needsActivation till true i src/ui/components/Unauthenticated.tsx. Pluginet aktiverar då nyckeln med Activate License (POST /licenses/activate) i stället för att validera den och namnger instansen Figma Plugin.
  4. Åtkomstkontroll: För en giltig nyckel sparar pluginet nyckeln med figma.clientStorage och visar Authenticated.tsx. Nästa gång pluginet öppnas validerar det den sparade nyckeln igen.

​
Publicering

När pluginet är klart:
  1. Bygg för produktion: npm run build
  2. Testa noggrant i både testläge och live-läge.
  3. Följ Figmas riktlinjer för publicering av plugins.
  4. Skicka in pluginet för granskning via Figma Community.

​
Repository

Den fullständiga exempelimplementationen finns på github.com/dodopayments/dodopayments-figma. Använd den som utgångspunkt för att bygga ett premium-plugin för Figma med Dodo Payments-licensnycklar.
Senast ändrad 26 september 2026