Halo teman-teman, kali ini admin akan membahas mengenai tutorial menggunakan integrasi pembayaran QRIS yang disediakan oleh OrderKuota. Sebelum memulai integrasi ini, ada beberapa hal yang harus diperhatikan, yaitu:
- Pastikan sudah memiliki akun okeconnect.
- Pastikan pengajuan QRIS sudah di ACC oleh OrderKuota, sehingga teman-teman sudah mendapatkan kode QRIS dalam bentuk gambar.
- Pastikan sudah menggunakan aplikasi bukaOlshop versi terbaru.
- Pastikan sudah mengaktifkan kode unik topup dan kode unik transaksi di aplikasi bukaolshop.
Berikut ini langkah-langkah integrasi pembayaran QRIS menggunakan OrderKuota.
1. Koneksi Akun OkeConnect ke bukaOlshop
- Buka halaman dashboard okeconnect, pada bagian Payment H2H, klik Integrasi API.
- Pada halaman tersebut, kamu akan melihat dua kolom, yaitu Merchant Code dan API KEY. Biarkan halaman ini tetap terbuka, sambil kita beralih ke aplikasi bukaOlshop.
- Buka aplikasi bukaOlshop teman-teman. Lalu klik tab TOKO -> API & Callback.
- Pada bagian tab Integrasi, scroll kebagian bawah halaman, lalu klik menu Mutasi QRIS by OrderKuota
- Klik tombol gear ⚙️ di pojok kanan atas untuk membuka pengaturan integrasi.
- Pada bagian bawah halaman, kamu akan melihat dua kolom untuk menginputkan merchant code dan API key.
- Kembali ke halaman OkeConnect tadi, copy merchat code lalu pastekan ke kolom merchant code yang disediakan bukaOlshop. Lakukan hal yang sama dengan API Key.
- Klik SIMPAN untuk menyimpan data koneksi.
2. Upload Gambar QRIS
Langkah selanjutnya yaitu mengupload gambar QRIS yang teman-teman dapatkan dari orderkuota, gambar QRIS tersebut akan dimunculkan nanti dihalaman pembayaran.
Upload gambar bisa anda pilih dari sini:
3. Copy URL Override ke bagian Callback
Langkah selanjutnya adalah melakukan pengaturan url override yang bisa dilakukan dengan cara berikut:
- Tekan tombol copy pada bagian URL Override.
- Kembali kehalaman Api & Callback sebelumnya, lalu klik tab CALLBACK.
- Scroll kebagian bawah, pada bagian Override halaman proses topup saldo, klik Aktifkan Override Saldo. Lalu paste-kan url override orderkuota tadi ke kolom yang sudah disediakan, lalu klik Simpan URL proses topup.
- Jika anda juga ingin menggunakan QRIS orderkuota ini untuk pembayaran transaksi, lakukan hal yang sama pada opsi Override halaman transaksi yang dibagian bawah halaman.
4. Testing Koneksi pada Aplikasi Olshop
Pada tutorial ini akan kami contohkan pada bagian topup. Buka aplikasi olshop anda, lalu klik tombol TopUp.
Masukkan nominal yang ingin kamu topup, lalu klik tombol TopUp Saldo. Jika tidak ada kesalahan pada proses ini, maka akan tampil halaman berikut:
Jika kamu scroll halaman kebawah, kamu akan melihat gambar QRIS yang telah anda upload, dan juga tombol Periksa Status Bayar. Tombol Periksa Status Bayar ini merupakan tombol yang digunakan untuk melakukan pendeteksian ke OrderKuota apakah dana sesuai total transfer telah masuk atau belum.
Setelah tombol Periksa Status Bayar ditekan, kita akan dialihkan kehalaman status yang menerangkan apakah pembayaran telah terdeteksi atau belum.
Jika kami ingin mengubah halaman diatas, anda bisa memasukkan URL Link sendiri dibagian pengaturan halaman integrasi QRIS OrderKuota, contohnya bisa dilihat digambar berikut:
Melakukan Kostum HTML Halaman QRIS
Kamu dapat melakukan setting halaman HTML QRIS OrderKuota ini dengan mudah, namun pastikan kamu telah memahami dasar-dasar sintaks HTML dan CSS terlebih dulu untuk mempermudah dalam mengubah tampilan.
Saat kamu melakukan kostum HTML, kamu akan mendapatkan template HTML yang bukaOlshop gunakan sebagai default halaman QRIS. Dari situ, kamu memiliki acuan dasar cara kerja fitur kostum HTML ini.
Kostum HTML ini menggunakan shortcode sebagai variabel yang diletakkan di halaman HTML, dan akan otomatis terganti dengan nilai yang sesuai saat halaman diakses pada aplikasi/website olshop.
Berikut ini daftar shortcode yang bisa digunakan:
Data Toko :
{{nama_aplikasi}} , {{url_logo}} , {{kode_warna}}, {{jenis_payment}}
Data Angka:
{{id_transaksi}} , {{jumlah_topup}} ,{{kode_unik}} , {{biaya_admin}} , {{total_bayar}}
Gambar QR (letakkan di tag img):
{{url_gambar_qris}}
Link periksa status bayar (letakkan di tag a href):
{{url_cek_status}}
Tanggal/Jam token expired (lihat contoh kode javascript diaplikasi langsung):
{{token_expired}}
* Tambahan: Khusus shortcode {{nama_aplikasi}} , {{url_logo}} , {{kode_warna}}, {{url_gambar_qris}} itu dapat anda tulis langsung nilainya ke HTML tanpa shortcode, misal : <span class=”name”>{{nama_aplikasi}}</span> dapat anda tulis langsung menjadi <span class=”name”>OLSHOPKU</span>
Cara Kerja Pengecekan QRIS OrderKuota
QRIS OrderKuota carakerja nya kurang lebih sama dengan layanan cekmutasi ke bank umumnya, yaitu dengan menggunakan kode unik untuk mendeteksi tiap transaksi.
Berbeda dengan payment gateway pada umunnya, yang mana dana ditransfer ke rekening tertentu sehingga tiap transaksi dapat dibedakan, sistem QRIS satu pintu seperti OrderKuota ini tidak memiliki ID transaksi yang bisa digunakan untuk membedakan tiap transaksi, tetapi bergantung sepenuhnya pada tambahan kode unik dan rentang waktu tertentu sebagai pendeteksi pembayaran.
Untuk membedakan data tiap transaksi, berikut skema yang bukaOlshop terapkan:
- Tiap permintaan topup yang dilakukan member, server akan melakukan pengecekan dalam rentang waktu saat ini dan 20 menit kedepan.
- Jika dalam rentang waktu tersebut terdapat nominal topup yang sama (baik dari member yang sama atau berbeda), maka kode unik akan meningkat sebanyak Rp.1
- Kode unik akan terus meningkat selama jumlah topup yang member lakukan memiliki kesamaan (sehingga kesamaan total transfer tidak terjadi dalam kurun waktu 20menit).
- Jika member melakukan topup dengan nominal yang berbeda dari member lain, maka kode unik akan kembali ke Rp1
Berikut ini contoh studi kasus yang dapat membantu anda memahami alur diatas:
- Terdapat 3 member, member A, member B, dan member C.
- Member A melakukan topup dengan nilai Rp.10.000, maka server akan memberikan kode unik 1 sehingga total bayar menjadi Rp.10.001. TopUp dilakukan jam 00:00 WIB.
- Pada jam 00:05 WIB, member B melakukan topup senilai Rp.10.000 juga. Karena topup member A dan B memiliki kesamaan pada rentang waktu 20 menit, maka server memberikan kode unik 2 ke member B, sehingga member B harus mentransfer dengan nilai Rp10.002.
- Pada dua kasus diatas, server dapat membedakan tiap transaksi berdasarkan nilai total transfer ketika melakukan pengecekan ke QRIS OrderKuota.
- Pada jam 00:10 WIB, member C melakukan topup senilai Rp.15.000. Karena belum ada yang melakukan permintaan senilai 15.000 pada tentang waktu 20 menit kedepan, maka kode unik yang akan diberikan adalah Rp1.
- Pada kasus diatas, walau member C juga memiliki kode unik Rp.1 yang sama seperti member A, tetapi nominal jumlah topupnya berbeda, sehingga total transfer juga berbeda. Hal ini membuat server dapat mengetahui pembayaran 15.001 yang masuk merupakan milik si member C.
Selain itu, berikut ini beberapa peraturan yang bukaOlshop terapkan:
- Jika member melakukan transfer dalam rentang waktu 20 menit sesuai yang tertera dilayar, namun baru menekan tombol Periksa Status Bayar setelah 20 menit (misal pada menit ke 30 atau bahkan berjam-jam), maka pembayaran tetap akan terdeteksi dan saldo tetap akan masuk. Hal ini karena bukaOlshop melakukan pencarian mutasi transaksi dari QRIS OrderKuota berdasarkan rentang waktu topup yang dilakukan member.
- Misal member melakukan permintaan topup jam 00:00 dan melakukan pembayaran jam 00:10. Tetapi member baru menekan tombol Periksa Status Bayar pada jam 07:00, maka server akan mengecek mutasi transaksi QRIS OrderKuota pada rentang waktu 00:00 sampai 00:20, apakah terdapat transaksi sesuai jumlah total topup atau tidak.
- Jika member melakukan pembatalan topup, maka kode unik tidak akan dilepas, melainkan akan terus meningkat selama jumlah nominalnya sama dan di rentang waktu 20 menit.
- Penerapan sistem kode unik ini juga berlaku jika anda menggunakan QRIS OrderKuota ini pada fitur Override Transaksi.
Demikian tutorial cara integrasi QRIS OrderKuota dengan bukaOlshop, semoga bermanfaat dan lancar.
Terimakasih.