LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Launch Fintech

Landing peluncuran fintech: kalkulator biaya yang dijalankan seperti perintah konsol

Versi 1.0.0Diperbarui 27 September 202613 screenshot

Hero, hasil kalkulator, dan stand QRIS 3DGeser omzet di hero dan potongan bulanan langsung muncul sebagai angka besar dengan pembanding fiktif; di kanan, stand QRIS enamel biru di piringan putar.1 / 13
Hero, hasil kalkulator, dan stand QRIS 3D1 / 13
Launch Fintech — Hero, hasil kalkulator, dan stand QRIS 3D

Geser omzet di hero dan potongan bulanan langsung muncul sebagai angka besar dengan pembanding fiktif; di kanan, stand QRIS enamel biru di piringan putar.

Ringkasan

Landing page daftar tunggu untuk produk fintech atau SaaS pembayaran, dengan kalkulator biaya gaya REPL yang sudah memakai aturan MDR QRIS Bank Indonesia 1 Oktober 2026. Ada contoh API dengan sandbox tiruan, harga, changelog, dan formulir yang berakhir di WhatsApp. Statis, tanpa server.

Masalah yang diselesaikan

Calon pengguna fintech bertanya satu hal sebelum mendaftar: dipotong berapa per bulan? Kebanyakan landing hanya menulis "biaya rendah" lalu menyuruh chat sales. Developer yang akan memasang juga ingin melihat bentuk API-nya, bukan brosur. Hasilnya daftar tunggu sepi dan tim sales menjawab pertanyaan yang sama berulang kali. Ditambah lagi, aturan MDR QRIS berubah 1 Oktober 2026 dan hitungan lama sudah tidak berlaku.

Cocok untuk
  • Startup fintech dan SaaS pembayaran yang menyiapkan peluncuran
  • Agensi yang membuat landing untuk klien payment gateway atau aplikasi tagihan
  • Developer yang menjual API kasir atau invoice ke UMKM
  • Tim produk yang butuh halaman daftar tunggu minggu ini
Hasil yang kamu dapat
  • Pengunjung menghitung potongan bulanan sendiri, lengkap dengan PPN 11% dan pembanding
  • Aturan MDR QRIS BI terbaru sudah masuk hitungan, termasuk batas usaha mikro Rp 500.000
  • Developer mencoba API di sandbox tiruan: balasan 201 atau 422, tanpa server
  • Pendaftar masuk ke WhatsApp admin dengan data lengkap, tidak ada database yang perlu dijaga
  • Slot izin berlabel jelas supaya Anda tidak tanpa sengaja menayangkan klaim izin palsu
Bahasa desain
Spline Sans Mono + Inter · konsol kerja, presisi, tenang, teknis

Fitur

Kalkulator biaya REPL

  • Hasil kalkulator langsung di hero: satu slider omzet, potongan bulanan sebagai angka besar, tautan membuka rinciannya di konsol
  • Perintah bandingkan(volume, transaksi, qris=%, va=%, umi=ya); paham 45jt, 800rb, 45.000.000
  • Pengatur geser yang menulis ulang perintah, tiga contoh usaha sekali klik
  • Tabel QRIS, VA, e-wallet, biaya tetap, PPN 11%, total, persen volume
  • Ringkasan selisih per bulan dan per tahun; bila pesaing lebih murah, ditulis apa adanya
  • Galat sintaks berbahasa Indonesia, riwayat 3 perintah terakhir

Isi halaman

  • Tur fitur 4 langkah dengan pratinjau UI produk (tagihan, halaman bayar, pengingat WA, rekap)
  • Tabel integrasi: saring kategori, cari, sembunyikan yang belum tersedia, keadaan kosong
  • Keamanan: praktik nyata template + slot izin PJP/mitra/bank berlabel contoh
  • Dua paket dengan sakelar bulanan/tahunan dan tabel biaya per metode
  • Contoh kode cURL, Node.js, PHP yang mengikuti isian, tombol Salin, sandbox tiruan
  • Ulasan berlabel contoh, changelog bersaring tag, FAQ spesifik fintech, privasi, 404

Daftar tunggu

  • Validasi nama, email, WA 08/628/+628 (10 sampai 13 angka), jenis usaha, volume, persetujuan
  • Pesan galat Indonesia, aria-invalid, fokus ke kolom salah pertama
  • Tersimpan di browser, pesan WhatsApp terisi otomatis, bisa diubah atau dihapus

3D dan kualitas

  • Stand QRIS 3D enamel biru dan akrilik berwarna di piringan putar: berputar mengikuti kursor atau kemiringan ponsel, sisi belakangnya tagihan LUNAS yang digambar tajam (kanvas 2x, anisotropi maksimum)
  • Poster depan/belakang tanpa WebGL, satu bingkai diam untuk gerak dikurangi
  • Penurun resolusi otomatis; diuji >= 45 fps di 390 px dengan CPU 4x lebih lambat saat stand berputar
  • Diuji di 320, 390, 768, 1440 px: tanpa geser samping, target sentuh 44 px, fokus terlihat, kontras AA

Animasi 3D

Konsep

Stand QRIS akrilik di meja kasir yang berdiri di piringan putar: depan stiker QRIS merchant, belakang tagihan Rp 1.250.000 yang dicap lunas lewat scan itu. Kursor memutar stand, tombol memutarnya 180° seperti kasir menghadapkannya ke pembeli. Benda yang dikenal setiap UMKM, bukan bentuk abstrak.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster JPG sisi QRIS; tombol Putar stand menukar ke poster sisi tagihan. Dengan prefers-reduced-motion stand dirender satu bingkai diam dan berputar tanpa animasi.

