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

Buat Plugin Dasar

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

Kloning Implementasi Contoh

Klon repositori dodopayments-figma dan perbarui manifest.json dengan nama dan ID dari folder plugin yang Anda hasilkan.
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 asal jarak jauh ke repositori Anda sendiri untuk kontrol versi.
3

Instal Dependensi

Jalankan perintah berikut di root proyek Anda:
npm install
4

Konfigurasi Lingkungan

Atur 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

Kustomisasi Komponen

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

​
Konfigurasi

1

Konfigurasi Akses Jaringan

Plugin memerlukan akses jaringan untuk berkomunikasi dengan proxy CORS. Tambahkan yang berikut ke manifest.json:
{
  "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 tidak mengizinkan panggilan API dari aplikasi berbasis browser saat ini.
2

Konfigurasi Mode API

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

​
Pengembangan

1

Impor Plugin

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

Mulai Server Pengembangan

npm run dev
Ini memulai server pengembangan dengan pemantauan file untuk rebuild otomatis.
Plugin Anda akan secara otomatis dibangun kembali ketika Anda melakukan perubahan pada kode sumber.

​
Perintah Build

PerintahDeskripsi
npm run buildMembangun plugin untuk produksi
npm run devMulai server pengembangan dengan pemantauan file
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 uji dan langsung
  3. Ikuti panduan publikasi plugin Figma
  4. Kirim untuk ditinjau melalui Komunitas Figma

​
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.