Dokumentasi Fitur Kostum Tampilan Input PIN

bukaOlshop versi 56.8 membawa fitur baru yaitu kostum tampilan input PIN. Fitur ini memungkinkan anda untuk mengatur halaman input PIN pada apk olshop menggunakan kode HTML, sehingga tampilan bisa lebih sesuai dengan branding aplikasi anda.

Sebelum menggunakan fitur ini, berikut hal-hal yang harus Anda ketahui:

1. APK olshop memiliki versi bulid  77 keatas.
2. Anda harus menggunakan paket Pro, dan BISNIS.

Sebelum memulai tutorial ini, kami ingatkan teman-teman agar teliti dalam memasang fitur ini agar tidak ada error seperti kesalahan sintaks dsb.

Pastikan juga teman-teman memahami konsep dasar kode HTML.

Chapter 1 : Mengaktifkan Fitur

Untuk mengaktifkan fitur kostum tampilan input PIN, anda bisa mengaktifkannya di menu pada gambar dibawah:

Setelah anda mengaktifkan fitur kostum halaman input PIN, anda wajib memasang kode html yang akan digunakan nantinya. Untuk memasukan kode html, ikuti langkah-langkah berikut:

• Pindah ke tab TOKO, klik Personal Branding.
• Pindah ke tab KOSTUM HTML.
• Scroll kebawah, Klik Kostum Input PIN

Pada halaman input kode html ini, anda dapat memilih ingin menginput dalam bentuk html atau menggunakan script dari store. Jika anda ingin menggunakan script dari store, anda perlu menginstal script dengan kategori tampikan APK khusus, dengan posisi pemasangan di kostum halaman input PIN.

Jika anda ingin menggunakan html, anda dapat memulainya dengan melakukan generate kode html template yang sudah bukaolshop sediakan, tombol generate kode html terletak di atas halaman dengan logo pensil.

Chapter 2 : Shortcode Khusus

Pada kostum halaman input PIN ini, bukaOlshop hanya menyediakan 1 shortcode khusus yaitu {{status_pin_json}}. Shortcode tersebut berisi data json yang harus diolah oleh javascript terlebih dahulu.

Selain shortcode {{status_pin_json}}, anda juga bisa menggunakan seluruh shortcode yang ada di sini:

https://help.bukaolshop.com/dokumentasi-fitur-shortcode-pada-html/

Pada shortcode {{status_pin_json}}, berisi data yang digunakan untuk mengetahui tipe dan status PIN, yang nantinya bisa anda gunakan untuk memberi informasi ke user. Berikut ini struktur lengkap json:

{
   "tipe":"reset_pin",
   "step":1,
   "retry":0,
   "show_cancel":true 
}

Berikut ini penjelasan dari data json diatas:

Key	Penjelasan	Value
tipe	Digunakan untuk mengetahui tipe halaman input PIN, kode generate bawaan bukaOlshop tidak melakukan apapun pada key ini, namun anda bisa menggunakannya jika dibutuhkan	“new_pin” , “reset_pin” , “delete_pin” , “confirm_payment” , “unlock”
step	Digunakan untuk mengetahui urutan input PIN Angka 1 menandakan user harus menginputkan PIN miliknya yang aktif sekarang. Angka 2 menandakan user harus menginputkan PIN baru. Angka 3 menandakan user harus menginputkan PIN baru yang telah di ketik sebelumnya (pada angka 2).	Integer 1,2,3
retry	Digunakan untuk mengetahui apakah user salah menginputkan PIN atau tidak. Jika nilai 0, maka halaman baru saja dibuka atau user belum melakukan kesalahan input PIN, jika nilai lebih dari 0, maka user telah salah menginputkan PIN. Maksimal kesalahan input PIN yaitu 6x sebelum akhirnya akan dilakukan pemblokiran	Integer 0,1,2,3,4,5,6
show_cancel	Digunakan untuk mengetahui apakah halaman input PIN boleh ditutup atau tidak. Jika bernilai true, maka tampilkan tombol batal_pin, jika nilai false, maka hilangkan tombol batal_pin. show_cancel ini akan bernilai false saat halaman unlock apk muncul.	Boolean true/false

 

Chapter 3 : Link untuk submit PIN

Setelah mengetahui shortcode status_pin_json diatas, langkah selanjutnya yaitu melakukan submit PIN ke aplikasi untuk dilakukan pemrosesan data. Pada contoh kode generate bawaan bukaOlshop, kode PIN otomatis disubmit setelah user menginputkan PIN ke 6.

Untuk melakukan submit PIN, gunakan link website olshop anda, dengan path submit_pin, dengan query parameter pin, dengan method GET. Berikut contoh lengkap link:

link_website_olshop/submit_pin?pin=123456

Contoh:

https://tokosaya.olshopku.com/submit_pin?pin=123456

Untuk memudahkan membuat link diatas, anda bisa menggunakan bantuan form seperti berikut:

<form method="GET" action="{{url_website_baru}}/submit_pin">
    <input type="text" name="pin">
    <input type="submit" value="cek pin">
 </form>

Untuk membuat tombol membatalkan input pin, anda bisa menggunakan contoh link berikut:

<a href="{{url_website_baru}}/batal_pin">Batal</a>

Pastikan hanya menampikan tombol batal input pin hanya jika nilai pada {{status_pin_json}}, pada key show_cancel  bernilai true

Jika anda menggunakan kode HTML generate bawaan bukaOlshop, maka kode diatas akan terlihat berbeda karena adanya penambahan tombol-tombol dan validasi lewat javascript agar tampilan terasa mudah digunakan, namun konsep submit PIN tetap sama seperti diatas.

 

Demikian artikel mengenai kostum tampilan input PIN dari bukaOlshop, semoga bermanfaat, terimakasih.