WebView Integration

This guide covers how to embed the Didit web verification flow inside a native mobile WebView component. It is not the same as the native iOS/Android/React Native/Flutter SDKs — it is a fallback for platforms that cannot use a native SDK.

Always prefer native SDKs

Native SDKs are available for iOS, Android, React Native, and Flutter. They provide significantly better performance, camera handling, NFC passport/ID reading, biometric integration, and user experience. Use WebView only if no native SDK is available for your platform.

iOS SDK

Native Swift SDK for iOS 13+

Android SDK

Native Kotlin SDK for Android 6.0+

React Native SDK

Cross-platform TypeScript API. Expo compatible.

Flutter SDK

Cross-platform Dart API. pub.dev package.

Platform	Preferred Integration	WebView
iOS	iOS Native SDK — Use this	Not recommended
Android	Android Native SDK — Use this	Not recommended
React Native	React Native SDK — Use this	Not recommended
Flutter	Flutter SDK — Use this	Not recommended
Other platforms	N/A	Use WebView as fallback

When to Use WebView

Use WebView integration only when:

You’re building on a platform without a native SDK (e.g., Xamarin, Cordova, or other niche frameworks)
You need a quick prototype or proof of concept before integrating the native SDK
You’re migrating from web and want a temporary bridge to a native integration

How It Works

Create a session

Your backend calls the Create Session API and receives a hosted url.

Open in WebView

Your app loads the url in a WebView component.

User completes verification

The user goes through the verification flow inside the WebView.

Intercept callback

When done, the WebView navigates to your callback URL. Your app intercepts this navigation and extracts the result.

Get full results via webhook

Your backend receives the complete decision data via webhook.

Creating a Session

Before opening the verification flow, create a session from your backend:

curl -X POST https://verification.didit.me/v3/session/ \
  -H "x-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "workflow_id": "your-workflow-id",
    "vendor_data": "user-123",
    "callback": "https://yourapp.com/callback"
  }'

Response (201 — the url embeds the 12-character session_token, not the session_id):

{
  "session_id": "11111111-2222-3333-4444-555555555555",
  "session_number": 43762,
  "session_token": "3FaJ9wLqX2Mz",
  "url": "https://verify.didit.me/session/3FaJ9wLqX2Mz",
  "vendor_data": "user-123",
  "metadata": null,
  "status": "Not Started",
  "workflow_id": "11111111-2222-3333-4444-555555555555",
  "workflow_version": 3,
  "callback": "https://yourapp.com/callback"
}

Load the url field in the WebView — never build it from session_token by hand.

React Native

Install the WebView package:

npm install react-native-webview
# or with Expo
npx expo install react-native-webview

Implementation

import React from 'react';
import { WebView } from 'react-native-webview';

const VerificationScreen = ({ sessionUrl, onComplete }) => {
  return (
    <WebView
      source={{ uri: sessionUrl }}
      // Required: generic mobile user agent
      userAgent="Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36"
      // Required for camera/media
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
      // Android-specific
      domStorageEnabled={true}
      // Performance
      androidHardwareAccelerationDisabled={false}
      androidLayerType="hardware"
      // Intercept callback
      onNavigationStateChange={(navState) => {
        if (navState.url.includes('yourapp.com/callback')) {
          const url = new URL(navState.url);
          const sessionId = url.searchParams.get('verificationSessionId');
          const status = url.searchParams.get('status');
          onComplete({ sessionId, status });
        }
      }}
    />
  );
};

export default VerificationScreen;

React Native Demo

Expo + WebView verification example

Flutter

Add the required packages to pubspec.yaml:

dependencies:
  webview_flutter: ^4.4.0
  webview_flutter_wkwebview: ^3.9.0
  webview_flutter_android: ^3.12.0

Implementation

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

class VerificationScreen extends StatefulWidget {
  final String sessionUrl;
  
  const VerificationScreen({super.key, required this.sessionUrl});

  @override
  State<VerificationScreen> createState() => _VerificationScreenState();
}

class _VerificationScreenState extends State<VerificationScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _setupWebView();
  }

  void _setupWebView() {
    late final PlatformWebViewControllerCreationParams params;
    
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const {},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    _controller = WebViewController.fromPlatformCreationParams(params)
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setUserAgent(
        'Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 '
        '(KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36'
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.contains('yourapp.com/callback')) {
              _handleResult(request.url);
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(widget.sessionUrl));

    // Grant camera/microphone permissions
    final platform = _controller.platform;
    platform.setOnPlatformPermissionRequest((request) {
      request.grant();
    });

    // Android-specific
    if (platform is AndroidWebViewController) {
      platform.setMediaPlaybackRequiresUserGesture(false);
    }
  }

  void _handleResult(String callbackUrl) {
    final uri = Uri.parse(callbackUrl);
    final sessionId = uri.queryParameters['verificationSessionId'];
    final status = uri.queryParameters['status'];
    
    Navigator.of(context).pop({
      'sessionId': sessionId,
      'status': status,
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Identity Verification')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

Flutter Demo

Flutter WebView verification example

Critical Configuration

User Agent (Required)

You must set a generic mobile user agent for the WebView to work correctly:

Mozilla/5.0 (Linux; Android 10; Mobile) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

This ensures proper camera access, correct UI rendering, and optimal media playback.

Media Settings (Required)

Setting	Purpose
`allowsInlineMediaPlayback`	Prevents fullscreen video on iOS
`mediaPlaybackRequiresUserGesture`	Allows auto-starting the camera
`javaScriptEnabled`	Required for SDK functionality
`domStorageEnabled`	Session storage for Android

Handling the Callback

After verification, the WebView redirects to your callback URL with query parameters:

https://yourapp.com/callback?verificationSessionId=abc123&status=Approved

Parameter	Description
`verificationSessionId`	Unique session identifier
`status`	`Approved`, `Declined`, or `In Review`

For a better user experience, use a custom URL scheme (e.g., myapp://verification-complete) as your callback and handle it as a deep link in your app.

Troubleshooting

Camera not working

Ensure mediaPlaybackRequiresUserGesture is false
Verify camera permissions are granted at the OS level
Check that the user agent string is set correctly

White screen or loading issues

Verify the session URL is valid and not expired
Check internet connectivity
Ensure JavaScript is enabled in the WebView settings

Callback not triggering

Verify your callback URL matches what you set when creating the session
Check that the navigation delegate/listener is properly configured
Try setting callback_method to "both" when creating the session

Guides

Model Context Protocol (MCP)

Web SDKs

Native SDKs

Integrations

Always prefer native SDKs

iOS SDK

Android SDK

React Native SDK

Flutter SDK

When to Use WebView

How It Works

Creating a Session

React Native

Implementation

React Native Demo

Flutter

Implementation

Flutter Demo

Critical Configuration

User Agent (Required)

Media Settings (Required)

Handling the Callback

Troubleshooting

​Always prefer native SDKs

iOS SDK

Android SDK

React Native SDK

Flutter SDK

​When to Use WebView

​How It Works

​Creating a Session

​React Native

​Implementation

React Native Demo

​Flutter

​Implementation

Flutter Demo

​Critical Configuration

​User Agent (Required)

​Media Settings (Required)

​Handling the Callback

​Troubleshooting

Always prefer native SDKs

When to Use WebView

How It Works

Creating a Session

React Native

Implementation

Flutter

Implementation

Critical Configuration

User Agent (Required)

Media Settings (Required)

Handling the Callback

Troubleshooting