Biometric KYC

Perform a Biometric KYC Job

Biometric KYC is exposed as a flow which performs the following high level steps:

1. Displays instructions to the user

2. Requests camera permissions (if not already granted)

3. Captures and saves Liveness and Selfie images

4. Submits the job to the Smile ID API

5. Delivers the result back to the caller

Jetpack Compose (Android)

@Composable
fun BiometricKYCExample(idInfo: IdInfo) {
    SmileID.BiometricKYC(idInfo = idInfo) { result ->
        when (result) {
            is SmileIDResult.Success -> {
                val resultData = result.data
                Log.d("BiometricKYC", "Success: $resultData")
                ...
            }

            is SmileIDResult.Error -> {
                // There was an error (could be denied camera permissions, network errors, etc)
                val throwable = result.throwable
                Log.w("BiometricKYC", "Failure: $it", throwable)
            }
        }
    }
}

Fragment (Android)

IdInfo idInfo = new IdInfo(...);
BiometricKYCFragment biometricKycFragment = BiometricKYCFragment
    .newInstance(document, R.drawable.my_logo, "My Partner", "My Product",
    new URL("https://my-privacy-policy.com"));
getSupportFragmentManager().setFragmentResultListener(
    BiometricKYCFragment.KEY_REQUEST,
    this,
    (requestKey, result) -> {
        SmileIDResult<BiometricKYCResult> biometricKycResult =
            BiometricKYCResult.resultFromBundle(result);
        Timber.v("BiometricKYC Result: %s", biometricKycResult);
        getSupportFragmentManager()
            .beginTransaction()
            .remove(biometricKycFragment)
            .commit();
        hideProductFragment();
    }
);

Swift UI (iOS)

import SwiftUI
import SmileID

struct MyView: View, BiometricKycResultDelegate {
    @State private var idInfo: IdInfo
    var body: some View {
        ZStack {
            SmileID.biometricKycScreen(
                idInfo: idInfo,
                delegate: self
            )
        }
    }

    func didSucceed(selfieImage: URL, livenessImages: [URL], didSubmitBiometricJob: Bool) {
        print("Successfully submitted Biometric KYC job")
    }

    func didError(error: Error) {
        print("An error occurred - \(error.localizedDescription)")
    }
}

UIKit (iOS)

let biometricKycScreen = SmileID.biometricKycScreen(...)
let controller = UIHostingController(rootView: biometricKycScreen)
controller.modalPresentationStyle = .fullScreen
navigationController?.present(controller, animated: true)

Flutter

Navigator.of(context).push( //Requires Navigator.of(context).push in order to load
    MaterialPageRoute<void>(
        builder: (BuildContext context) => Scaffold(
            appBar: AppBar(title: const Text("SmileID Biometric KYC")),
            body: SmileIDBiometricKYC(
                country: "KE",
                idType: "NATIONAL_ID",
                idNumber: "12345678",
                showInstructions: true, //Show the instruction screen
                onSuccess: (String? result) {
                    // Your success handling logic
                    final snackBar = SnackBar(content: Text("Success: $result"));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    Navigator.of(context).pop(); //Return flow to your app
                },
                onError: (String errorMessage) {
                    // Your error handling logic
                    final snackBar = SnackBar(content: Text("Error: $errorMessage"));
                    ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    Navigator.of(context).pop(); //Return flow to your app
                },
            ),
        ),
    ),
);

React Native

⚠️ Note: Recommend wrapping this in a component that can be navigated to and out of view due to a known issue with views displaying dialogs particularly on failure and the dialog keeps showing,

<SmileIDBiometricKYCView
  allowAgentMode={false} // true if you need to use the secondary camera
  allowGalleryUpload={false} //true if document can be uploaded from gallery
  captureBothSides={true} // true if capturing back and front of document
  showInstructions={true} // show instructions before capture
  idInfo={{
    country: "<country code>",
    idType: "<id type>",
    idNumber: "<id number>",
    entered: true,
  }}
  style={{ width: '100%', height: '100%' }} //fill the entire view
  onResult={(event) => {
    setResult(event.nativeEvent.result);
  }}
/>

On onResult, you will receive a JSON string following the structure:

{
  "selfieFile": "<path to selfie file>",
  "livenessFiles": [
    "<path to liveness file>",
    "<path to liveness file>",
    ...
    "<path to liveness file>",
  ],
  "didSubmitBiometricKycJob": true
}