Skip to main content
Contoh Figma Dodo Payments adalah plugin boilerplate yang hanya membuka fiturnya bagi pengguna dengan kunci lisensi Dodo Payments yang valid. Gunakan ini sebagai titik awal untuk plugin Figma premium: contoh ini mencakup input kunci lisensi, validasi dan aktivasi melalui Dodo Payments API, serta komponen untuk fitur premium Anda.

​
Fitur

  • Validasi License Key: Memvalidasi license key terhadap API Dodo Payments.
  • Aktivasi License Key: Mengaktifkan license key dengan nama instance, untuk key yang memiliki batas aktivasi.
  • Dukungan TypeScript: Implementasi yang sepenuhnya memiliki tipe dengan penanganan error.

​
Memulai

Sebelum memulai, Anda memerlukan aplikasi desktop Figma dan produk Dodo Payments yang menerbitkan kunci lisensi.
1

Create Base Plugin

Buat proyek plugin Figma Anda sendiri dengan panduan quickstart plugin Figma. Figma membuat scaffold dengan file manifest.json.
Anda hanya memerlukan langkah ini untuk mendapatkan nama dan ID unik bagi plugin Anda. Setelah menyalin nama dan ID ke manifest.json milik contoh pada langkah berikutnya dan melakukan commit ke repositori Git, Anda dapat menghapus file yang dibuat.
2

Clone the Example Implementation

Clone repositori dodopayments-figma:
Di dalam manifest.json yang telah di-clone, ganti name dan id dengan nilai dari manifest.json plugin yang Anda buat. Contoh ini adalah titik awal integrasi Anda.
Ubah URL remote origin ke repositori Anda sendiri untuk version control, misalnya dengan git remote set-url origin <your-repository-url>.
3

Install Dependencies

Di root proyek, jalankan:
4

Configure Environment

Atur API_MODE di src/ui/api.ts:
API_MODE memilih host API: https://test.dodopayments.com untuk test_mode, atau https://live.dodopayments.com untuk live_mode.
Gunakan test_mode selama pengembangan untuk menghindari pemrosesan pembayaran nyata.
5

Customize Components

Sesuaikan komponen plugin di src/ui/components/ dengan kebutuhan Anda:
  • Perbarui Authenticated.tsx untuk menyediakan fungsionalitas bagi pengguna dengan kunci lisensi yang valid.
  • Sesuaikan LicenseKeyInput.tsx agar sesuai dengan desain Anda.
Authenticated.tsx adalah tempat Anda menambahkan fitur premium plugin. Plugin hanya menampilkannya setelah kunci lisensi divalidasi atau diaktifkan.

​
Konfigurasi

1

Configure Network Access

Contoh ini mengirim setiap permintaan license key melalui proxy CORS di https://dodo-payments-proxy.aagarwal9782.workers.dev, dan manifest.json hanya mengizinkan akses jaringan ke proxy tersebut. Proxy tidak tersedia, jadi panggil API Dodo Payments secara langsung. API menerima permintaan lintas origin dari origin mana pun, termasuk origin null dari UI plugin.Di manifest.json Anda, ganti domain proxy dengan host API Dodo Payments:
Di src/ui/api.ts, ganti fetch(proxyReq) dengan fetch(req) di validateLicenseKey dan activateLicenseKey, sehingga setiap permintaan dikirim langsung ke API.Hal ini memungkinkan plugin memvalidasi dan mengaktifkan license key dengan API Dodo Payments.
2

Configure API Mode

Di src/ui/api.ts, konfigurasi mode API:
Beralih ke live_mode hanya jika Anda siap untuk production dan telah melakukan pengujian menyeluruh dalam test mode.

​
Development

1

Import Plugin

Impor plugin ke aplikasi desktop Figma:
  1. Buka file desain.
  2. Buka menu Figma dan pilih Plugins.
  3. Di bagian Development, pilih Import new plugin from manifest…, lalu pilih file manifest.json di root project.
Manifest memuat plugin dari file hasil build di dist/, jadi jalankan development server atau npm run build sebelum menjalankan plugin.
Anda memerlukan aplikasi desktop Figma untuk mengembangkan dan menguji plugin secara lokal, karena Figma membaca kode plugin dari file lokal.
2

Start Development Server

Ini memulai development server dengan pemantauan file untuk rebuild otomatis. Perintah ini juga memeriksa tipe kode saat Anda mengubahnya.
Plugin Anda otomatis melakukan rebuild saat Anda mengubah source code.

​
Perintah Build

Project ini menyertakan script npm berikut:

​
Integrasi License Key

Implementasi contoh memeriksa license key sebelum membuka akses ke plugin. Anda dapat menyesuaikan setiap langkah:
  1. Input Pengguna: Pengguna memasukkan license key mereka di UI plugin.
  2. Validasi: Secara default, plugin memvalidasi key dengan Validate License (POST /licenses/validate).
  3. Aktivasi: Jika license key Anda memiliki batas aktivasi, atur needsActivation ke true di src/ui/components/Unauthenticated.tsx. Plugin kemudian mengaktifkan key dengan Activate License (POST /licenses/activate), bukan memvalidasinya, dan memberi nama instance Figma Plugin.
  4. Kontrol Akses: Untuk key yang valid, plugin menyimpan key dengan figma.clientStorage dan menampilkan Authenticated.tsx. Saat plugin dibuka kembali, plugin memvalidasi ulang key yang tersimpan.

​
Publikasi

Saat plugin Anda siap:
  1. Build untuk production: npm run build
  2. Lakukan pengujian menyeluruh dalam test mode dan live mode.
  3. Ikuti panduan publikasi plugin Figma.
  4. Kirim plugin untuk ditinjau melalui Figma Community.

​
Repositori

Implementasi contoh lengkap tersedia di github.com/dodopayments/dodopayments-figma. Gunakan ini sebagai titik awal Anda untuk membuat plugin Figma premium dengan kunci lisensi Dodo Payments.
Terakhir diubah pada 26 September 2026