Issue di Frontend, user tidak bisa input di SNAP UI Ketika Pembayaran Menggunakan Pilihan Kartu Kredit

[adoel90]

Describe the existing unexpected scenario

Overall untuk case payment menggunakan Midtrans semuanya aman, kecuali 1 case yaitu ketika user menggunakan kartu kredit, semua input-an tidak bisa di masukan data apapun oleh user

To Reproduce

Steps to reproduce the Unexpected Behavior :

1. Go to https://siswa-dev.shinkenjuku.co.id/
2. Klik button Daftar
3. Pilih Paket & klik label "Di Sini"
4. Di Bawah Total Pembayaran, klik button pembayaran (Akan Muncul Modal Pop Up "Selamat Datang")
5. Arahkan/ Klik ke Tab "Daftar" (Akan muncul Modal Pop Up "Pernyataan Persetujuan")
6. Klik Centang kemudian klik button "Saya Setuju"
7. Isi semua data registrasi (Tidak apa2 di submit dengan data "Testing")
8. Kemudian Lanjutkan pembayaran (Akan Muncul Pop Up Payment Midtrans
9. Arahkan ke Pembayaran menggunakan KARTU KREDIT

existing skenario yang terjadi skrng adalah tidak bisa input sama sekali semua field

Expected Behavior Ketika Modal Pop Payment Midtrans muncul, maka dapat input data Kartu Kredit, CC, dll

Informasi Video ScreenRecorder https://photos.app.goo.gl/BLCcgWyxjSCw7AT78

Environment Platform of FE

NextJS v10.0.5

Bagaimana Penerapan Code yang kami lakukan untuk implementasi SnapMidatrans ?

Kami mengimplementasikan SnapMidtrans kurang lebih seperti ini

[rizdaprasetya]

Hi @adoel90 terima kasih sudah reach-out dan memberikan detail lengkapnya.

Dari evidence tersebut, kemungkinan issuenya adalah:

• ada komponen/code lain di Frontend implementation web anda yang menyebabkan input focus ter-override.
  • jadi ketika user melakukan klik di salah satu input field yang ada di UI Snap popup, ada code yg meng-ambil alih focus input-nya, sehingga focus inputnya sudah bukan lagi di UI Snap.
  • jika memang ini yang terjadi, maka sudah diluar kendali produk Midtrans. Tetapi ini issue implementasi di FE anda.

Saran kami:

• Coba cari di codebase FE anda, apakah ada yg melakukan call focus()? function tersebut digunakan untuk override input focus. Coba hilangkan.
  • atau coba cari kira-kira ada code/component/library apa yg berpotensi mengambil alih focus input.
• Jika masih bermasalah, coba hilangkan satu-satu component/code di FE anda, sampai issue ini tidak terjadi. Maka anda akan bisa menemukan penyebabnya.
  • atau coba implementasikan Snap di blank page dulu di FE anda, pastikan normal, kemudian satu-persatu tambahkan component/code yg anda perlukan.

Terima kasih.

[rizdaprasetya]

Untuk saat ini thread ini akan di close. Jika masih ada pertanyaan silahkan dilanjutkan atau untuk jawaban yang lebih cepat serta channel yg lebih sesuai, silahkan ajukan pertanyaan via: https://midtrans.com/contact-us Terima kasih.

[rizdaprasetya]

Saran tambahan:

• Jika masih bermasalah menggunakan current method of Snap popup via JS (yang dikarenakan oleh sepertinya ada conflict code antara FE anda & Snap UI), maka:
  • Bisa coba ganti flow integrasi menjadi metode Redirection Method yang dijelaskan pada step ini.
  • Redirect method akan menghindari conflict dengan code di FE/UI anda, karena customer akan di redirect ke page berbeda.