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

Create Base Plugin

Skapa ditt eget Figma-pluginprojekt med hjälp av Figma’s plugin quickstart guide. Detta genererar ett grundbygge med en manifest.json-fil.
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.
2

Clone the Example Implementation

Klona dodopayments-figma repository och uppdatera dess manifest.json med namnet och ID:t från din genererade plugin-mapp.
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 remote origin-URL:en till ditt eget repository för versionshantering.
3

Install Dependencies

Kör följande kommando i projektets rotkatalog:
npm install
4

Configure Environment

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 utvecklingen för att undvika att behandla riktiga betalningar.
5

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
Komponenten Authenticated.tsx är där du lägger till pluginets premiummfunktioner som kräver en giltig licens.

​
Konfiguration

1

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:
{
  "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

Configure API Mode

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äget.

​
Utveckling

1

Import Plugin

Importera pluginet till Figma genom att använda “Import Manifest” från Figma-skrivbordsappen.
Du behöver ha Figma-skrivbordsappen installerad för att utveckla och testa plugin lokalt.
2

Start Development Server

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

​
Byggkommandon

KommandotBeskrivning
npm run buildBygg pluginet för produktion
npm run devStarta utvecklingsserver med filövervakning
npm run lintKontrollera kodstil och fel
npm run formatFormatera 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
  4. Skicka in för granskning via 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.