Langsung ke konten utama
Panduan ini menjelaskan cara menyematkan alur verifikasi web Didit di dalam komponen WebView pada aplikasi seluler native. Panduan ini bukan SDK native iOS, Android, React Native, atau Flutter, melainkan solusi cadangan untuk platform yang tidak dapat menggunakan SDK native.

Selalu utamakan SDK native

SDK native tersedia untuk iOS, Android, React Native, dan Flutter. SDK ini menawarkan performa, penanganan kamera, pembacaan paspor/ID NFC, integrasi biometrik, dan pengalaman pengguna yang jauh lebih baik. Gunakan WebView hanya jika tidak ada SDK native untuk platform Anda.

SDK iOS

SDK Swift native untuk iOS 13+

SDK Android

SDK Kotlin native untuk Android 6.0+

SDK React Native

API TypeScript lintas platform. Kompatibel dengan Expo.

SDK Flutter

API Dart lintas platform. Paket pub.dev.

Kapan Menggunakan WebView

Gunakan integrasi WebView hanya ketika:
  • Anda membangun di platform yang tidak memiliki SDK native (misalnya Xamarin, Cordova, atau framework khusus lainnya)
  • Anda memerlukan prototipe cepat atau bukti konsep sebelum mengintegrasikan SDK native
  • Anda bermigrasi dari web dan membutuhkan jembatan sementara menuju integrasi native

Cara Kerjanya

1

Buat sesi

Backend Anda memanggil API Create Session dan menerima url yang di-hosting.
2

Buka di WebView

Aplikasi Anda memuat url di komponen WebView.
3

Pengguna menyelesaikan verifikasi

Pengguna menjalani alur verifikasi di dalam WebView.
4

Cegat callback

Setelah selesai, WebView dialihkan ke URL callback Anda. Aplikasi Anda mencegat navigasi ini dan mengekstrak hasilnya.
5

Dapatkan hasil lengkap melalui webhook

Backend Anda menerima data keputusan lengkap melalui webhook.

Membuat Sesi

Sebelum membuka alur verifikasi, buat sesi dari backend Anda:
Respons (201, url menyematkan session_token yang terdiri dari 12 karakter, bukan session_id):
Muat kolom url di WebView. Jangan pernah membangunnya secara manual dari session_token.

React Native

Instal paket WebView:

Implementasi

Demo React Native

Contoh verifikasi Expo + WebView

Flutter

Tambahkan paket yang diperlukan ke pubspec.yaml:

Implementasi

Demo Flutter

Contoh verifikasi WebView Flutter

Konfigurasi Penting

User Agent (Wajib)

Anda harus mengatur user agent seluler generik agar WebView berfungsi dengan benar:
Pengaturan ini memastikan akses kamera yang tepat, rendering UI yang benar, dan pemutaran media yang optimal.

Pengaturan Media (Wajib)


Menangani Callback

Setelah verifikasi, WebView dialihkan ke URL callback Anda dengan parameter query:
Untuk pengalaman pengguna yang lebih baik, gunakan skema URL kustom (misalnya myapp://verification-complete) sebagai callback Anda dan tangani sebagai deep link di aplikasi Anda.

Pemecahan Masalah

  1. Pastikan mediaPlaybackRequiresUserGesture bernilai false
  2. Pastikan izin kamera sudah diberikan di tingkat OS
  3. Periksa bahwa string user agent sudah diatur dengan benar
  1. Pastikan URL sesi valid dan belum kedaluwarsa
  2. Periksa koneksi internet
  3. Pastikan JavaScript diaktifkan di pengaturan WebView
  1. Pastikan URL callback Anda sama dengan yang Anda atur saat membuat sesi
  2. Periksa bahwa delegate/listener navigasi sudah dikonfigurasi dengan benar
  3. Coba atur callback_method ke "both" saat membuat sesi

Terakhir diubah pada 7 November 2026