Dokumentasi Arsitektur Sistem & Spesifikasi

1

Gambaran Umum Sistem (Executive Overview)

QRIS Converter adalah aplikasi web modern berkinerja tinggi yang dirancang untuk mengonversi kode QRIS Statis (tanpa nominal) milik merchant menjadi QRIS Dinamis (dengan nominal tagihan rupiah otomatis).

Nol Kesalahan Nominal

Mencegah kesalahan ketik jumlah pembayaran oleh pembeli saat transaksi di kasir.

Tanpa Sewa EDC / API

Menghemat biaya merchant tanpa perlu langganan API gateway atau menyewa mesin EDC mahal.

100% Client-Side Engine

Seluruh proses dilakukan di browser lokal. Data toko dijamin 100% aman tanpa server upload.

2

Bahasa Pemrograman & Teknologi (Tech Stack)

Komponen	Teknologi	Peran & Alasan Pemilihan
Core Engine	JavaScript (ES6+)	Pengolahan manipulasi string TLV, kalkulasi bitwise CRC-16, dan logika state reaktif.
Struktur UI	HTML5 Semantik	Struktur halaman yang rapi, aksesibel, dan teroptimasi penuh untuk SEO Google.
Reaktivitas UI	Alpine.js v3	Framework reaktif super ringan (~15KB) tanpa butuh Virtual DOM berat atau bundler React/Vue.
Styling System	Tailwind CSS v4 & CSS3	Design system tema gelap (Dark Mode), tata letak responsif, glassmorphism, dan mikro-animasi.
Bundler & Test	Esbuild & Node Test	Kompilasi super cepat (< 15ms) dan pengujian unit otomatis (`npm test`) untuk 8 sub-test.

3

Alur Kerja Aplikasi (System Workflow)

Langkah-demi-Langkah Pengolahan Data:

1

Input QRIS Merchant (`/login`)

Merchant mengunggah gambar QRIS (dibaca via parser piksel `jsQR`) atau menempelkan payload teks QRIS Statis.

2

Verifikasi Struktur EMVCo

Engine mengurai Tag 00-63, mengekstrak Nama Toko, Kota, NMID, dan memvalidasi kode checksum CRC-16 asli.

3

Input Nominal Tagihan (`/dashboard`)

Kasir menentukan nominal rupiah pembayaran (misal: Rp 75.000). Engine menginjeksi Tag 54 dan merubah Tag 01 ke `12` (Dinamis).

4

Kalkulasi Ulang Checksum CRC-16 & Render QR

Engine menghitung ulang checksum CRC-16 CCITT-FALSE (`0x1021`) dan merender gambar QR Code yang siap dipindai oleh semua aplikasi m-Banking/e-Wallet.

4

Spesifikasi EMVCo, Formula CRC16 & Pipeline Transformasi

Pipeline Transformasi: Gambar Statis ➔ Payload ➔ Modifikasi Nominal ➔ Gambar Dinamis Baru

Penjelasan rinci mekanisme pengubahan gambar barcode statis menjadi string data, modifikasi tag nominal, hingga perenderan kembali gambar QRIS baru.

Fase 1

Gambar ➔ Payload Teks

1. Reading File Berkas gambar QRIS (PNG/JPG) dibaca peramban via FileReader.readAsDataURL().
2. Canvas Rendering Gambar digambar ke HTML5 Offscreen Canvas tersembunyi.
3. Buffer Pixel RGBA Mengambil array piksel RGBA via ctx.getImageData().
4. QR Matrix Decoding Library jsQR memindai matriks barcode, menghasilkan string mentah EMVCo (000201...).

Fase 2

Pemecah TLV & Modifikasi

1. Pointer TLV Parser Loop cursor memecah string berdasarkan pola [Tag 2d][Length 2d][Value].
2. Mode Statis ➔ Dinamis Nilai Tag 01 diubah dari 11 (Statis) ke 12 (Dinamis).
3. Injeksi Tag Nominal (54) Menyisipkan Tag 54 (misal: 540550000 untuk Rp 50.000).
4. Rekalkulasi CRC16 Menghapus CRC lama, hitung ulang CRC-16 CCITT-FALSE (0x1021), dan tempel 4-hex digit baru (E65F).

Fase 3

Payload Teks ➔ Gambar Baru

1. Matriks QR Generation Payload dinamis baru dihitung oleh generator QRCode.js.
2. Canvas Rendering Gambar QR Code beresolusi tinggi digambar pada canvas HTML5.
3. PNG Data Export Canvas diekspor menjadi Data URL PNG (canvas.toDataURL()).
4. Output Siap Scan Gambar QRIS Dinamis siap diunduh PNG atau langsung dipindai oleh HP pembeli.

