PRD — Diversifikasi Income & Pay Page Kustomizable (R8)

1. Ringkasan

Dua hal:

1. Halaman /pay saat ini HTML statis yang semua nilainya hardcoded. Ubah jadi dikonfigurasi lewat _data/payments.yml sehingga nomor rekening, QR, tombol app, dan aktif/tidaknya metode bisa diganti tanpa menyentuh HTML.
2. Tambahkan jalur income baru yang kompatibel dengan situs statis: Ko-fi, sponsorship box, produk digital (Gumroad), affiliate, web monetization.

2. Kondisi saat ini (fakta dari kode)

pay/index.html (17KB) + pay/index_en.html (16.9KB) berdiri sendiri, tidak lewat layout Jekyll.

Metode aktif yang dirender (7): BCA, Jenius/BTPN, DANA, ShopeePay, PayPal, Flip, QRIS.

Metode dikomentari (4, tidak render): OVO, LinkAja, GoPay + 2 blok text-qris/Salin QRIS.

Yang hardcoded di dalam file:

Implikasi: ganti satu nomor rekening = edit 2 file HTML (ID + EN) + redeploy. OVO/LinkAja/GoPay mau diaktifkan = buka blok komentar manual. Tidak ada cara menonaktifkan metode sementara.

3. Requirement (P0/P1/P2)

4. Desain data

_data/payments.yml — satu sumber untuk ID + EN:

header:
  title_id: "Selamat Datang di Portal Pembayaranku"
  title_en: "Welcome to my Payment Portal"
  desc_id: "Ingin mendukung? membayar jasa? Tekan ikon untuk memilih metode bayar. Terima kasih!"
  desc_en: "Want to support or pay for a service? Tap an icon to choose."
  confirm:
    whatsapp: https://helmiau.com/wa
    telegram: https://helmiau.com/tg
  others:
    jasa: /jasa/
    site: https://helmiau.com

methods:
  - id: bca
    label: BCA
    active: true
    icon: /assets/img/img-bca.svg
    qr_image: /assets/img/qr-bca.svg
    modal_title_id: "Pembayaran Via BCA"
    modal_title_en: "Payment Via BCA"
    holder: "a.n Helmi Amirudin"
    copy_value: "4640041710"
    copy_label_id: Salin
    copy_label_en: Copy

  - id: jenius
    label: BTPN/Jenius
    active: true
    icon: /assets/img/img-jenius.svg
    qr_image: /assets/img/qr-jenius.svg
    copy_fields:
      - { id: tagjenius, value: "$helmiau",  label_id: Cashtag,     label_en: Cashtag }
      - { id: jenius,    value: "90370026872", label_id: "Salin Nomor", label_en: "Copy number" }
    holder: "a.n Helmi Amirudin"

  - id: qris
    label: QRIS
    active: true
    icon: /assets/img/img-qris.svg
    qr_image: /assets/img/qr-qris.svg
    holder: "a.n Helmi Amirudin"
    lines:
      - "HELMIAU STORE OK1224999"
      - "NMID: ID2023271968307"
    fee_note_id: "Total pembayaran + Rp. 5.000 (pajak)"
    fee_note_en: "Total + IDR 5,000 (tax)"

  - id: paypal
    label: Paypal
    active: true
    icon: /assets/img/img-paypal.svg
    qr_image: /assets/img/qr-paypal.svg
    app_url: https://paypal.me/helmiau

  - id: ovo
    label: OVO
    active: false            # dinonaktifkan tanpa hapus kode
    icon: /assets/img/img-ovo.svg
    qr_image: /assets/img/qr-ovo.svg
    copy_value: "085852222724"

schema_keys_per_method:
  wajib:   [id, label, active, icon]
  opsional: [qr_image, modal_title_id, modal_title_en, holder, copy_value, copy_label_id,
             copy_label_en, copy_fields[], app_url, lines[], fee_note_id, fee_note_en,
             affiliate_url]

Aturan: copy_value dan copy_fields[] mutually exclusive; kalau keduanya ada, copy_fields menang.

5. Arsitektur render

pay/index.html (front matter)
  layout: page
  permalink: /pay/            # lama: /pay/index.html
  lang: id
      │
      └─ 


  <p class="text-muted">Belum ada metode pembayaran yang dikonfigurasi. Periksa <code>_data/payments.yml</code>.</p>


             └─ loop site.data.payments.methods → skip !active
                    ├─ ikon grid   (icon, label)
                    └─ modal       (qr_image, holder, copy_value|copy_fields,
                                    app_url, lines, fee_note)

pay/index_en.html → sama, lang: en

File pay/index.html + pay/index_en.html lama dipindah ke:

• pages/pay.md → permalink: /pay/
• pages/pay-en.md → permalink: /pay/en/

