Hoppa till huvudinnehåll
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

1

Skapa Basplugin

Skapa ditt eget Figma-pluginprojekt med hjälp av Figma’s plugin quickstart guide. Detta kommer att generera en struktur med en manifest.json fil.
Detta steg är bara för att få ett unikt namn och ID för ditt plugin. Du kan kassera de genererade filerna efter att ha åtagit dig ID och namn till ditt git-repo i nästa steg.
2

Klona Exempelimplementationen

Klona dodopayments-figma-repositoriet och uppdatera dess manifest.json med namnet och ID:t från din genererade pluginmapp.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Detta exempel fungerar som din utgångspunkt för integration.
Du behöver ändra den fjärranslutna ursprungs-URL:en till ditt eget repository för versionskontroll.
3

Installera Beroenden

Kör följande kommando i din projektrot:
npm install
4

Konfigurera Miljö

Ställ in API_MODE i src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Använd alltid test_mode under utveckling för att undvika att bearbeta verkliga betalningar.
5

Anpassa Komponenter

Anpassa plugin-komponenterna för att matcha dina behov:
  • Uppdatera Authenticated.tsx för att exponera funktionalitet för användare med giltiga licensnycklar
  • Anpassa LicenseKeyInput.tsx för att matcha dina designpreferenser
Den Authenticated.tsx komponenten är där du kommer att lägga till dina plugins premiumfunktioner som kräver en giltig licens.

​
Konfiguration

1

Konfigurera Nätverksåtkomst

Pluginen behöver nätverksåtkomst för att kommunicera med CORS-proxyn. Lägg till följande i din manifest.json:
{
  "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.
CORS-proxyn är nödvändig eftersom Dodo Payments API för närvarande inte tillåter API-anrop från webbläsarbaserade applikationer.
2

Konfigurera API-läge

I src/ui/api.ts, konfigurera API-läget:
const API_MODE = "test_mode"; // or "live_mode"
Byt till live_mode först när du är redo för produktion och har testat noggrant i testläge.

​
Utveckling

1

Importera Plugin

Importera pluginen till Figma med “Importera Manifest” från Figma-skrivbordsappen.
Du behöver ha Figma-skrivbordsappen installerad för att utveckla och testa plugins lokalt.
2

Starta Utvecklingsserver

npm run dev
Detta startar utvecklingsservern med filövervakning för automatisk ombyggnad.
Din plugin kommer automatiskt att ombyggas när du gör ändringar i källkoden.

​
Byggkommandon

KommandoBeskrivning
npm run buildBygg pluginen för produktion
npm run devStarta utvecklingsserver med filövervakning
npm run lintKontrollera kodstil och fel
npm run formatFormatera kod 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 produktionslägen
  3. Följ Figma’s plugin publiceringsriktlinjer
  4. Skicka in för granskning genom Figma Community

​
Repository

Den kompletta exempelimplementationen finns på: 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.