Integrasi Mobile•Pulsa & Paket Data
Bayar Pulsa & Paket Data dari Native
Native mendeteksi operator nomor HP, menampilkan katalog nominal Pulsa atau Paket Data, dan melakukan inquiry di UI-nya sendiri. WebView /payment/phonecredit hanya menampilkan ringkasan, meminta PIN, dan mengeksekusi pembelian.
1. Pilihan Mode Transaksi
| Mode | Rute WebView | Pembagian Kerja |
|---|---|---|
| A. Full WebView | /qoincash/credit | WebView mengerjakan semuanya: input nomor HP, tab Pulsa/Paket Data, pilihan nominal, inquiry, PIN, dan pembayaran. |
| B. Native + PIN di WebView (halaman ini) | /payment/phonecredit | Native memakai GETPHONECREDITDENOM & GETPHONECREDITINQUIRY. WebView hanya memproses ringkasan, PIN, dan eksekusi pembayaran. |
2. Alur Pembayaran Native (Mode B)
- User mengetik nomor HP di native. Native memanggil
GETPHONECREDITDENOMdenganphoneNumberdankind("pulsa" atau "data"). Balasannya mengembalikan namaprovider, daftar nominalproducts, sertaproductsToken. - User memilih produk/nominal. Native memanggil
GETPHONECREDITINQUIRYdenganphoneNumber,kind,code(pCode), dan menyertakan kembaliproductsToken. Balasannya mengembalikan rincian inquiry daninquiryToken. - User menekan Bayar di native. Native membuka WebView (terlihat) ke
{BASE_URL}/payment/phonecredit. - Native mengirim
inquiryTokenlewatpostMessage(kirim ulang tiap ±500 ms, timeout 15 detik). - WebView mengambil rincian data transaksi dari server melalui endpoint
token-info, menampilkan ringkasan pembelian & detail biaya, lalu meminta PIN akun Qoin. User memasukkan PIN di dalam WebView. - WebView mengeksekusi order & pembayaran, menampilkan layar hasil, dan mengirim status final ke host native.
Pesan ke /payment/phonecredit (tanpa type, bukan query URL)
// inquiryToken = data.inquiryToken dari balasan GETPHONECREDITINQUIRY
window.postMessage(JSON.stringify({ inquiryToken: "<token>" }), "*");Kamus Parameter Pesan
| Parameter | Tipe Data | Status | Deskripsi & Contoh |
|---|---|---|---|
| inquiryToken | string | Wajib | Token tersegel dari balasan GETPHONECREDITINQUIRY (data.inquiryToken). Teruskan apa adanya sebagai string token buram (opaque). Terikat ke akun user dan berlaku singkat (±5 menit). Contoh: <string token buram (opaque)> |
Angka layar berasal dari token
Hanya token yang dikirimkan ke WebView. Rincian harga, nomor tujuan, dan biaya layanan dibaca oleh server langsung dari token tersegel. Angka yang terlihat di layar PIN dijamin identik dengan jumlah saldo yang didebit.
Penanganan pesan dan timeout
Pesan pembayaran hanya diproses tepat satu kali. Jika pesan tidak diterima dalam 15 detik atau token tidak valid/kedaluwarsa, WebView akan mengarahkan ke halaman hasil gagal secara otomatis.
3. Hasil yang Diterima Native
Event dari WebView ke Host Native
| Parameter | Tipe Data | Status | Deskripsi & Contoh |
|---|---|---|---|
| { STATUS: "TRUE", FOR: "PHONECREDIT" } | object | Opsional | Transaksi berhasil (status final). Diikuti { close: true, STATUS: "TRUE", FOR: "PHONECREDIT" } saat tombol Selesai ditekan. |
| { STATUS: "FALSE", FOR: "PHONECREDIT" } | object | Opsional | Transaksi gagal atau dibatalkan sistem. Diikuti { close: true, STATUS: "FALSE", FOR: "PHONECREDIT" } saat tombol Selesai/Tutup ditekan. |
| { close: true, FOR: "PHONECREDIT" } | object | Opsional | User menekan tombol kembali sebelum pembayaran diproses, atau transaksi masih berstatus pending. Tanpa STATUS. |
- Status pending / sedang diproses: WebView tidak mengirimkan
STATUShingga status transaksi final tercapai dari polling operator. - Refresh halaman hasil: Tetap berada pada mode native. Tombol "Lihat Riwayat Transaksi" disembunyikan dan tombol "Selesai" tetap mengirimkan sinyal tutup ke native.
- PIN tidak lewat postMessage: PIN dimasukkan user langsung pada numpad aman di dalam WebView dan dikirim secara terenkripsi ke server.
Keamanan Saldo & PIN
PIN otentikasi akun tidak pernah dapat diakses atau diintersepsi oleh aplikasi native host. Seluruh pemotongan saldo diproteksi verifikasi server-side.