मुख्य सामग्री पर जाएं
यह एक उदाहरण कार्यान्वयन और बॉयलरप्लेट है जिसे उन Figma प्लगइन डेवलपर्स के लिए एक प्रारंभिक बिंदु के रूप में डिज़ाइन किया गया है जो Dodo Payments लाइसेंस कुंजी API को अपने प्लगइनों तक पहुँच प्रदान करने के लिए एकीकृत करना चाहते हैं। यह टेम्पलेट पूर्ण लाइसेंस कुंजी सत्यापन और सक्रियण कार्यक्षमता का प्रदर्शन करता है, जो आपको प्रीमियम Figma प्लगइनों को अंतर्निहित लाइसेंसिंग के साथ बनाने के लिए आवश्यक सब कुछ प्रदान करता है।

​
विशेषताएँ

  • लाइसेंस कुंजी सत्यापन: Dodo Payments API के खिलाफ लाइसेंस कुंजी की सत्यापन करता है
  • लाइसेंस कुंजी सक्रियण: उपयोगकर्ता पहचान के साथ लाइसेंस कुंजी को सक्रिय करता है
  • पर्यावरण समर्थन: परीक्षण और लाइव वातावरण के लिए कॉन्फ़िगर करने योग्य
  • CORS प्रॉक्सी: CORS प्रतिबंधों को संभालने के लिए Cloudflare वर्कर प्रॉक्सी का उपयोग करता है
  • TypeScript समर्थन: उचित त्रुटि हैंडलिंग के साथ पूरी तरह से टाइप किया गया कार्यान्वयन

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

1

बेस प्लगइन बनाएं

फिगमा के प्लगइन क्विकस्टार्ट गाइड का उपयोग करके अपना खुद का Figma प्लगइन प्रोजेक्ट बनाएं। यह एक स्कैफोल्ड उत्पन्न करेगा जिसमें manifest.json फ़ाइल होगी।
यह कदम केवल आपके प्लगइन के लिए एक अद्वितीय नाम और ID प्राप्त करने के लिए है। आप अगले चरण में ID और नाम को अपने git रिपॉजिटरी में कमिट करने के बाद उत्पन्न फ़ाइलों को हटा सकते हैं।
2

उदाहरण कार्यान्वयन क्लोन करें

dodopayments-figma रिपॉजिटरी को क्लोन करें और इसके manifest.json को अपने उत्पन्न प्लगइन फ़ोल्डर से नाम और ID के साथ अपडेट करें।
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
यह उदाहरण आपके एकीकरण के लिए प्रारंभिक बिंदु के रूप में कार्य करता है।
आपको संस्करण नियंत्रण के लिए अपने स्वयं के रिपॉजिटरी के लिए रिमोट ओरिजिन URL को बदलना होगा।
3

निर्भरता स्थापित करें

अपने प्रोजेक्ट रूट में निम्नलिखित कमांड चलाएँ:
npm install
4

पर्यावरण कॉन्फ़िगर करें

API_MODE को src/ui/api.ts में सेट करें:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
विकास के दौरान हमेशा test_mode का उपयोग करें ताकि वास्तविक भुगतान की प्रक्रिया से बचा जा सके।
5

घटक अनुकूलित करें

अपने आवश्यकताओं के अनुसार प्लगइन घटकों को अनुकूलित करें:
  • उन उपयोगकर्ताओं के लिए कार्यक्षमता को उजागर करने के लिए Authenticated.tsx को अपडेट करें जिनके पास मान्य लाइसेंस कुंजी है
  • अपने डिज़ाइन प्राथमिकताओं के अनुसार LicenseKeyInput.tsx को अनुकूलित करें
Authenticated.tsx घटक वह जगह है जहाँ आप अपने प्लगइन की प्रीमियम सुविधाएँ जोड़ेंगे जिन्हें मान्य लाइसेंस की आवश्यकता होती है।

​
कॉन्फ़िगरेशन

1

नेटवर्क एक्सेस कॉन्फ़िगर करें

प्लगइन को CORS प्रॉक्सी के साथ संवाद करने के लिए नेटवर्क एक्सेस की आवश्यकता है। अपने manifest.json में निम्नलिखित जोड़ें:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
यह प्लगइन को Dodo Payments API का उपयोग करके लाइसेंस कुंजी को मान्य और सक्रिय करने की अनुमति देता है।
CORS प्रॉक्सी आवश्यक है क्योंकि Dodo Payments API वर्तमान में ब्राउज़र-आधारित अनुप्रयोगों से API कॉल की अनुमति नहीं देता है।
2

API मोड कॉन्फ़िगर करें

src/ui/api.ts में, API मोड को कॉन्फ़िगर करें:
const API_MODE = "test_mode"; // or "live_mode"
केवल तब live_mode पर स्विच करें जब आप उत्पादन के लिए तैयार हों और परीक्षण मोड में पूरी तरह से परीक्षण कर चुके हों।

​
विकास

1

प्लगइन आयात करें

Figma डेस्कटॉप ऐप से “आयात मैनिफेस्ट” का उपयोग करके प्लगइन को Figma में आयात करें।
आपको स्थानीय रूप से प्लगइनों को विकसित और परीक्षण करने के लिए Figma डेस्कटॉप ऐप स्थापित करना होगा।
2

विकास सर्वर प्रारंभ करें

npm run dev
यह स्वचालित पुनर्निर्माण के लिए फ़ाइल देखना के साथ विकास सर्वर शुरू करता है।
जब आप स्रोत कोड में परिवर्तन करते हैं तो आपका प्लगइन स्वचालित रूप से पुनर्निर्मित होगा।

​
निर्माण आदेश

आदेशविवरण
npm run buildउत्पादन के लिए प्लगइन का निर्माण
npm run devफ़ाइल देखना के साथ विकास सर्वर प्रारंभ करें
npm run lintकोड शैली और त्रुटियों की जांच करें
npm run formatPrettier के साथ कोड को स्वरूपित करें

​
लाइसेंस कुंजी एकीकरण

उदाहरण कार्यान्वयन में पूर्ण लाइसेंस कुंजी सत्यापन और सक्रियण शामिल है जिसे आप अपने प्लगइन के लिए अनुकूलित कर सकते हैं:
  1. उपयोगकर्ता इनपुट: उपयोगकर्ता अपने लाइसेंस कुंजी को प्लगइन UI में दर्ज करते हैं
  2. सत्यापन: प्लगइन कुंजी को Dodo Payments API के खिलाफ सत्यापित करता है
  3. सक्रियण: मान्य कुंजी उपयोगकर्ता पहचान के साथ सक्रिय होती हैं
  4. एक्सेस नियंत्रण: मान्य लाइसेंस धारकों के लिए प्लगइन कार्यक्षमता अनलॉक होती है

​
प्रकाशन

जब आपका प्लगइन तैयार हो:
  1. उत्पादन के लिए निर्माण करें: npm run build
  2. परीक्षण मोड और लाइव मोड दोनों में पूरी तरह से परीक्षण करें
  3. Figma के प्लगइन प्रकाशन दिशानिर्देशों का पालन करें
  4. Figma समुदाय के माध्यम से समीक्षा के लिए सबमिट करें

​
रिपॉजिटरी

पूर्ण उदाहरण कार्यान्वयन उपलब्ध है: github.com/dodopayments/dodopayments-figma इसे Dodo Payments लाइसेंस कुंजी एकीकरण के साथ अपना खुद का प्रीमियम Figma प्लगइन बनाने के लिए प्रारंभिक बिंदु के रूप में उपयोग करें.