Mobile Client-side Rendering

Before you do Anything

Please Sign Up to get started here - https://app.creditchek.africa/auth/signup

The first thing you need to do is to go to the B2B portal at https://app.creditchek.africa/auth/signup to create an account with CreditChek. After signing up, follow the process required to verify your account on the app using the verification code sent to you email used for account creation. After this is done, you can then login.

CreditChek Approval Mobile SDK — Integration Guide

Official Mobile SDK Documentation: Fast, secure, and seamless identity & biometric verification for Android, iOS, Flutter, and React Native.

1. Overview

The CreditChek Approval Mobile SDK allows you to verify customer identities in seconds directly within your mobile applications using BVN or NIN and active facial liveness.

🌟 New: Dynamic Backend-Driven Orchestration & Universal Splash Screen

Zero Hardcoded Flows: Host applications no longer specify modules or environment in code. Instead, you supply your widgetId, and the SDK dynamically loads the environment, module execution order, primary brand color, and custom brand logo from GET /auth/sdk-setup/{widgetId}.
Universal Splash Screen & Flow Coordinator: A centralized coordinator launches a unified pulsing splash screen that executes initial validation, checks existing session progress, pre-fetches completed identity data, and automatically skips steps the customer has already completed.
Dynamic Theming & Custom Brand Logo: The entire SDK inherits your brand color and logo from your dashboard widget configuration.

How It Works:

1. Session Initialization (Merchant's Backend)

Call CreditChek API: POST /widget-session/create
Receive generated sessionId
Deliver sessionId to your mobile application

2. Mobile SDK Flow (Host App)

Host App initializes and launches SDK with sessionId
SDK validates session with CreditChek
• Universal Splash
• Dynamic Setup & Theme
User completes BVN / NIN verification and/or active liveness check

3. Verification Result

SDK delivers onComplete(sessionId) callback to Host App
Host (merchant) App & Merchant Backend
Backend verifies final status via CreditChek API (Passed / Failed)

Session Creation (Backend): Your server calls CreditChek's Widget Session API (POST https://api.creditchek.africa/v1/auth/widget-session/create) using your secret key and desired services (["nin", "liveness"] or ["bvn", "liveness"]) to generate a unique sessionId.
Launch Verification (Mobile SDK): Your mobile app receives the sessionId from your backend and initializes the SDK using ApprovalConfig(publicKey: "...", sessionId: "...", widgetId: "...").
Universal Splash & Dynamic Flow: The SDK displays the pulsing splash screen, retrieves your widget setup (GET /auth/sdk-setup/{widgetId}), validates the session, skips completed steps, and guides the customer through interactive verification with your custom branding.
Instant Result Callback: The SDK returns a SessionResult (Success, Cancelled, or Error) to your application, and your backend confirms the final verification state with CreditChek.

2. Platform Setup & Integration

Select your mobile stack below:

🤖 Android (Kotlin / Jetpack Compose & XML)

Requirements

Min SDK: 24 (Android 7.0+)
Compile SDK: 34+
Kotlin: 1.9+ / 2.0+
Java / JVM: Version 17

1. Add JitPack Repository

In your settings.gradle.kts (or root build.gradle.kts):

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = java.net.URI("https://jitpack.io") }
    }
}

2. Add Dependency

In your app/build.gradle.kts:

dependencies {
    implementation("com.github.creditcliq:approval_android:1.0.6")
}

3. Permissions (`AndroidManifest.xml`)

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
</manifest>

4. Launch the SDK

In Jetpack Compose

val approvalLauncher = rememberLauncherForActivityResult(
    contract = CreditChekApproval.contract()
) { result ->
    when (result) {
        is SessionResult.Success -> {
            println("Verified Session ID: ${result.sessionId}")
            // Confirm result with your backend
        }
        is SessionResult.Cancelled -> {
            println("User dismissed verification")
        }
        is SessionResult.Error -> {
            println("Verification failed (${result.code}): ${result.message}")
        }
    }
}

Button(onClick = {
    val config = ApprovalConfig(
        publicKey = "YOUR_PUBLIC_KEY",
        sessionId = backendSessionId, // Obtained from your backend
        widgetId = "YOUR_WIDGET_ID",   // From CreditChek Dashboard
        userData = AUserData(
            firstName = "John",
            lastName = "Doe",
            bvn = "12345678901",
            nin = "12345678901"
        )
    )
    approvalLauncher.launch(config)
}) {
    Text("Verify Identity")
}