// Contoh Perubahan Payload String QRIS (Statis ➔ Dinamis)

QRIS Statis: 000201010211...53033606304A1B2
QRIS Dinamis: 000201010212...53033605405500006304E65F

Format data QRIS mengikuti standar EMVCo QR Code Specification dengan pola [Tag 2-digit][Length 2-digit][Value].

// Contoh Struktur Tag QRIS Dinamis Hasil Konversi

000201 (Payload Format = 01)
010212 (Point of Initiation = 12 Dynamic)
540550000 (Transaction Amount = Rp 50.000)
5802ID (Country Code = ID)
6304E65F (CRC-16 Checksum = E65F)

Rumus Algoritma CRC-16/CCITT-FALSE

Algoritma kalkulasi keamanan QRIS menggunakan bitwise polynomial 0x1021 dengan Initial Value 0xFFFF. String dihitung dari karakter pertama (Tag 00) hingga string 6304 sebelum nilai 4-digit CRC.

5

Keamanan, SEO & Dynamic Routing (Spesifikasi Mendalam)

5.1 Arsitektur Keamanan Client-Side & Zero-Trust Privacy

Platform QRIS Converter menerapkan model keamanan Zero-Backend Storage & Zero-Trust Privacy. Seluruh proses sensitif penguraian payload QRIS dan kalkulasi CRC-16 dilakukan 100% di browser pengguna tanpa perantara server backend.

Tanpa Database Cloud

Tidak ada database server tempat menyimpan nama merchant, NMID, atau nominal transaksi. Bebas risiko kebocoran data (*zero data leak*).

Pemrosesan Memori Lokal

Dekode piksel QRIS (via jsQR) dan generasi QR Code (via qrcode.js) dieksekusi di memori browser lokal (window.memory).

Dual Storage Isolation

Data sesi diisolasi pada localStorage dan sessionStorage perangkat merchant saja.

5.2 Strategi SEO Perusahaan & Schema Rich Snippets

Website dioptimalkan sepenuhnya untuk indeksasi mesin pencari Google, Bing, dan Yandex menggunakan standar meta tag modern dan Structured Data JSON-LD (Schema.org).

1. Schema `SoftwareApplication` (Google Rich Snippets)

Memberi tahu bot Google bahwa web ini adalah BusinessApplication gratis (Price IDR 0.00) dengan Aggregate Rating 4.9, sehingga Google menampilkan rating bintang pada hasil pencarian.

2. Schema `FAQPage` (Google Search Accordion)

Menginjeksi struktur Tanya-Jawab baku mengenai keabsahan QRIS dinamis dan kompatibilitas m-Banking (BCA, Mandiri, BRI, BNI, GoPay, OVO, DANA) agar tampil di SERP Google.

3. Open Graph & Twitter Cards Protocol

Meta tag og:title, og:image (1200x630px), dan twitter:card menjamin tampilan pratinjau yang profesional saat link dibagikan di WhatsApp, Telegram, FB, dan Twitter.

5.3 Dynamic Origin Auto-Detector & Cloudflare Variables

Sistem pengenal domain aplikasi bekerja menggunakan skema hierarki prioritas otomatis:

// Skema Hierarki Deteksi Origin Domain

Cloudflare Secrets (SITE_URL) ➔ window.location.origin ➔ Fallback Default

Dukungan Cloudflare Variables & Secrets:

SITE_URL atau PUBLIC_SITE_URL: Mengatur nama domain utama kustom.
GOOGLE_SITE_VERIFICATION: Otomatis menginjeksi meta tag verifikasi Google Search Console.
BING_SITE_VERIFICATION / MSVALIDATE_01: Otomatis menginjeksi meta tag verifikasi Bing Webmaster Tools.
YANDEX_SITE_VERIFICATION: Otomatis menginjeksi meta tag verifikasi Yandex Webmaster.

5.4 Routing Bersih (Clean URLs) & Navigation Offset

Menggunakan HTML5 History API (`history.replaceState`) untuk secara otomatis menghapus ekstensi .html dan simbol hash # pada address bar peramban, memberikan tampilan alamat web tingkat perusahaan (/, /login, /dashboard, /docs).

Dukungan Konfigurasi Hosting Multi-Platform:

Cloudflare Pages:
Native Clean URLs Engine (Automatic HTML Mapping)

Vercel Platform:
File vercel.json (cleanUrls: true)

Apache Web Server:
File .htaccess (RewriteEngine)

6

Dokumentasi Arsitektur & Spesifikasi Teknis