Saltar al contenido principal
Esta es una implementación de ejemplo y plantilla diseñada como un punto de partida para desarrolladores de plugins de Figma que desean integrar la API de clave de licencia de Dodo Payments para otorgar acceso a sus plugins. La plantilla demuestra la funcionalidad completa de validación y activación de claves de licencia, proporcionando todo lo que necesitas para crear plugins de Figma premium con licencias integradas.

​
Características

  • Validación de Clave de Licencia: Valida claves de licencia contra la API de Dodo Payments
  • Activación de Clave de Licencia: Activa claves de licencia con identificación del usuario
  • Soporte de Entorno: Configurable para entornos de prueba y en vivo
  • Proxy CORS: Utiliza un proxy de Cloudflare Worker para manejar restricciones de CORS
  • Soporte para TypeScript: Implementación completamente tipada con manejo de errores adecuado

​
Comenzando

1

Create Base Plugin

Crea tu propio proyecto de plugin para Figma usando la guía de inicio rápido para plugins de Figma. Esto generará una estructura con un archivo manifest.json.
Este paso es solo para obtener un nombre e ID únicos para tu plugin. Puedes descartar los archivos generados después de confirmar el ID y el nombre en tu repositorio git en el siguiente paso.
2

Clone the Example Implementation

Clona el repositorio dodopayments-figma y actualiza su manifest.json con el nombre y el ID de la carpeta de tu plugin generado.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Este ejemplo sirve como tu punto de partida para la integración.
Debes cambiar la URL del origen remoto por la de tu propio repositorio para el control de versiones.
3

Install Dependencies

Ejecuta el siguiente comando en la raíz de tu proyecto:
npm install
4

Configure Environment

Configura el API_MODE en src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Utiliza siempre test_mode durante el desarrollo para evitar procesar pagos reales.
5

Customize Components

Personaliza los componentes del plugin para que se ajusten a tus necesidades:
  • Actualiza Authenticated.tsx para exponer funcionalidades para usuarios con claves de licencia válidas
  • Personaliza LicenseKeyInput.tsx para que coincida con tus preferencias de diseño
El componente Authenticated.tsx es donde agregarás las funciones premium de tu plugin que requieren una licencia válida.

​
Configuración

1

Configure Network Access

El plugin necesita acceso a la red para comunicarse con el proxy CORS. Agrega lo siguiente a tu manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Esto permite que el plugin valide y active claves de licencia utilizando la API de Dodo Payments.
El proxy CORS es necesario porque la API de Dodo Payments actualmente no permite llamadas desde aplicaciones basadas en navegador.
2

Configure API Mode

En src/ui/api.ts, configura el modo de la API:
const API_MODE = "test_mode"; // or "live_mode"
Cambia a live_mode solo cuando estés listo para producción y hayas probado exhaustivamente en modo de prueba.

​
Desarrollo

1

Import Plugin

Importa el plugin en Figma usando “Import Manifest” desde la aplicación de escritorio de Figma.
Necesitarás tener instalada la aplicación de escritorio de Figma para desarrollar y probar plugins localmente.
2

Start Development Server

npm run dev
Esto inicia el servidor de desarrollo con vigilancia de archivos para reconstrucciones automáticas.
Tu plugin se reconstruirá automáticamente cuando hagas cambios en el código fuente.

​
Comandos de Construcción

CommandDescription
npm run buildConstruye el plugin para producción
npm run devInicia el servidor de desarrollo con vigilancia de archivos
npm run lintVerifica el estilo y errores del código
npm run formatFormatea el código con Prettier

​
Integración de Clave de Licencia

La implementación de ejemplo incluye validación y activación completa de claves de licencia que puedes personalizar para tu plugin:
  1. Entrada del Usuario: Los usuarios ingresan su clave de licencia en la interfaz del plugin
  2. Validación: El plugin valida la clave contra la API de Dodo Payments
  3. Activación: Las claves válidas se activan con identificación del usuario
  4. Control de Acceso: La funcionalidad del plugin se desbloquea para los titulares de licencia válidas

​
Publicación

Una vez que tu plugin esté listo:
  1. Construye para producción: npm run build
  2. Prueba exhaustivamente en modo de prueba y en vivo
  3. Sigue las directrices de publicación de plugins de Figma
  4. Somete a revisión a través de la Comunidad de Figma

​
Repositorio

La implementación de ejemplo completa está disponible en: github.com/dodopayments/dodopayments-figma Usa esto como tu punto de partida para construir tu propio plugin de Figma premium con integración de clave de licencia de Dodo Payments.