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

# Boilerplate Plugin Figma

> Crea plugin Figma con validazione e attivazione della chiave di licenza Dodo Payments

Questa è un'implementazione di esempio e un boilerplate progettato come punto di partenza per gli sviluppatori di plugin Figma che desiderano integrare l'API della chiave di licenza Dodo Payments per concedere accesso ai loro plugin. Il template dimostra la funzionalità completa di validazione e attivazione della chiave di licenza, fornendo tutto il necessario per creare plugin Figma premium con licenze integrate.

## Caratteristiche

* **Validazione della Chiave di Licenza**: Valida le chiavi di licenza contro l'API Dodo Payments
* **Attivazione della Chiave di Licenza**: Attiva le chiavi di licenza con identificazione dell'utente
* **Supporto Ambientale**: Configurabile per ambienti di test e live
* **Proxy CORS**: Utilizza un proxy Cloudflare Worker per gestire le restrizioni CORS
* **Supporto TypeScript**: Implementazione completamente tipizzata con gestione degli errori appropriata

## Iniziare

<Steps>
  <Step title="Create Base Plugin">
    Crea il tuo progetto di plugin Figma utilizzando la [guida rapida per plugin di Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). Questo genererà uno scheletro con un file `manifest.json`.

    <Tip>
      Questo passaggio serve solo a ottenere un nome e un ID unici per il tuo plugin. Puoi eliminare i file generati dopo aver salvato l’ID e il nome nel tuo repository git nel passaggio successivo.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    Clona il [repository dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) e aggiorna il suo `manifest.json` con il nome e l’ID della cartella del plugin che hai generato.

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

    Questo esempio serve come punto di partenza per l'integrazione.

    <Tip>
      Devi cambiare l’URL dell’origine remota con quello del tuo repository per il controllo versione.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    Esegui il seguente comando nella root del tuo progetto:

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

  <Step title="Configure Environment">
    Imposta l’`API_MODE` in `src/ui/api.ts`:

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

    <Warning>
      Usa sempre `test_mode` durante lo sviluppo per evitare di elaborare pagamenti reali.
    </Warning>
  </Step>

  <Step title="Customize Components">
    Personalizza i componenti del plugin per soddisfare le tue esigenze:

    * Aggiorna `Authenticated.tsx` per esporre funzionalità agli utenti con chiavi di licenza valide
    * Personalizza `LicenseKeyInput.tsx` per adattarlo alle tue preferenze di design

    <Note>
      Il componente `Authenticated.tsx` è dove aggiungerai le funzionalità premium del tuo plugin che richiedono una licenza valida.
    </Note>
  </Step>
</Steps>

## Configurazione

<Steps>
  <Step title="Configure Network Access">
    Il plugin necessita dell’accesso alla rete per comunicare con il proxy CORS. Aggiungi quanto segue al tuo `manifest.json`:

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

    Questo consente al plugin di validare e attivare le chiavi di licenza utilizzando l'API Dodo Payments.

    <Info>
      Il proxy CORS è necessario perché l’API di Dodo Payments non consente attualmente chiamate API da applicazioni basate su browser.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    In `src/ui/api.ts`, configura la modalità API:

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

    <Tip>
      Passa a `live_mode` solo quando sei pronto per la produzione e hai testato approfonditamente in modalità di test.
    </Tip>
  </Step>
</Steps>

## Sviluppo

<Steps>
  <Step title="Import Plugin">
    Importa il plugin in Figma usando «Import Manifest» dall’app desktop di Figma.

    <Note>
      È necessario avere l’app desktop di Figma installata per sviluppare e testare i plugin localmente.
    </Note>
  </Step>

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

    Questo avvia il server di sviluppo con il monitoraggio dei file per ricompilazioni automatiche.

    <Check>
      Il tuo plugin verrà ricompilato automaticamente quando apporti modifiche al codice sorgente.
    </Check>
  </Step>
</Steps>

## Comandi di Build

| Command          | Description                                 |
| ---------------- | ------------------------------------------- |
| `npm run build`  | Build the plugin for production             |
| `npm run dev`    | Start development server with file watching |
| `npm run lint`   | Check code style and errors                 |
| `npm run format` | Format code with Prettier                   |

## Integrazione della Chiave di Licenza

L'implementazione di esempio include una validazione e attivazione completa della chiave di licenza che puoi personalizzare per il tuo plugin:

1. **Input Utente**: Gli utenti inseriscono la loro chiave di licenza nell'interfaccia del plugin
2. **Validazione**: Il plugin valida la chiave contro l'API Dodo Payments
3. **Attivazione**: Le chiavi valide vengono attivate con identificazione dell'utente
4. **Controllo Accesso**: La funzionalità del plugin viene sbloccata per i titolari di chiavi di licenza valide

## Pubblicazione

Una volta che il tuo plugin è pronto:

1. Build for production: `npm run build`
2. Test thoroughly in both test and live modes
3. Follow [Figma's plugin publishing guidelines](https://www.figma.com/plugin-docs/publishing-plugins/)
4. Submit for review through the Figma Community

## Repository

L'implementazione completa di esempio è disponibile su: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

Usa questo come punto di partenza per costruire il tuo plugin Figma premium con integrazione della chiave di licenza Dodo Payments.