KYC (React Native SDK)

Know Your Customer (KYCKYC Know Your Customer - the identity verification process for consumer identities. This process allows you to seamlessly and securely verify your user's identity. Weavr will ask users to submit the necessary information and documentation so that they can get approved by financial providers.) due diligence is one of the steps required to onboard consumers onto your app. We provide a KYCKYC Know Your Customer - the identity verification process for consumer identities. This process allows you to seamlessly and securely verify your user's identity. Weavr will ask users to submit the necessary information and documentation so that they can get approved by financial providers. 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.

Use it for: the identity-verification step of consumer onboarding, after the consumer's profileProfile A template defining the configuration for one type of object - corporate identity, consumer identity, managed account, managed card, transfer, or outgoing wire transfer. When you create one of these objects you reference its Profile ID, which tells Weavr which limits, currencies, supported countries, branding, and fees to apply. Your programme ships with one or more Profile IDs per supported object type. has been created.

Get the KYC reference

Obtain the KYCKYC Know Your Customer - the identity verification process for consumer identities. This process allows you to seamlessly and securely verify your user's identity. Weavr will ask users to submit the necessary information and documentation so that they can get approved by financial providers. reference ID by invoking the following API:

POST/consumers/kycTry it

Request

{
  "kycLevel": "KYC_LEVEL_1",
  "prefillDetails": [
    {
      "name": "string",
      "value": "string"
    }
  ]
}

Response

{
  "reference": "string",
  "kycLevel": "KYC_LEVEL_1"
}

Start the KYC flow

Pass the reference into startKyc. The theme argument is optional - see Customize the look and feel for an example theme object and the WeavrKYCTheme type.

Start 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);
    },
    onTokenExpired: () => {
      console.log("get new token ");
      return new Promise<any>((res, rej) => {
        res("new_Token"); //here we should pass new token
      });
    },
  },
  theme,
  locale // optional ISO 639-1 code for the KYC provider's UI; see Localization
);

startKyc accepts additional optional trailing arguments after locale (email, phone, token) for pre-filling user details and providing an access token. For more on the locale argument, see React Native localization.

Customize the look and feel

You can use our theme config to set the look and feel of the SDK, including the fonts, colors, and images used. As a prerequisite you need to load fonts and images as explained in Install the SDK.

Create a theme object and set its properties as shown in the following example:

import type { WeavrKYCTheme } from "@weavr-io/secure-components-react-native";

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" },
    },
  },
};