In Traditional Activity (Java / Kotlin)

CreditChekApproval.start(
    context = this,
    config = ApprovalConfig(
        publicKey = "YOUR_PUBLIC_KEY",
        sessionId = backendSessionId,
        widgetId = "YOUR_WIDGET_ID"
    )
) { result ->
    when (result) {
        is SessionResult.Success -> handleSuccess(result.sessionId)
        is SessionResult.Cancelled -> handleDismiss()
        is SessionResult.Error -> handleError(result.message)
    }
}

🍏 iOS (Swift & SwiftUI)

Requirements

iOS Deployment Target: iOS 15.0+
Swift: 5.9+ / Swift 6 compatible
Xcode: 15.0+

1. Add Swift Package

In Xcode: File ➔ Add Package Dependencies... ➔ Paste repository URL:

https://github.com/creditcliq/approval_ios.git

2. Permissions (`Info.plist`)

Add the camera usage description:

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to verify your identity with live face detection.</string>

3. Launch the SDK

In SwiftUI

import SwiftUI
import approval_ios

struct VerificationView: View {
    @State private var isPresentingApproval = false
    let backendSessionId: String // Generated by your backend
    let widgetId: String        // From CreditChek Dashboard

    var body: some View {
        Button("Verify Identity") {
            isPresentingApproval = true
        }
        .sheet(isPresented: $isPresentingApproval) {
            ApprovalView(
                config: ApprovalConfig(
                    publicKey: "YOUR_PUBLIC_KEY",
                    sessionId: backendSessionId,
                    widgetId: widgetId,
                    userData: AUserData(
                        firstName: "John",
                        lastName: "Doe",
                        bvn: "12345678901",
                        nin: "12345678901"
                    )
                )
            ) { result in
                switch result {
                case .success(let sessionId, let message):
                    print("Verification Complete: \(sessionId), \(message)")
                case .cancelled:
                    print("User dismissed verification")
                case .error(let code, let message):
                    print("Error (\(code)): \(message)")
                }
            }
        }
    }
}

In UIKit

CreditChekApproval.start(
    config: ApprovalConfig(
        publicKey: "YOUR_PUBLIC_KEY",
        sessionId: backendSessionId,
        widgetId: "YOUR_WIDGET_ID"
    )
) { result in
    switch result {
    case .success(let sessionId, let message):
        print("Success: \(sessionId)")
    case .cancelled:
        print("Cancelled")
    case .error(let code, let message):
        print("Error: \(code) - \(message)")
    }
}

💙 Flutter (Dart)

Requirements

Flutter: 3.16+
Dart: 3.0+

1. Add Dependency

In your pubspec.yaml:

dependencies:
  approval_flutter:
    git:
      url: https://github.com/creditcliq/approval_flutter.git

2. Launch the SDK

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

Future<void> startVerification(BuildContext context, String backendSessionId, String widgetId) async {
  final config = ApprovalConfig(
    publicKey: 'YOUR_PUBLIC_KEY',
    sessionId: backendSessionId, // Obtained from your backend
    widgetId: widgetId,          // From CreditChek Dashboard
    userData: const AUserData(
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]',
      bvn: '12345678901',
      nin: '12345678901',
      phone: '+2348012345678',
    ),
  );

  final result = await ApprovalFlutter.start(config: config);

  switch (result) {
    case SessionResultSuccess(:final sessionId, :final message):
      print('Verified Session ID: $sessionId, Message: $message');
    case SessionResultCancelled():
      print('User cancelled verification');
    case SessionResultError(:final code, :final message):
      print('Verification failed ($code): $message');
  }
}

⚛️ React Native & Expo (TypeScript / JavaScript)

Requirements

React Native: 0.70+ / Expo SDK 50+
iOS: 15.0+ / Android: API 24+

1. Install Package

# Using Expo (Recommended)
npx expo install approval_react_native

# Using npm
npm install approval_react_native

2. Launch the SDK

import React from 'react';
import { Button, View, Alert } from 'react-native';
import CreditChekApproval from 'approval_react_native';

