Features
- License Key Validation: Validates license keys against the Dodo Payments API
- License Key Activation: Activates license keys with user identification
- Environment Support: Configurable for both test and live environments
- CORS Proxy: Uses a Cloudflare Worker proxy to handle CORS restrictions
- TypeScript Support: Fully typed implementation with proper error handling
Getting Started
1
Create Base Plugin
Create your own Figma plugin project using Figma’s plugin quickstart guide. This will generate a scaffold with a
manifest.json
file.This step is just to get a unique name and ID for your plugin. You can discard the generated files after committing the ID and name to your git repository in the next step.
2
Clone the Example Implementation
Clone the dodopayments-figma repository and update its This example serves as your starting point for integration.
manifest.json
with the name and ID from your generated plugin folder.You need to change the remote origin URL to your own repository for version control.
3
Install Dependencies
Run the following command in your project root:
4
Configure Environment
Set the
API_MODE
in src/ui/api.ts
:Always use
test_mode
during development to avoid processing real payments.5
Customize Components
Customize the plugin components to match your needs:
- Update
Authenticated.tsx
to expose functionality for users with valid license keys - Customize
LicenseKeyInput.tsx
to match your design preferences
The
Authenticated.tsx
component is where you’ll add your plugin’s premium features that require a valid license.Configuration
1
Configure Network Access
The plugin needs network access to communicate with the CORS proxy. Add the following to your This allows the plugin to validate and activate license keys using the Dodo Payments API.
manifest.json
:The CORS proxy is necessary because Dodo Payments API doesn’t allow API calls from browser-based applications as of now.
2
Configure API Mode
In
src/ui/api.ts
, configure the API mode:Switch to
live_mode
only when you’re ready for production and have tested thoroughly in test mode.Development
1
Import Plugin
Import the plugin into Figma using “Import Manifest” from the Figma desktop app.
You’ll need to have the Figma desktop app installed to develop and test plugins locally.
2
Start Development Server
Your plugin will automatically rebuild when you make changes to the source code.
Build Commands
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 |
License Key Integration
The example implementation includes complete license key validation and activation that you can customize for your plugin:- User Input: Users enter their license key in the plugin UI
- Validation: The plugin validates the key against Dodo Payments API
- Activation: Valid keys are activated with user identification
- Access Control: Plugin functionality is unlocked for valid license holders
Publishing
Once your plugin is ready:- Build for production:
npm run build
- Test thoroughly in both test and live modes
- Follow Figma’s plugin publishing guidelines
- Submit for review through the Figma Community