⚠️ Risiko redirect: URL lama /pay/index.html dan /pay/ (sekarang 200) harus tetap hidup supaya link di post lama & QRIS scan tidak putus. Solusi: pertahankan pay/index.html lama sebagai file redirect minimal, atau set permalink: /pay/index.html pada halaman baru. Putuskan saat implementasi; default aman: pertahankan path /pay/ yang sudah ada sekarang (folder pay/ + index.html ber-front-matter, Jekyll tetap output ke /pay/).

jasa/ mengikuti pola yang sama (R2), tapi R8 tidak menyentuh jasa/.

6. Halaman & route

Navigation: /pay sudah dirujuk dari _layouts/post.html (trakteer → https://www.helmiau.com/pay/index_en.html) dan pay→jasa. Rujukan pay/index_en.html di post.html harus ikut diperbarui bila path EN berubah — cek: grep -rn "index_en" _layouts _includes _posts.

7. Security & privasi

• Nomor rekening/QR bukan rahasia publik yang perlu proteksi (sudah di halaman publik), tapi jangan masuk ke _data yang ter-commit bila nanti dipakai data pribadi lain.
• Tidak ada input pengguna → tidak ada validasi server. Semua nilai dari _data milik pemilik repo.
• Widget pihak ketiga (Ko-fi, Gumroad) wajib dimuat async dan di bawah payung consent yang sama dengan tracking lain (helmi-consent === 'granted'), supaya GDPR konsisten. Ini bukan sekadar CSS hide.
• rel="noopener" untuk semua target="_blank" yang ditulis ulang (kode lama window.open tidak dapat rel).
• Tidak menambah CSP pelonggaran baru.

8. Edge case

1. _data/payments.yml hilang → site.data.payments nil → render “belum dikonfigurasi”, build tetap exit 0.
2. Semua metode active: false → grid kosong + pesan, bukan modal rusak.
3. qr_image menunjuk file tidak ada → alt tampil, modal tetap bisa dibuka (jangan JS error).
4. Metode punya app_url tapi tidak copy_value → footer hanya tombol Buka App (kasus PayPal/Flip hari ini).
5. copy_fields[] dengan 2 field → 2 tombol Salin (kasus Jenius hari ini).
6. QRIS tanpa nomor (kasus sekarang, text-qris dikomentari) → copy_value kosong → tombol Salin tidak dirender.
7. Bahasa: modal_title_en hilang → fallback ke modal_title_id, bukan undefined.
8. Safari lama navigator.share → tombol “Bagikan” sudah ada fallback alert; pertahankan.
9. Konsumsi assets/salin.js: fungsi copy(textId) bergantung ID DOM. Generator wajib membuat id="text-<method.id>" yang sama, kalau tidak tombol Salin mati senyap.

9. Non-goal

• Menghapus/mengganti safelinku, AdSense, Trakteer.
• Backend pembayaran, webhook, invoice, recurring billing.
• Integrasi API bank/e-wallet (cek status pembayaran otomatis).
• A/B testing income.
• Migrasi jasa/ (milik R2).

10. Fase implementasi

Urutan: F1→F2→F3→F4 harus selesai sebelum F5. F5–F7 independen dan boleh di-skip.

11. Acceptance criteria (ringkas)

• REQ-PAY-001…008 terpenuhi dengan bukti perintah/browser, bukan asumsi.
• node scripts/check-deps.mjs exit 0 (partial baru harus resolve).
• bundle exec jekyll build exit 0 dengan JEKYLL_GITHUB_TOKEN terisi.
• Tidak ada grep "id=\"qr-bca\"" pay/index.html tersisa sebagai HTML literal setelah migrasi.
• Rujukan pay/index_en.html di _layouts/post.html sudah konsisten dengan path baru.
• GitHub Pages build status built tanpa error, /pay/ live 200.

12. Asumsi

1. Pemilik repo satu orang, tidak butuh UI admin — edit YAML + commit sudah cukup “kustomisasi”.
2. QR image SVG/PNG existing tetap dipakai; penggantian gambar = ganti file di assets/img/.
3. Nominal +Rp5.000 (pajak) QRIS adalah kebijakan tetap sampai user bilang berubah.
4. Gumroad/Ko-fi/afiliasi butuh akun yang belum dibuat — masuk daftar bloker eksternal untuk F5–F7.
5. Tidak ada Google Analytics event untuk klik metode bayar (belum diminta); kalau nanti perlu, itu pekerjaan terpisah dan harus di-gate consent.

13. Pertanyaan terbuka

14. Definisi selesai

R8 selesai bila: /pay/ dan versi EN-nya dirender dari _data/payments.yml lewat layout page, 7 metode aktif tampil dengan Salin/modal/Buka App terverifikasi di browser, metode nonaktif hilang dari output, halaman tetap tampil saat data kosong, docs/PAY-PAGE.md ada, safelinku/AdSense/Trakteer tidak berubah, dan GitHub Pages build built.