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

ModeRute WebViewPembagian Kerja
A. Full WebView/qoincash/creditWebView mengerjakan semuanya: input nomor HP, tab Pulsa/Paket Data, pilihan nominal, inquiry, PIN, dan pembayaran.
B. Native + PIN di WebView (halaman ini)/payment/phonecreditNative memakai GETPHONECREDITDENOM & GETPHONECREDITINQUIRY. WebView hanya memproses ringkasan, PIN, dan eksekusi pembayaran.

2. Alur Pembayaran Native (Mode B)

  1. User mengetik nomor HP di native. Native memanggil GETPHONECREDITDENOM dengan phoneNumber dan kind ("pulsa" atau "data"). Balasannya mengembalikan nama provider, daftar nominal products, serta productsToken.
  2. User memilih produk/nominal. Native memanggil GETPHONECREDITINQUIRY dengan phoneNumber, kind, code (pCode), dan menyertakan kembali productsToken. Balasannya mengembalikan rincian inquiry dan inquiryToken.
  3. User menekan Bayar di native. Native membuka WebView (terlihat) ke {BASE_URL}/payment/phonecredit.
  4. Native mengirim inquiryToken lewat postMessage (kirim ulang tiap ±500 ms, timeout 15 detik).
  5. 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.
  6. 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
ParameterTipe DataStatusDeskripsi & Contoh
inquiryTokenstringWajib
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
ParameterTipe DataStatusDeskripsi & Contoh
{ STATUS: "TRUE", FOR: "PHONECREDIT" }objectOpsional
Transaksi berhasil (status final). Diikuti { close: true, STATUS: "TRUE", FOR: "PHONECREDIT" } saat tombol Selesai ditekan.
{ STATUS: "FALSE", FOR: "PHONECREDIT" }objectOpsional
Transaksi gagal atau dibatalkan sistem. Diikuti { close: true, STATUS: "FALSE", FOR: "PHONECREDIT" } saat tombol Selesai/Tutup ditekan.
{ close: true, FOR: "PHONECREDIT" }objectOpsional
User menekan tombol kembali sebelum pembayaran diproses, atau transaksi masih berstatus pending. Tanpa STATUS.
  • Status pending / sedang diproses: WebView tidak mengirimkan STATUS hingga 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.