React Native KYC components

KYC due diligence is one of the steps required to onboard consumers onto your app. Weavr provides a KYC component that you can embed in your app. This lets you provide a seamless experience to your user while capturing the required documentation to verify their identity.

Get KYC reference

GET the KYC reference id by invoking the following api: POST /consumers/kyc

import * as secureComponentsReactNative from "@weavr-io/secure-components-react-native";
secureComponentsReactNative.startKyc(
  reference, // here we pass the reference ID
  {
    onKycFailure: (
      error: Map<secureComponentsReactNative.ErrorKeys, String>
    ) => {
      console.log(error.get(secureComponentsReactNative.ErrorKeys.Message)); // error -> code, message, body
    },
    onKycSuccess: (res: String) => {
      console.log(res);
    },
  },
  {
    onKycFailed: (
      error: Map<String, secureComponentsReactNative.KYCErrorType>
    ) => {
      console.log(error);
    },
    onStatusChange: (status: secureComponentsReactNative.KYCSDKStatus) => {
      console.log(secureComponentsReactNative.KYCSDKStatus[status]);
    },
    onKycSdkTerminate: (res: Map<String, String>) => {
      console.log(res);
    },
    onKycEvent: (event: Map<String, String>) => {
      console.log(event);
    },
    onKycException: (exc: Map<any, any>) => {
      console.log(exc);
    },
    onKycActionComplete(res: Map<String, String>) {
      console.log(res);
    },
    onTokenExpired: () => {
      console.log("get new token ");
      return new Promise<any>((res, rej) => {
        res("new_Token"); //here we should pass new token
      });
    },
  },
  theme
);

Follow the example below to enable the look and feel of the SDK, such as the fonts, colors, and images used. As a prerequisite you need to load fonts and images as explained in the install SDK section.

Create a theme object and set the properties of the theme object:

const theme: WeavrKYCTheme = {
  both: {
    colors: {
      backgroundCommon: { light: "#ffff0090", dark: "#00ff0090" },
    },
    fonts: {
      headline1: { name: "Montserrat-Bold.ttf", size: 24 },
      headline2: { name: "Montserrat-Bold.ttf", size: 20 },
      body: { name: "Montserrat-Regular.ttf", size: 14 },
      caption: { name: "Montserrat-Regular.ttf", size: 12 },
      subtitle1: { name: "Montserrat-Medium.ttf", size: 18 },
      subtitle2: { name: "Montserrat-Medium.ttf", size: 16 },
    },
    icons: {
      iconClose: "close",
    },
    verificationStepIcons: {
      identity: "forward",
      selfie: "close",
      selfie2: "close",
      proofOfResidence: "close",
      proofOfResidence2: "close",
      applicantData: "close",
      emailVerification: "close",
      phoneVerification: "close",
      questionnaire: "close",
      default: "close",
    },

    metrics: {
      activityIndicatorStyle: "large",
      fieldCornerRadius: 8,
      bottomSheetHandleSize: {
        height: 4,
        width: 50,
      },
      selectedCountryCardStyle: "bordered",
      documentTypeCardStyle: "bordered",
      cardCornerRadius: 0,
    },
  },
  iOS: {
    documentTypeIcons: {
      idCard: "forward",
      passport: "close",
      drivers: "close",
      residencePermit: "close",
    },
  },
  android: {
    colors: {
      statusBarColor: { light: "#ffff0090", dark: "#00ff0090" },
    },
  },
};