Langsung ke konten utama
Ini adalah implementasi contoh dan boilerplate yang dirancang sebagai titik awal bagi pengembang plugin Figma yang ingin mengintegrasikan API kunci lisensi Dodo Payments untuk memberikan akses ke plugin mereka. Template ini menunjukkan fungsionalitas lengkap untuk validasi dan aktivasi kunci lisensi, menyediakan semua yang Anda butuhkan untuk membuat plugin Figma premium dengan lisensi bawaan.

​
Fitur

  • Validasi Kunci Lisensi: Memvalidasi kunci lisensi terhadap API Dodo Payments
  • Aktivasi Kunci Lisensi: Mengaktifkan kunci lisensi dengan identifikasi pengguna
  • Dukungan Lingkungan: Dapat dikonfigurasi untuk lingkungan uji dan langsung
  • Proxy CORS: Menggunakan proxy Cloudflare Worker untuk menangani pembatasan CORS
  • Dukungan TypeScript: Implementasi sepenuhnya bertipe dengan penanganan kesalahan yang tepat

​
Memulai

1

Create Base Plugin

Buat proyek plugin Figma Anda sendiri menggunakan panduan cepat pembuatan plugin Figma. Ini akan menghasilkan kerangka kerja dengan file manifest.json.
Langkah ini hanya untuk mendapatkan nama dan ID unik untuk plugin Anda. Anda dapat membuang berkas yang dihasilkan setelah mengirimkan ID dan nama ke repositori git Anda pada langkah berikutnya.
2

Clone the Example Implementation

Clone repositori dodopayments-figma dan perbarui manifest.json dengan nama dan ID dari folder plugin yang Anda buat.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
Contoh ini berfungsi sebagai titik awal Anda untuk integrasi.
Anda perlu mengubah URL origin remote ke repositori Anda sendiri untuk kontrol versi.
3

Install Dependencies

Jalankan perintah berikut di root proyek Anda:
npm install
4

Configure Environment

Tetapkan API_MODE di src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
Selalu gunakan test_mode selama pengembangan untuk menghindari pemrosesan pembayaran nyata.
5

Customize Components

Sesuaikan komponen plugin agar cocok dengan kebutuhan Anda:
  • Perbarui Authenticated.tsx untuk mengekspos fungsionalitas bagi pengguna dengan kunci lisensi yang valid
  • Sesuaikan LicenseKeyInput.tsx agar sesuai preferensi desain Anda
Komponen Authenticated.tsx adalah tempat Anda akan menambahkan fitur premium plugin yang memerlukan lisensi valid.

​
Konfigurasi

1

Configure Network Access

Plugin membutuhkan akses jaringan untuk berkomunikasi dengan proxy CORS. Tambahkan berikut ke manifest.json Anda:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
Ini memungkinkan plugin untuk memvalidasi dan mengaktifkan kunci lisensi menggunakan API Dodo Payments.
Proxy CORS diperlukan karena API Dodo Payments saat ini tidak mengizinkan panggilan API dari aplikasi berbasis browser.
2

Configure API Mode

Di src/ui/api.ts, konfigurasikan mode API:
const API_MODE = "test_mode"; // or "live_mode"
Beralih ke live_mode hanya saat Anda siap untuk produksi dan telah menguji secara menyeluruh dalam mode pengujian.

​
Pengembangan

1

Import Plugin

Impor plugin ke Figma menggunakan “Import Manifest” dari aplikasi desktop Figma.
Anda perlu memasang aplikasi desktop Figma untuk mengembangkan dan menguji plugin secara lokal.
2

Start Development Server

npm run dev
Ini memulai server pengembangan dengan pemantauan file untuk rebuild otomatis.
Plugin Anda akan membangun ulang secara otomatis ketika Anda membuat perubahan pada kode sumber.

​
Perintah Build

CommandDescription
npm run buildBangun plugin untuk produksi
npm run devMulai server pengembangan dengan pemantauan berkas
npm run lintPeriksa gaya kode dan kesalahan
npm run formatFormat kode dengan Prettier

​
Integrasi Kunci Lisensi

Implementasi contoh mencakup validasi dan aktivasi kunci lisensi lengkap yang dapat Anda kustomisasi untuk plugin Anda:
  1. Input Pengguna: Pengguna memasukkan kunci lisensi mereka di UI plugin
  2. Validasi: Plugin memvalidasi kunci terhadap API Dodo Payments
  3. Aktivasi: Kunci yang valid diaktifkan dengan identifikasi pengguna
  4. Kontrol Akses: Fungsionalitas plugin dibuka untuk pemegang lisensi yang valid

​
Publikasi

Setelah plugin Anda siap:
  1. Bangun untuk produksi: npm run build
  2. Uji secara menyeluruh dalam mode pengujian dan langsung
  3. Ikuti panduan publikasi plugin Figma
  4. Ajukan untuk ditinjau melalui Figma Community

​
Repositori

Implementasi contoh lengkap tersedia di: github.com/dodopayments/dodopayments-figma Gunakan ini sebagai titik awal Anda untuk membangun plugin Figma premium Anda sendiri dengan integrasi kunci lisensi Dodo Payments.