Passer au contenu principal
Ceci est une implémentation d’exemple et un boilerplate conçu comme point de départ pour les développeurs de plugins Figma qui souhaitent intégrer l’API de clé de licence Dodo Payments pour accorder l’accès à leurs plugins. Le modèle démontre une fonctionnalité complète de validation et d’activation de clé de licence, fournissant tout ce dont vous avez besoin pour créer des plugins Figma premium avec une licence intégrée.

​
Fonctionnalités

  • Validation de Clé de Licence : Valide les clés de licence contre l’API Dodo Payments
  • Activation de Clé de Licence : Active les clés de licence avec identification de l’utilisateur
  • Support d’Environnement : Configurable pour les environnements de test et en direct
  • Proxy CORS : Utilise un proxy Cloudflare Worker pour gérer les restrictions CORS
  • Support TypeScript : Implémentation entièrement typée avec gestion des erreurs appropriée

​
Prise en Main

1

Créer un plugin de base

Créez votre propre projet de plugin Figma en utilisant le guide de démarrage rapide des plugins de Figma. Cela générera une structure avec un fichier manifest.json.
Cette étape est juste pour obtenir un nom et un ID uniques pour votre plugin. Vous pouvez jeter les fichiers générés après avoir engagé l’ID et le nom dans votre dépôt git à l’étape suivante.
2

Cloner l'implémentation d'exemple

Clonez le dépôt dodopayments-figma et mettez à jour son manifest.json avec le nom et l’ID de votre dossier de plugin généré.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Cet exemple sert de point de départ pour l’intégration.
Vous devez changer l’URL d’origine distante pour votre propre dépôt pour le contrôle de version.
3

Installer les Dépendances

Exécutez la commande suivante dans la racine de votre projet :
npm install
4

Configurer l'environnement

Définissez le API_MODE dans src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Utilisez toujours test_mode pendant le développement pour éviter de traiter des paiements réels.
5

Personnaliser les Composants

Personnalisez les composants du plugin pour répondre à vos besoins :
  • Mettez à jour Authenticated.tsx pour exposer des fonctionnalités pour les utilisateurs avec des clés de licence valides
  • Personnalisez LicenseKeyInput.tsx pour correspondre à vos préférences de design
Le composant Authenticated.tsx est l’endroit où vous ajouterez les fonctionnalités premium de votre plugin qui nécessitent une licence valide.

​
Configuration

1

Configurer l'accès réseau

Le plugin a besoin d’un accès réseau pour communiquer avec le proxy CORS. Ajoutez ce qui suit à votre manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Cela permet au plugin de valider et d’activer les clés de licence en utilisant l’API Dodo Payments.
Le proxy CORS est nécessaire car l’API Dodo Payments ne permet pas d’appels API depuis des applications basées sur le navigateur pour le moment.
2

Configurer le mode API

Dans src/ui/api.ts, configurez le mode API :
const API_MODE = "test_mode"; // or "live_mode"
Passez à live_mode uniquement lorsque vous êtes prêt pour la production et que vous avez testé en profondeur en mode test.

​
Développement

1

Importer le Plugin

Importez le plugin dans Figma en utilisant “Importer le Manifest” depuis l’application de bureau Figma.
Vous devez avoir l’application de bureau Figma installée pour développer et tester des plugins localement.
2

Démarrer le Serveur de Développement

npm run dev
Cela démarre le serveur de développement avec surveillance des fichiers pour des reconstructions automatiques.
Votre plugin sera automatiquement reconstruit lorsque vous apportez des modifications au code source.

​
Commandes de Construction

CommandeDescription
npm run buildConstruire le plugin pour la production
npm run devDémarrer le serveur de développement avec surveillance de fichiers
npm run lintVérifier le style de code et les erreurs
npm run formatFormater le code avec Prettier

​
Intégration de Clé de Licence

L’implémentation d’exemple comprend une validation et une activation complètes de la clé de licence que vous pouvez personnaliser pour votre plugin :
  1. Saisie de l’Utilisateur : Les utilisateurs saisissent leur clé de licence dans l’UI du plugin
  2. Validation : Le plugin valide la clé contre l’API Dodo Payments
  3. Activation : Les clés valides sont activées avec identification de l’utilisateur
  4. Contrôle d’Accès : La fonctionnalité du plugin est déverrouillée pour les détenteurs de clés de licence valides

​
Publication

Une fois que votre plugin est prêt :
  1. Construire pour la production : npm run build
  2. Tester en profondeur à la fois en mode test et en mode live
  3. Suivre les directives de publication des plugins de Figma
  4. Soumettre pour révision via la communauté Figma

​
Dépôt

L’implémentation complète de l’exemple est disponible sur : github.com/dodopayments/dodopayments-figma Utilisez ceci comme point de départ pour construire votre propre plugin Figma premium avec intégration de clé de licence Dodo Payments.