Tutorial Cara Integrasi Pembayaran QRIS menggunakan Qiospay

Halo teman-teman, kali ini admin akan membahas mengenai tutorial menggunakan integrasi pembayaran QRIS yang disediakan oleh Qiospay. Sebelum memulai integrasi ini, ada beberapa hal yang harus diperhatikan, yaitu:

• Pastikan sudah memiliki akun Qiospay.
• Pastikan pengajuan QRIS sudah di ACC oleh Qiospay, 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 Qiospay.

1. Koneksi Akun Qiospay ke bukaOlshop

Buka halaman dashboard Qiospay (https://qiospay.id/mitra/), klik Integrasi Payments, lalu klik Data API.

Pada halaman tersebut, kamu akan melihat empat kolom, yaitu Merchant Code, API KEY, String QR, danURL Callback QRIS. 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 Qiospay QRIS.

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 Ccode lalu pastekan ke kolom merchant code yang disediakan bukaOlshop. Lakukan hal yang sama dengan API Key.

Klik SIMPAN untuk menyimpan data koneksi.

Langkah selanjutnya yaitu melakukan setting URL Callback QRIS. Anda akan menemukan URL Callback QRIS pada halaman setting, copy URL tersebut dan pastekan ke halaman Integrasi QRIS di dashboard Qiospay.

Setelah anda menginputkan URL Callback QRIS, Tekan tombol simpan.

2. Upload Gambar QRIS

Langkah selanjutnya yaitu mengupload gambar QRIS yang teman-teman dapatkan dari Qiospay, 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 Qiospay tadi ke kolom yang sudah disediakan, lalu klik Simpan URL proses topup.

Jika anda juga ingin menggunakan QRIS Qiospay 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 Qiospay 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.

Karena pada Qiospay menyediakan callback, maka dana yang masuk bisa otomatis terdeteksi tanpa user perlu melakukan pemeriksaan status bayar, namun untuk saat ini, jika status bayar sudah di ACC oleh server bukaolshop, halaman topup belum bisa otomatis dialihkan ke halaman sukses, jadi member harus menekan tombol Periksa Status Bayar terlebih dahulu agar dialihkan kehalaman sukses.

Melakukan Kostum HTML Halaman QRIS

Kamu dapat melakukan setting halaman HTML QRIS Qiospay 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}}

Demikian tutorial cara integrasi QRIS Qiospay dengan bukaOlshop, semoga bermanfaat dan lancar.

Terimakasih.