Skip to main content
Dodo Payments Figma example एक boilerplate plugin है, जो केवल valid Dodo Payments license key वाले users के लिए अपनी सुविधाएँ अनलॉक करता है। इसे premium Figma plugin के शुरुआती आधार के रूप में उपयोग करें: इसमें license key input, Dodo Payments API के विरुद्ध validation और activation, तथा आपकी premium सुविधाओं के लिए एक component शामिल है।

​
विशेषताएँ

  • License Key Validation: Dodo Payments API के विरुद्ध license keys को validate करता है।
  • License Key Activation: activation limit वाली keys के लिए, instance name के साथ license keys को activate करता है।
  • Environment Support: test mode और live mode दोनों के लिए configurable।
  • TypeScript Support: error handling के साथ पूरी तरह typed implementation।

​
प्रारंभ करना

शुरू करने से पहले, आपके पास Figma desktop app और license keys जारी करने वाला Dodo Payments product होना चाहिए।
1

Create Base Plugin

Figma’s plugin quickstart guide की सहायता से अपना Figma plugin project बनाएँ। Figma एक scaffold generate करता है, जिसमें manifest.json file शामिल होती है।
यह step केवल आपके plugin के लिए unique name और ID प्राप्त करने के लिए आवश्यक है। अगले step में name और ID को example की manifest.json में copy करने और उन्हें अपने Git repository में commit करने के बाद, आप generated files को delete कर सकते हैं।
2

Clone the Example Implementation

dodopayments-figma repository को clone करें:
Cloned manifest.json में, name और id को अपने generated plugin की manifest.json से प्राप्त values से replace करें। यह example integration के लिए आपका starting point है।
Version control के लिए remote origin URL को अपने repository पर बदलें, उदाहरण के लिए git remote set-url origin <your-repository-url> के साथ।
3

Install Dependencies

Project root में चलाएँ:
4

Configure Environment

src/ui/api.ts में API_MODE set करें:
API_MODE API host चुनता है: test_mode के लिए https://test.dodopayments.com, या live_mode के लिए https://live.dodopayments.com।
Real payments को process होने से बचाने के लिए development के दौरान test_mode का उपयोग करें।
5

Customize Components

अपनी आवश्यकताओं के अनुसार src/ui/components/ में plugin components को customize करें:
  • Valid license keys वाले users के लिए functionality expose करने हेतु Authenticated.tsx को update करें।
  • अपने design से match करने के लिए LicenseKeyInput.tsx को customize करें।
Authenticated.tsx में आप अपने plugin की premium सुविधाएँ जोड़ते हैं। Plugin इसे केवल license key के validate या activate होने के बाद दिखाता है।

​
Configuration

1

Configure Network Access

यह उदाहरण हर license key request को https://dodo-payments-proxy.aagarwal9782.workers.dev पर मौजूद CORS proxy के माध्यम से भेजता है, और इसका manifest.json केवल उस proxy तक network access की अनुमति देता है। Proxy उपलब्ध नहीं है, इसलिए Dodo Payments API को सीधे call करें। API किसी भी origin से आने वाली cross-origin requests स्वीकार करता है, जिसमें plugin UI का null origin भी शामिल है।अपने manifest.json में proxy domain को Dodo Payments API hosts से बदलें:
src/ui/api.ts में, fetch(proxyReq) को fetch(req) से validateLicenseKey और activateLicenseKey में बदलें, ताकि हर request सीधे API पर जाए।इससे plugin Dodo Payments API के साथ license keys को validate और activate कर सकता है।
2

Configure API Mode

src/ui/api.ts में API mode configure करें:
live_mode पर तभी switch करें जब आप production के लिए तैयार हों और test mode में पूरी तरह testing कर चुके हों।

​
Development

1

Import Plugin

Figma desktop app में plugin import करें:
  1. कोई design file खोलें।
  2. Figma menu खोलें और Plugins चुनें।
  3. Development के अंतर्गत Import new plugin from manifest… चुनें, फिर project root में मौजूद manifest.json file चुनें।
Manifest dist/ में मौजूद built files से plugin load करता है, इसलिए plugin चलाने से पहले development server शुरू करें या npm run build चलाएँ।
Plugins को locally develop और test करने के लिए Figma desktop app आवश्यक है, क्योंकि Figma plugin code को local files से पढ़ता है।
2

Start Development Server

यह automatic rebuilds के लिए file watching के साथ development server शुरू करता है। Code में बदलाव करने पर यह उसका type-check भी करता है।
Source code में बदलाव करने पर आपका plugin अपने-आप rebuild हो जाता है।

​
Build Commands

Project में ये npm scripts शामिल हैं:

​
License Key Integration

Example implementation plugin को unlock करने से पहले license key की जाँच करता है। आप हर step को customize कर सकते हैं:
  1. User Input: Users plugin UI में अपनी license key enter करते हैं।
  2. Validation: Default रूप से, plugin Validate License (POST /licenses/validate) के साथ key को validate करता है।
  3. Activation: यदि आपकी license keys में activation limit है, तो src/ui/components/Unauthenticated.tsx में needsActivation को true पर set करें। इसके बाद plugin key को validate करने के बजाय Activate License (POST /licenses/activate) के साथ activate करता है और instance का नाम Figma Plugin रखता है।
  4. Access Control: Valid key के लिए, plugin key को figma.clientStorage के साथ save करता है और Authenticated.tsx दिखाता है। अगली बार plugin खुलने पर यह saved key को फिर से validate करता है।

​
Publishing

जब आपका plugin तैयार हो जाए:
  1. Production के लिए build करें: npm run build
  2. Test mode और live mode दोनों में पूरी तरह testing करें।
  3. Figma’s plugin publishing guidelines का पालन करें।
  4. Figma Community के माध्यम से plugin को review के लिए submit करें।

​
Repository

Complete example implementation github.com/dodopayments/dodopayments-figma पर उपलब्ध है। Dodo Payments license keys के साथ premium Figma plugin बनाने के लिए इसे अपने starting point के रूप में उपयोग करें।
अंतिम संशोधन 26 सितंबर 2026