NETLAYER - Konfigurasi Captive Portal Mikrotik Netlayer

Panduan ini menjelaskan langkah-langkah konfigurasi Captive Portal Mikrotik agar dapat melakukan transaksi penjualan voucher hotspot secara otomatis melalui pembayaran QRIS yang terintegrasi dengan NETLAYER.

Prasyarat

Akun NETLAYER yang aktif dan telah memiliki API Key.
Router Mikrotik dengan fitur Hotspot yang sudah dikonfigurasi.
Akses administrator ke router Mikrotik (via Winbox atau WebFig).
Minimal satu profile hotspot yang telah dibuat di dashboard NETLAYER.

Langkah Konfigurasi

1. Unduh Template Login Page

Unduh template login page Mikrotik Netlayer pada tautan berikut:

https://netlayer.id/zip/template.zip

2. Ekstrak File

Ekstrak file yang telah diunduh ke dalam satu folder pada komputer Anda. Konfigurasi Captive Portal Mikrotik Netlayer

3. Edit Konfigurasi API Key

Cari file script.js di dalam folder files, kemudian buka dengan text editor. Temukan bagian API_KEY dan ganti nilainya dengan API Key milik Anda yang dapat diambil dari dashboard NETLAYER. Konfigurasi Captive Portal Mikrotik Netlayer

4. Unggah ke Mikrotik

Simpan kembali file script.js yang telah diedit, lalu unggah seluruh folder template ke router Mikrotik. Konfigurasi Captive Portal Mikrotik Netlayer

5. Tambahkan Walled Garden IP List

Agar perangkat pengguna dapat terhubung ke server API NETLAYER sebelum melakukan login, tambahkan konfigurasi walled garden pada Mikrotik:

Buka menu IP → Hotspot.
Pilih tab Walled Garden IP List.
Tambahkan entri baru dengan konfigurasi:
- Action: allow
- Dst. Host: netlayer.id dan app.midtrans.com

Konfigurasi Captive Portal Mikrotik Netlayer

Konfigurasi ini memungkinkan pengguna mengakses server API NETLAYER untuk keperluan transaksi sebelum mendapatkan koneksi internet penuh setelah login.

6. Siapkan Profile Hotspot

Tambahkan beberapa profile hotspot pada dashboard NETLAYER Anda. Pastikan setiap profile yang ingin ditampilkan pada halaman login telah diatur dengan opsi Allow Order = Yes. Konfigurasi Captive Portal Mikrotik Netlayer

7. Uji Coba Transaksi

Lakukan uji coba pembelian voucher dengan langkah berikut:

Buat pesanan voucher pada halaman login.
Masukkan nama dan nomor WhatsApp yang aktif.
Klik tombol Bayar Sekarang.
Kode QRIS akan muncul — pindai menggunakan aplikasi pembayaran Anda untuk menyelesaikan pembayaran.

Konfigurasi Captive Portal Mikrotik Netlayer

8. Konfirmasi dan Notifikasi

Setelah pembayaran berhasil dikonfirmasi secara otomatis oleh sistem NETLAYER, notifikasi transaksi akan dikirim melalui WhatsApp yang berisi informasi berikut:

Nominal pembayaran.
Profile hotspot yang dibeli.
Kode voucher yang dapat digunakan untuk login.

Catatan

Pastikan koneksi internet pada router Mikrotik stabil selama proses transaksi berlangsung.
Jika voucher tidak muncul pada halaman login, periksa kembali pengaturan Allow Order pada profile hotspot di dashboard NETLAYER.
Untuk bantuan lebih lanjut, silakan hubungi tim dukungan NETLAYER melalui dashboard.

Keamanan API Key

Pada langkah konfigurasi di atas, API_KEY disimpan di dalam file script.js yang dijalankan pada sisi klien (browser pelanggan). Hal ini berarti API Key dapat dilihat oleh siapa pun yang terhubung ke hotspot, misalnya melalui Developer Tools pada browser atau dengan mengakses langsung file script.js pada router. Obfuscation maupun minifikasi tidak cukup untuk melindungi nilai API Key.

Apabila API Key terekspos, pihak lain berpotensi membuat pesanan voucher tanpa sepengetahuan Anda, mengakses data transaksi dan profile hotspot, serta menyalahgunakan kuota API hingga akun diblokir. Jika hal ini terjadi, Anda perlu melakukan regenerate API Key pada dashboard NETLAYER dan memperbarui file script.js pada seluruh router yang menggunakan template ini.

Rekomendasi: Backend API Sendiri

Untuk penggunaan produksi, disarankan membuat backend API sendiri sebagai perantara antara halaman login dan API NETLAYER. API Key disimpan di sisi server (misalnya melalui environment variable), sehingga tidak pernah terekspos ke browser pelanggan. Halaman login cukup mengirim permintaan ke backend Anda, dan backend yang akan meneruskan permintaan tersebut ke API NETLAYER menggunakan API Key.

Beberapa keuntungan tambahan dari pendekatan ini antara lain:

API Key tidak pernah dikirim ke browser pelanggan.
Dapat ditambahkan validasi tambahan, seperti token sesi, MAC address, atau IP router.
Dapat diterapkan rate limiting untuk mencegah penyalahgunaan.
Seluruh transaksi dapat dicatat untuk keperluan audit.
Lebih fleksibel apabila ingin mengganti provider atau menambah fitur baru.

Apabila tetap menggunakan konfigurasi standar dengan API_KEY di dalam script.js, disarankan menggunakan API Key dengan hak akses terbatas dan melakukan regenerate secara berkala.