Skip to main content
L’esempio Figma di Dodo Payments è un plugin boilerplate che sblocca le sue funzionalità solo per gli utenti con una chiave di licenza Dodo Payments valida. Usalo come punto di partenza per un plugin Figma premium: include un campo per la chiave di licenza, la convalida e l’attivazione tramite l’API Dodo Payments e un componente per le tue funzionalità premium.

​
Caratteristiche

  • Convalida della chiave di licenza: convalida le chiavi di licenza tramite l’API di Dodo Payments.
  • Attivazione della chiave di licenza: attiva le chiavi di licenza con un nome di istanza, per le chiavi che hanno un limite di attivazione.
  • Supporto per gli ambienti: configurabile sia per la modalità di test che per la modalità live.
  • Supporto TypeScript: implementazione completamente tipizzata con gestione degli errori.

​
Iniziare

Prima di iniziare, ti servono l’app desktop Figma e un prodotto Dodo Payments che emetta chiavi di licenza.
1

Create Base Plugin

Crea il tuo progetto plugin Figma con la guida introduttiva ai plugin di Figma. Figma genera uno scaffold con un file manifest.json.
Ti serve questo passaggio solo per ottenere un nome e un ID univoci per il plugin. Dopo aver copiato il nome e l’ID nel file manifest.json dell’esempio nel passaggio successivo e aver eseguito il commit nel tuo repository Git, puoi eliminare i file generati.
2

Clone the Example Implementation

Clona il repository dodopayments-figma:
Nel file manifest.json clonato, sostituisci name e id con i valori del file manifest.json del plugin generato. Questo esempio è il punto di partenza per l’integrazione.
Modifica l’URL dell’origine remota impostandolo sul tuo repository per il controllo versione, ad esempio con git remote set-url origin <your-repository-url>.
3

Install Dependencies

Nella radice del progetto, esegui:
4

Configure Environment

Imposta API_MODE in src/ui/api.ts:
API_MODE seleziona l’host API: https://test.dodopayments.com per test_mode oppure https://live.dodopayments.com per live_mode.
Usa test_mode durante lo sviluppo per evitare di elaborare pagamenti reali.
5

Customize Components

Personalizza i componenti del plugin in src/ui/components/ in base alle tue esigenze:
  • Aggiorna Authenticated.tsx per rendere disponibili le funzionalità agli utenti con chiavi di licenza valide.
  • Personalizza LicenseKeyInput.tsx in modo che corrisponda al tuo design.
Authenticated.tsx è il punto in cui aggiungere le funzionalità premium del plugin. Il plugin le mostra solo dopo che una chiave di licenza è stata convalidata o attivata.

​
Configurazione

1

Configure Network Access

L’esempio invia ogni richiesta della chiave di licenza tramite un proxy CORS all’indirizzo https://dodo-payments-proxy.aagarwal9782.workers.dev e il suo manifest.json consente l’accesso di rete solo a quel proxy. Il proxy non è disponibile, quindi chiama direttamente l’API di Dodo Payments. L’API accetta richieste cross-origin da qualsiasi origine, inclusa l’origine null dell’interfaccia utente del plugin.Nel tuo manifest.json, sostituisci il dominio del proxy con gli host dell’API di Dodo Payments:
In src/ui/api.ts, sostituisci fetch(proxyReq) con fetch(req) in validateLicenseKey e activateLicenseKey, in modo che ogni richiesta venga inviata direttamente all’API.Questo consente al plugin di convalidare e attivare le chiavi di licenza tramite l’API di Dodo Payments.
2

Configure API Mode

In src/ui/api.ts, configura la modalità dell’API:
Passa a live_mode solo quando sei pronto per la produzione e hai eseguito test approfonditi in modalità di test.

​
Sviluppo

1

Import Plugin

Importa il plugin nell’app desktop di Figma:
  1. Apri un file di progettazione.
  2. Apri il menu di Figma e seleziona Plugin.
  3. In Sviluppo, seleziona Importa nuovo plugin dal manifest…, quindi seleziona il file manifest.json nella radice del progetto.
Il manifest carica il plugin dai file compilati in dist/, quindi avvia il server di sviluppo o esegui npm run build prima di eseguire il plugin.
Per sviluppare e testare i plugin localmente è necessaria l’app desktop di Figma, perché Figma legge il codice del plugin dai file locali.
2

Start Development Server

Avvia il server di sviluppo con il monitoraggio dei file per ricompilazioni automatiche. Esegue anche il controllo dei tipi del codice mentre lo modifichi.
Il plugin viene ricompilato automaticamente quando modifichi il codice sorgente.

​
Comandi di build

Il progetto include questi script npm:

​
Integrazione delle chiavi di licenza

L’implementazione di esempio controlla una chiave di licenza prima di sbloccare il plugin. Puoi personalizzare ogni passaggio:
  1. Input dell’utente: gli utenti inseriscono la propria chiave di licenza nell’interfaccia utente del plugin.
  2. Convalida: per impostazione predefinita, il plugin convalida la chiave con Validate License (POST /licenses/validate).
  3. Attivazione: se le tue chiavi di licenza hanno un limite di attivazione, imposta needsActivation su true in src/ui/components/Unauthenticated.tsx. Il plugin attiva quindi la chiave con Activate License (POST /licenses/activate) invece di convalidarla e assegna all’istanza il nome Figma Plugin.
  4. Controllo degli accessi: per una chiave valida, il plugin salva la chiave con figma.clientStorage e mostra Authenticated.tsx. Alla successiva apertura del plugin, convalida nuovamente la chiave salvata.

​
Pubblicazione

Quando il plugin è pronto:
  1. Compila per la produzione: npm run build
  2. Esegui test approfonditi sia in modalità di test che in modalità live.
  3. Segui le linee guida di Figma per la pubblicazione dei plugin.
  4. Invia il plugin per la revisione tramite Figma Community.

​
Repository

L’implementazione completa dell’esempio è disponibile all’indirizzo github.com/dodopayments/dodopayments-figma. Usalo come punto di partenza per creare un plugin Figma premium con le chiavi di licenza Dodo Payments.
Ultima modifica il 26 settembre 2026