export default function VerificationScreen({
  backendSessionId,
  widgetId,
}: {
  backendSessionId: string;
  widgetId: string;
}) {
  const handleStartVerification = async () => {
    try {
      const result = await CreditChekApproval.start({
        publicKey: 'YOUR_PUBLIC_KEY',
        sessionId: backendSessionId, // From your backend
        widgetId: widgetId,          // From CreditChek Dashboard
        userData: {
          firstName: 'John',
          lastName: 'Doe',
          bvn: '12345678901',
          nin: '12345678901',
          email: '[email protected]',
        },
      });

      if (result.status === 'success') {
        Alert.alert('Verification Successful', `Session ID: ${result.sessionId}`);
      } else if (result.status === 'cancelled') {
        console.log('User dismissed verification');
      } else if (result.status === 'error') {
        Alert.alert('Verification Error', `[${result.code}]: ${result.message}`);
      }
    } catch (error: any) {
      Alert.alert('Error', error.message || 'An error occurred');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Verify Identity" onPress={handleStartVerification} />
    </View>
  );
}

3. Configuration Reference (`ApprovalConfig`)

Property	Type	Required	Description
`publicKey`	`String`	Yes	Your public API key from the CreditChek Dashboard (`pk_live_...` or `pk_test_...`).
`sessionId`	`String`	Yes	Unique session UUID created by your backend via `POST /v1/auth/widget-session/create`.
`widgetId`	`String`	Yes	Widget ID from your dashboard. Dynamically supplies branding, theme color, environment, and module order.
`userData`	`AUserData?`	No	Optional prefill data (`firstName`, `lastName`, `bvn`, `nin`, `dob`, `email`, `phone`).

[!NOTE] environment and modules are no longer passed manually. The SDK fetches them directly from the widget configuration linked to your widgetId.

4. Result Handling (`SessionResult`)

When the verification flow concludes, the SDK returns one of three outcomes:

Result	Parameters	Description
`Success`	`sessionId: String`, `message: String`	The customer completed verification on the device. Confirm with your backend.
`Cancelled`	—	The customer dismissed the verification sheet before finishing.
`Error`	`code: String`, `message: String`	Verification failed due to network errors, configuration issues, or invalid credentials.

5. Security & Privacy

On-Device Face Alignment: Biometric gestures are detected locally using hardware-accelerated ML models.
Encrypted Transmission: All data is securely transferred over TLS 1.3 encryption.
Zero Local Biometric Storage: Photo frames are strictly held in-memory during verification and immediately discarded upon completion.
Secret Key Protection: Secret keys remain exclusively on your backend.

6. Support & Resources

CreditChek Developer Portal: https://docs.creditchek.africa
API Web Dashboard: https://app.creditchek.africa
Email Support: [email protected]

CreditChek Approval Mobile SDK — Integration Guide

1. Overview​

🌟 New: Dynamic Backend-Driven Orchestration & Universal Splash Screen​

How It Works:​

2. Platform Setup & Integration​

🤖 Android (Kotlin / Jetpack Compose & XML)​

Requirements​

1. Add JitPack Repository​

2. Add Dependency​

3. Permissions (AndroidManifest.xml)​

4. Launch the SDK​

In Jetpack Compose​

In Traditional Activity (Java / Kotlin)​

🍏 iOS (Swift & SwiftUI)​

Requirements​

1. Add Swift Package​

2. Permissions (Info.plist)​

3. Launch the SDK​

In SwiftUI​

In UIKit​

💙 Flutter (Dart)​

Requirements​

1. Add Dependency​

2. Launch the SDK​

⚛️ React Native & Expo (TypeScript / JavaScript)​

Requirements​

1. Install Package​

2. Launch the SDK​

3. Configuration Reference (ApprovalConfig)​

4. Result Handling (SessionResult)​

5. Security & Privacy​

6. Support & Resources​

1. Overview

🌟 New: Dynamic Backend-Driven Orchestration & Universal Splash Screen

How It Works:

2. Platform Setup & Integration

🤖 Android (Kotlin / Jetpack Compose & XML)

Requirements

1. Add JitPack Repository

2. Add Dependency

3. Permissions (`AndroidManifest.xml`)

4. Launch the SDK

In Jetpack Compose

In Traditional Activity (Java / Kotlin)

🍏 iOS (Swift & SwiftUI)

Requirements

1. Add Swift Package

2. Permissions (`Info.plist`)

3. Launch the SDK

In SwiftUI

In UIKit

💙 Flutter (Dart)

Requirements

1. Add Dependency

2. Launch the SDK

⚛️ React Native & Expo (TypeScript / JavaScript)

Requirements

1. Install Package

2. Launch the SDK

3. Configuration Reference (`ApprovalConfig`)

4. Result Handling (`SessionResult`)

5. Security & Privacy

6. Support & Resources