264 lines
12 KiB
Markdown
264 lines
12 KiB
Markdown
# Core Midtrans CIFO UI/UX Specification
|
||
|
||
Purpose
|
||
- Improve legibility and contrast for older users by strengthening color, typography, and separators across Checkout flows (QRIS, GoPay, Convenience Store, Bank Transfer).
|
||
- Establish clear theme tokens so implementation stays consistent across components.
|
||
|
||
Change Log
|
||
- 2025-11-10: Initial draft focused on contrast, typography, and card/divider clarity.
|
||
|
||
Theme Foundations
|
||
- Color Roles (recommended hex values):
|
||
- Page background: `#F7FAFC` (very light slate)
|
||
- Surface/background (cards, panels): `#FFFFFF`
|
||
- Text primary: `#0B1020` (near-black for high contrast)
|
||
- Text secondary: `#374151` (medium slate; still readable)
|
||
- Border default: `#94A3B8` (slate 400)
|
||
- Border strong: `#64748B` (slate 500)
|
||
- Accent/primary: `#2563EB` (blue 600)
|
||
- Success: `#16A34A` (green 600)
|
||
- Danger: `#DC2626` (red 600)
|
||
- Warning: `#D97706` (amber 600)
|
||
- Info: `#0EA5E9` (sky 500)
|
||
- Focus and States:
|
||
- Focus ring color: `#2563EB`
|
||
- Focus ring width: `3px`
|
||
- Hover/active states should increase contrast by at least one shade (e.g., blue 600 → blue 700 on hover).
|
||
- Typography:
|
||
- Font stack (sans): `Inter, Segoe UI, system-ui, -apple-system, Roboto, Noto Sans, Arial, sans-serif`
|
||
- Base body size: `16px` minimum; labels `15px`; buttons `16px`
|
||
- Headings: `H4 20px`, `H3 24px`, `H2 28px` (line-height ~1.3)
|
||
- Body line-height: `1.5` for readability
|
||
- Avoid ultra-light weights; prefer `400–600` for body/labels
|
||
- Separators and Borders:
|
||
- Default divider: `1.5px` `#94A3B8`
|
||
- Strong divider: `2px` `#64748B` for section breaks and card boundaries
|
||
- Cards: visible 2px border, subtle shadow `0 1px 2px rgba(0,0,0,0.08)`
|
||
- Spacing Scale (base):
|
||
- `4px` units; common spacing: `8/12/16/24/32px`
|
||
- Minimum interior padding for cards: `16–24px`
|
||
|
||
Accessibility Standards
|
||
- Contrast:
|
||
- Normal text contrast ≥ `4.5:1`; large text (≥18px) ≥ `3:1`
|
||
- Verify accent on white and on light surfaces meets ratios
|
||
- Touch Targets:
|
||
- Minimum hit area: `44x44px` for interactive elements
|
||
- Minimum tap spacing: `8px` around grouped actions
|
||
- Focus & Keyboard:
|
||
- Always-visible focus outline with `3px` ring in accent color
|
||
- Skip links available on long forms
|
||
- Motion & Feedback:
|
||
- Respect reduced motion; avoid aggressive animations
|
||
- Provide textual or icon feedback in addition to color changes
|
||
|
||
Component Guidance
|
||
- Cards/Panels:
|
||
- Use strong border (`2px #64748B`) for outer frame when content density is high
|
||
- Title uses `H4/H3` with primary text color; subtitle uses secondary
|
||
- Interior dividers use default border (`1.5px #94A3B8`)
|
||
- Buttons:
|
||
- Primary: solid `#2563EB` with white text; hover `#1D4ED8`
|
||
- Secondary: outline with strong border and primary text
|
||
- Disabled: `#CBD5E1` background, `#64748B` text; maintain contrast
|
||
- Focus: `3px` accent ring outside button
|
||
- Inputs:
|
||
- Label size `15–16px` and primary text color; never rely on placeholder as label
|
||
- Field border default; on focus switch to strong border and accent ring
|
||
- Error state uses danger color and text hint; icon optional
|
||
- Lists/Selection (e.g., store selection):
|
||
- Row height ≥ `48px`; radio/checkbox minimum `24px`
|
||
- Selected state uses strong border and light accent background (`blue-50`)
|
||
|
||
Implementation Notes
|
||
- CSS Variables (define once):
|
||
```css
|
||
:root {
|
||
--color-bg-page: #F7FAFC;
|
||
--color-bg-surface: #FFFFFF;
|
||
--color-text-primary: #0B1020;
|
||
--color-text-secondary: #374151;
|
||
--color-border-default: #94A3B8;
|
||
--color-border-strong: #64748B;
|
||
--color-accent: #2563EB;
|
||
--color-success: #16A34A;
|
||
--color-danger: #DC2626;
|
||
--color-warning: #D97706;
|
||
--color-info: #0EA5E9;
|
||
--focus-ring-width: 3px;
|
||
--focus-ring-color: #2563EB;
|
||
--shadow-card: 0 1px 2px rgba(0,0,0,0.08);
|
||
--border-width-default: 1.5px;
|
||
--border-width-strong: 2px;
|
||
--font-family-sans: Inter, Segoe UI, system-ui, -apple-system, Roboto, Noto Sans, Arial, sans-serif;
|
||
--font-size-body: 16px;
|
||
--font-size-label: 15px;
|
||
--font-size-button: 16px;
|
||
--font-size-h4: 20px;
|
||
--font-size-h3: 24px;
|
||
--font-size-h2: 28px;
|
||
--line-height-body: 1.5;
|
||
}
|
||
```
|
||
- Tailwind Theme (high-level):
|
||
- Map CSS variables to custom colors via CSS-in-JS or add a custom palette in `tailwind.config.*` aligned to the hex values above
|
||
- Increase `ringWidth` default to `3`, add `ringColor` for focus, and define `borderWidth` scale with `1.5` and `2`
|
||
- Component Application:
|
||
- Replace `border-gray-200/300` with `border-[#94A3B8]` for dividers
|
||
- Use `border-[2px]` + `border-[#64748B]` for card frames when needed
|
||
- Set `text-[#0B1020]` as default text and avoid pure black for softer rendering
|
||
|
||
Validation Checklist
|
||
- Body text ≥16px and headings per spec
|
||
- Divider visibility validated on standard laptop and low-contrast displays
|
||
- All critical actions meet contrast and focus outline requirements
|
||
- Component states (hover, active, disabled, error) meet color and contrast standards
|
||
|
||
Instruksi Langkah Pembayaran
|
||
- Tujuan: Menyajikan cara bayar yang jelas tanpa Step Wizard. Fokus pada daftar langkah ringkas untuk tiap metode (QRIS, GoPay, Transfer Bank via Mobile/Internet Banking/ATM, Convenience Store).
|
||
- Prinsip Penyajian:
|
||
- Judul panel: "Cara Bayar" + nama metode/bank (mis. "Cara Bayar: BCA Mobile", "Cara Bayar: ATM BNI", "Cara Bayar: QRIS").
|
||
- Gunakan daftar bernomor (1., 2., 3.) dengan jarak antar langkah `12–16px` dan body `16–18px`.
|
||
- Kalimat singkat, langsung, maksimal ±100 karakter per langkah.
|
||
- Gunakan teks primer `#0B1020`; hindari abu-abu pucat untuk keterbacaan.
|
||
- Divider opsional antar kelompok langkah memakai border default `#94A3B8`.
|
||
- Ikon langkah opsional; jangan menggantikan teks instruksi.
|
||
|
||
Pola per Metode
|
||
- QRIS
|
||
- 1. Buka aplikasi e-wallet/mbanking yang mendukung QRIS.
|
||
- 2. Arahkan kamera ke QR di layar.
|
||
- 3. Periksa detail pembayaran dan konfirmasi.
|
||
- 4. Selesai. Simpan bukti transaksi.
|
||
- Catatan: tampilkan countdown kedaluwarsa dan state "QR kedaluwarsa" dengan aksi "Buat Ulang" jika diperlukan.
|
||
|
||
- GoPay
|
||
- 1. Ketuk tombol "Buka GoPay" (atau buka aplikasi GoPay manual).
|
||
- 2. Periksa detail pembayaran.
|
||
- 3. Konfirmasi dan selesaikan pembayaran.
|
||
- 4. Simpan bukti transaksi.
|
||
|
||
- Transfer Bank via Mobile Banking (contoh umum)
|
||
- 1. Buka aplikasi mobile banking dan login.
|
||
- 2. Pilih menu "Transfer" → "Virtual Account".
|
||
- 3. Masukkan nomor VA dan nominal.
|
||
- 4. Periksa detail, konfirmasi dengan PIN/OTP.
|
||
- 5. Simpan bukti transaksi.
|
||
|
||
- Transfer Bank via Internet Banking (contoh umum)
|
||
- 1. Buka situs internet banking dan login.
|
||
- 2. Pilih menu "Transfer" → "Virtual Account".
|
||
- 3. Masukkan nomor VA dan nominal.
|
||
- 4. Periksa detail, konfirmasi dengan OTP.
|
||
- 5. Simpan bukti transaksi.
|
||
|
||
- Transfer Bank via ATM (contoh umum)
|
||
- 1. Kunjungi ATM dan masukkan kartu, pilih bahasa.
|
||
- 2. Pilih menu "Transfer" → "Virtual Account".
|
||
- 3. Masukkan nomor VA dan nominal.
|
||
- 4. Periksa detail, konfirmasi.
|
||
- 5. Ambil dan simpan struk transaksi.
|
||
|
||
- Convenience Store (Alfamart/Indomaret)
|
||
- 1. Kunjungi toko yang dipilih (Alfamart/Indomaret).
|
||
- 2. Tunjukkan "Kode Pembayaran" kepada kasir.
|
||
- 3. Lakukan pembayaran sebelum kedaluwarsa.
|
||
- 4. Simpan struk. Kunjungi halaman "Cek Status Pembayaran" jika diperlukan.
|
||
|
||
Copywriting Baku
|
||
- Gunakan label konsisten: "Kode Pembayaran", "Salin Kode", "Cek Status Pembayaran", "Buka GoPay", "QRIS", "Kedaluwarsa dalam", "Buat Ulang".
|
||
- Bahasa Indonesia, kalimat aktif, hindari istilah teknis berlebihan.
|
||
- Pastikan penulisan brand dan bank sesuai pedoman resmi.
|
||
|
||
Aksesibilitas & Lansia
|
||
- Body `16–18px`, line-height `1.5`; jarak antar langkah `12–16px`.
|
||
- Kontras AA untuk teks dan divider; fokus `ring 3px` selalu terlihat.
|
||
- Comfort Mode opsional: font `18px`, border kuat `3px`, spacing +20%.
|
||
|
||
Mobile UX — Pembayaran
|
||
- Tata letak:
|
||
- Satu kolom pada lebar kecil; gunakan container `max-w-md`.
|
||
- Spasi internal panel `16–24px`; hindari konten menempel ke tepi.
|
||
- Target sentuh:
|
||
- Tinggi area tap minimal `44px`; jarak antar aksi `8–12px`.
|
||
- Baris pemilihan metode memakai `min-h-[44px]` dan `p-3`.
|
||
- Tipografi:
|
||
- Body `16px` (min); langkah instruksi `16–18px` dengan `line-height 1.5`.
|
||
- Hindari `text-xs` untuk konten utama di mobile.
|
||
- Aksi utama:
|
||
- Tombol utama `w-full`; boleh sticky di bawah layar.
|
||
- Pertimbangkan padding aman: `padding-bottom: env(safe-area-inset-bottom)`.
|
||
- Panel QR/Code:
|
||
- QR minimum `min(68vw, 280px)`; grid pusat; border jelas.
|
||
- Kode pembayaran memakai `font-mono`, `text-lg`, `letter-spacing ~0.06em`, `select-all`.
|
||
- Tombol “Salin Kode” `w-full` di mobile.
|
||
- Loading & status:
|
||
- Pakai teks pendamping pada spinner; tambahkan `aria-live="polite"`.
|
||
- Tampilkan countdown kedaluwarsa dan aksi “Buat Ulang” jika relevan.
|
||
- Performa:
|
||
- Lazy-load gambar brand/QR; batasi ukuran logo; cache aktif.
|
||
- Hormati `prefers-reduced-motion`.
|
||
|
||
Implementasi Komponen (Opsional)
|
||
- InstructionList API:
|
||
```ts
|
||
type InstructionListProps = {
|
||
title: string; // "Cara Bayar: QRIS", "Cara Bayar: BCA Mobile"
|
||
steps: string[]; // daftar langkah pendek
|
||
footnote?: string; // catatan opsional (mis. kedaluwarsa)
|
||
}
|
||
```
|
||
- Gaya default:
|
||
- Judul `H4/H3` dengan teks primer; langkah bernomor dengan spacing `12–16px`.
|
||
- Divider antar kelompok langkah memakai `#94A3B8`; tidak wajib.
|
||
- Ikon kecil opsional di kiri; jangan menggantikan teks.
|
||
|
||
Bank Spesifik: BCA
|
||
- BCA Mobile (m-BCA) — Virtual Account
|
||
- 1. Buka aplikasi BCA mobile dan login.
|
||
- 2. Pilih menu "m-BCA" → "m-Transfer".
|
||
- 3. Pilih "BCA Virtual Account".
|
||
- 4. Masukkan "Nomor VA" yang tertera di halaman pembayaran.
|
||
- 5. Masukkan nominal jika tidak terisi otomatis.
|
||
- 6. Periksa detail pembayaran, lalu ketuk "Send".
|
||
- 7. Masukkan PIN m-BCA untuk konfirmasi.
|
||
- 8. Simpan bukti transaksi.
|
||
- Catatan: Nama menu dapat berbeda pada versi aplikasi tertentu; sesuaikan jika perlu.
|
||
|
||
- ATM BCA — Virtual Account
|
||
- 1. Masukkan kartu BCA dan PIN.
|
||
- 2. Pilih "Transaksi Lainnya".
|
||
- 3. Pilih "Transfer".
|
||
- 4. Pilih "Ke BCA Virtual Account".
|
||
- 5. Masukkan "Nomor VA" yang tertera di halaman pembayaran.
|
||
- 6. Masukkan nominal jika diminta.
|
||
- 7. Periksa detail pembayaran, lalu konfirmasi.
|
||
- 8. Ambil dan simpan struk transaksi.
|
||
- Catatan: Urutan menu pada beberapa ATM bisa berbeda; gunakan opsi Virtual Account ketika tersedia.
|
||
|
||
- Internet Banking (KlikBCA) — Virtual Account
|
||
- 1. Buka situs resmi KlikBCA dan login dengan user ID.
|
||
- 2. Pilih menu "Transfer Dana".
|
||
- 3. Pilih "Ke BCA Virtual Account".
|
||
- 4. Masukkan "Nomor VA" yang tertera di halaman pembayaran.
|
||
- 5. Masukkan nominal jika diperlukan.
|
||
- 6. Periksa detail pembayaran, lalu konfirmasi.
|
||
- 7. Masukkan OTP/KeyBCA (token) untuk menyetujui transaksi.
|
||
- 8. Simpan bukti transaksi.
|
||
- Catatan: Nama menu dapat berbeda antar versi; pastikan memilih opsi Virtual Account.
|
||
|
||
Copywriting Baku — Tambahan
|
||
- Untuk metode Virtual Account, gunakan label "Nomor VA" secara konsisten pada UI dan instruksi.
|
||
|
||
Roadmap Implementasi — Mobile Pembayaran (10 TODO)
|
||
- [x] Tambah panduan "Mobile UX — Pembayaran" di spesifikasi.
|
||
- [x] Perbesar area sentuh PaymentMethodList (min height ≥44px).
|
||
- [x] Tingkatkan keterbacaan PaymentInstructions (text-sm, spacing yang cukup).
|
||
- [x] Perbesar keterbacaan Kode Pembayaran di CStore (font-mono, text-lg, tracking, select-all).
|
||
- [x] Perbesar kontainer QR GoPay/QRIS dan buat tombol aksi full-width di mobile.
|
||
- [ ] PaymentSheet: optimalkan header mobile dan countdown jelas.
|
||
- Catatan: tombol utama sticky di bawah sudah diimplementasi.
|
||
- [x] BankTransferPanel: implementasi komponen InstructionList untuk BCA (Mobile/ATM/KlikBCA).
|
||
- [ ] Aksesibilitas: standarisasi aria-live untuk spinner/QR/kode, fokus ring 3px di semua panel.
|
||
- [ ] Comfort Mode: tambah toggle (font 18px, border 3px, spacing +20%) dan token gaya terkait.
|
||
- [ ] QA lintas perangkat: uji di layar kecil (iPhone SE/Android kecil), sesuaikan token bila perlu. |