Komponen Pricing — Tampilkan Paket Harga dengan Tier

Apa itu: Komponen untuk menampilkan satu atau beberapa tier harga dalam format kartu — lengkap dengan daftar fitur, tombol CTA, dan badge "Populer" untuk tier yang direkomendasikan. Kapan pakai: Saat produk atau layanan kamu punya beberapa pilihan paket harga yang perlu dibandingkan side-by-side.

Apa itu Pricing?

Pricing adalah komponen yang dirancang khusus untuk menampilkan tabel harga multi-tier. Setiap tier ditampilkan sebagai kartu tersendiri dengan nama, harga, daftar fitur, dan tombol CTA. Kamu bisa menandai satu tier sebagai "Populer" untuk memberi sinyal visual ke calon pembeli tentang pilihan yang paling direkomendasikan.

Komponen ini bekerja paling baik ketika ada dua atau tiga pilihan — cukup untuk memberi perbandingan, tidak terlalu banyak sehingga membingungkan.

Kapan Pakai Pricing?

• SaaS atau aplikasi — paket Free / Pro / Business
• Kelas atau course online — tier Mandiri / Bimbingan / Mentoring
• Jasa atau layanan — paket Basic / Premium / Custom
• Produk fisik bundled — pilihan ukuran atau jumlah dengan harga berbeda

Properties

Property	Tipe	Default	Penjelasan
Tiers	Daftar tier	—	Daftar paket harga yang ingin ditampilkan

Per Tier

Setiap tier punya field berikut:

Field	Tipe	Default	Penjelasan
Name	Teks	—	Nama tier, mis. "Basic", "Pro", "Enterprise"
Price	Angka	—	Harga dalam satuan currency yang dipilih
Currency	Pilihan	IDR	Mata uang: IDR, USD, EUR
Original Price	Angka (opsional)	—	Harga asli sebelum diskon — ditampilkan dengan strikethrough
Features	Rich text bullet	—	Daftar fitur yang didapat di tier ini
Button Text	Teks	—	Label tombol CTA, mis. "Pilih Paket", "Beli Sekarang"
Button Link	URL	—	URL tujuan saat tombol diklik
Mark as Popular	Toggle	Off	Beri badge "Populer" di tier ini
Custom Colors	Color pickers	—	Override warna khusus untuk tier ini (bg, teks, border)

Card Style

Properti ini mengontrol tampilan visual semua kartu tier secara global.

Property	Tipe	Default	Penjelasan
Columns	Pilihan (1–3)	3	Jumlah kolom kartu per baris
Card Alignment	Pilihan	Center	Posisi kartu horizontal: Left, Center, Right
Content Alignment	Pilihan	Left	Rata konten di dalam kartu
Min Column Width	Pilihan	Auto	Lebar minimum kolom: Auto, 200px, 250px, 300px, 350px
Tier Name Font Weight	Pilihan	Bold	Tebal teks nama tier: Normal, Semi Bold, Bold, Extra Bold
Hover Effect	Toggle	Off	Kartu sedikit naik saat di-hover
Glass Effect	Toggle	Off	Background kartu transparan glassmorphism
Card Background	Color picker	—	Warna background kartu
Price Color	Color picker	—	Warna teks harga
Border Color	Color picker	—	Warna border kartu
Border Width	Angka (px)	—	Ketebalan border
Border Radius	Slider	—	Kelengkungan sudut kartu
Border Style	Pilihan	Solid	Gaya border: Solid, Dashed, Dotted, Double

Memilih Columns

Kolom	Cocok untuk
1	Satu paket harga tunggal — tampil full width, cocok untuk produk standar
2	Dua pilihan tier, mis. "Tanpa Mentor" vs "Dengan Mentor"
3	Tiga tier klasik — Free/Pro/Business atau Basic/Premium/Custom

Popular Style

Seksi ini mengontrol tampilan tier yang di-mark sebagai Populer.

Property	Tipe	Default	Penjelasan
Show Popular Badge	Toggle	Aktif	Tampilkan badge di atas kartu tier populer
Badge Text	Teks	"Populer"	Label badge, bisa diganti "Rekomendasi", "Best Value", dsb.
Popular Border Color	Color picker	—	Warna border khusus untuk kartu populer (highlight visual)
Badge Background	Color picker	—	Warna background badge
Badge Border Color	Color picker	—	Warna border badge
Badge Border Width	Angka (px)	—	Ketebalan border badge
Badge Border Style	Pilihan	Solid	Gaya border badge

Pixel Event

Setiap tombol CTA di tier bisa memicu pixel event saat diklik. Ini berguna untuk tracking konversi di Meta Ads atau platform lain — kamu bisa tahu tier mana yang paling sering diklik sebelum calon pembeli checkout.

Style Universal

Pricing mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — SaaS Pricing 3 Tier (Klasik)

Tiga kartu tier (Free / Pro / Business) dalam Columns 3. Tier Pro ditandai Popular dengan badge "Paling Laku" dan Popular Border Color oranye (#F57C00) agar mudah terlihat. Hover Effect aktif sehingga kartu terangkat saat mouse di atasnya. Teknik anchoring klasik: tier tengah sebagai "Populer" mendorong calon pembeli memilih Pro daripada Free atau Business.

Contoh 2 — Paket Kelas Online (2 Tier, Original Price)

Dua kartu tier (Mandiri dan Bimbingan) dalam Columns 2 dengan Content Alignment Center dan Border Radius 16px. Kedua tier menggunakan Original Price untuk menampilkan harga coret early bird — Mandiri (Rp 297.000, coret Rp 497.000) dan Bimbingan (Rp 597.000, coret Rp 997.000). Tier Bimbingan ditandai Popular untuk mendorong pembelian paket lebih tinggi.

Contoh 3 — Paket Jasa Single Tier (1 Kolom)

Satu kartu paket konsultasi premium dalam Columns 1 dengan Card Alignment Center dan Min Column Width 350px. Daftar fitur lengkap (sesi 1-on-1 60 menit, rekaman, action plan tertulis, follow-up WhatsApp 7 hari) dengan tombol "Booking Sekarang". Tampil full-width dan terpusat — lebih mirip hero card daripada tabel perbandingan.

Tips & Gotchas