kenal_ekyc_demo_flutter #

A Flutter demo for quickly integrating and embedding the Kenal eKYC flow using KenalWebView.

Installation #

Add the SDK package to your pubspec.yaml:

dependencies:
  kenal_ekyc_sdk: ^1.0.4

Then run:

flutter pub get

Quick Start #

1. Initialize the client (e.g. in your app’s entry point or screen):

import 'package:flutter/material.dart';
import 'package:kenal_ekyc_sdk/kenal_ekyc_sdk.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? ekycUrl;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    KenalClient.initialize(
          KenalClientConfig(
            apiKey: '',
            environment: "sandbox",
          ),
        )
        .then((client) {
          // Client initialized successfully
        })
        .catchError((error) {
          if (error is ValidationError) {
            // Handle validation error
          } else if (error is PermissionsNotGrantedError) {
            // Handle permissions not granted error
            print('Permissions not granted: ${error.message}');

            // Optionally, you can KenalClient.showPermissionDeniedDialog(context) to
            // show a dialog to the user explaining the permissions needed. But it requires
            // the context to be available.

          } else {
            // Handle other errors
          }
        });
  }

  void onStart() {
    MyKad.start(
          MyKadParams(
            name: 'John Doe', // or omit when useOCRForData = true
            idNumber: '900101014321', // or omit when useOCRForData = true
            refId: 'REF12345', // optional, can be used to track the transaction
            useOCRForData: false, // set to true to use OCR for data extraction
          ),
        )
        .then((response) {
          setState(() {
            ekycUrl = response.fullURL;
          });
        })
        .catchError((error) {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Kenal eKYC Demo')),
        body:
            ekycUrl == null
                ? Center(
                  child: ElevatedButton(
                    onPressed: onStart,
                    child: const Text('Start eKYC'),
                  ),
                )
                : KenalWebView(
                  url: ekycUrl ?? '',
                  onComplete: (data) {
                    // handle success data
                  },
                  onExceedMaxRetries: (data) {
                    // handle client exceed max retries
                  }
                  onError: (error) {
                    // handle errors
                  },
                  onMessage: (message) {
                    // handle custom messages
                  },
                  loader: const Center(child: CircularProgressIndicator()),
                ),
      ),
    );
  }
}

Permissions Setup #

To ensure the eKYC flow works correctly, you need to set up the necessary permissions for camera access in both Android and iOS platforms.

Android (AndroidManifest.xml) android/app/src/main/AndroidManifest.xml #

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.CAMERA"/>

  <application
    android:label="kenal_ekyc_demo_flutter"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">

    // Other configurations...

    <provider
        android:name="com.pichillilorenzo.flutter_inappwebview_android.InAppWebViewFileProvider"
        android:authorities="${applicationId}.flutter_inappwebview_android.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/provider_paths" />
    </provider>
  </application>
</manifest>

iOS (Info.plist) #

<key>NSCameraUsageDescription</key>
<string>Camera is required for eKYC verification</string>