Screenshot

  1. 01Hero, hasil kalkulator, dan stand QRIS 3DGeser omzet di hero dan potongan bulanan langsung muncul sebagai angka besar dengan pembanding fiktif; di kanan, stand QRIS enamel biru di piringan putar.desktop
  2. 02Stand diputar ke tagihanKlik stand atau tombol Putar stand: di baliknya tagihan Rp 1.250.000 dengan status LUNAS lewat QRIS, waktu bayar, dan rincian item, digambar tajam di kanvas 2x.desktop
  3. 03Kalkulator biaya REPLbandingkan(45jt, 620) mencetak aturan QRIS BI, tabel biaya tiga penyedia dengan PPN, dan selisih per tahun.desktop
  4. 04Tur fiturEmpat langkah dari tagihan dibuat sampai lunas; di sini jadwal pengingat WhatsApp yang batal sendiri saat lunas.desktop
  5. 05Keamanan dan slot izinPraktik yang benar-benar dilakukan template di kiri, slot izin berlabel contoh fiktif di kanan.desktop
  6. 06HargaDua paket dengan sakelar bulanan/tahunan dan tabel biaya per metode pembayaran.desktop
  7. 07API dan sandbox tiruanContoh Node.js mengikuti isian; sandbox membalas 201 dengan pay_url tanpa permintaan jaringan.desktop
  8. 08Validasi daftar tungguEmail dan nomor WhatsApp yang salah ditolak dengan pesan Indonesia yang menjelaskan formatnya.desktop
  9. 09Hero di ponselJudul dulu, lalu stand QRIS 3D yang berputar dengan satu ketukan; hasil kalkulator menyusul di bawah tombol.mobile
  10. 10Kalkulator di ponselTabel keluaran berubah jadi kartu per penyedia supaya tidak perlu geser samping.mobile
  11. 11Cari integrasiPencarian dan saringan kategori; tanpa hasil, muncul tombol minta integrasi lewat WhatsApp.mobile
  12. 12Siap kirim ke WhatsAppRingkasan data pendaftar dan tombol yang membuka WhatsApp admin dengan pesan terisi.mobile
  13. 13Menu pathSidebar path menjadi menu berlabel di ponsel; Escape atau memilih path menutupnya.mobile

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka folder di terminal.

    npm install

  2. Isi nomor WhatsApp

    Salin .env.example menjadi .env lalu isi VITE_WA_ADMIN_NUMBER (format 62812..., tanpa +).

    cp .env.example .env

  3. Coba di komputer

    Buka http://localhost:4413.

    npm run dev

  4. Build dan unggah

    Unggah isi folder dist/ ke hosting statis. Panduan Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.

    npm run build

Isi Paket

  • index.html, privasi.html, 404.html: tiga halaman
  • src/: logika kalkulator (fees.ts), validasi, sandbox API, data isi (data.ts), stand QRIS 3D (three/stand.ts), gaya
  • public/: favicon dan poster stand depan/belakang
  • tests/: uji logika Vitest, e2e Playwright, skrip tangkapan layar dan sampul
  • docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
  • design/: sistem desain, riset, catatan iterasi
  • LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama merek dan semua teks langsung di index.html
  • Tarif Anda dan pesaing di satu array PROVIDERS
  • Integrasi, changelog, contoh kode, dan domain API di src/data.ts
  • Warna aksen lewat variabel CSS
  • Isi stand 3D (merchant, nomor tagihan, item, nominal) di dua fungsi gambar

FAQ

Apakah template ini sudah bisa menerima pembayaran?

Tidak. Ini landing page peluncuran dan daftar tunggu. Contoh API dan sandbox di halaman hanya tiruan di browser untuk menunjukkan bentuk API produk Anda.

Angka pesaing di kalkulator itu nyata?

Tidak. Pesaing A dan B fiktif dan diberi label di setiap keluaran. Anda bisa menggantinya dengan tarif publik pesaing asli beserta sumbernya, atau menghapusnya dan hanya menampilkan tarif Anda.

Aturan QRIS di kalkulator dari mana?

Dari siaran pers Bank Indonesia 17 Agustus 2026: MDR QRIS 0% untuk transaksi sampai Rp 100.000 di semua merchant mulai 1 Oktober 2026, dan tetap 0% sampai Rp 500.000 untuk usaha mikro. Batasnya ada di satu konstanta, mudah diubah bila aturan berganti.

Data pendaftar disimpan di mana?

Di browser pengunjung sampai ia menekan kirim ke WhatsApp. Tidak ada database. CUSTOMIZE.md menjelaskan cara menyambungkan ke Google Sheets bila Anda ingin menyimpan otomatis.

Bagaimana dengan bagian izin OJK/BI?

Isinya slot seperti [NOMOR IZIN PJP] dengan label contoh. Isi hanya dengan izin yang sudah terbit, atau hapus blok itu. Panduannya di CUSTOMIZE.md.

Bisa dipakai untuk produk non-fintech?

Bisa, terutama SaaS untuk developer. Ganti isi kalkulator di src/fees.ts dengan model harga Anda; kerangka konsol, API, changelog, dan daftar tunggu tetap relevan.

Changelog

  1. v1.0.0
    26 September 2026
    • Rilis pertama
Launch Fintech
Rp 449.000
Demo ↗