gbc-kyc-kit v1.12.0

KYC Kit

Components to make a complete secure onboarding. Global Bridge Connections KYC Kit can read more than 100 countries documents. Ask for your Client ID writing to servicios@globalbridgeconnections.com.py How work it? You can see our documentation https://global-bridge-connections-paragu.gitbook.io/dashboard-kyc/

Library installation

• Run npm i gbc-kyc-kit

or

• Run yarn add gbc-kyc-kit

Import CSS component with:

import "../node_modules/gbc-kyc-kit/dist/style.css";

Style customization

You could customize all styles of components, just need make reference to the label of component as follows:

Important Remember that you can use mode prop to turn between dark or light mode without change styles.

CSS/SASS/SCSS

/* Rest of code */
:root {
  --primary: #1976d2;
  --primary-hov: #2689ed;
  --secondary: #e8edff;
  --text-button-color: #fff;
  --secondary: #e8edff;
  --warning: #f8bb86;
  --success: #4caf50;
  --error: #ff1199;
  --text-color: #8c8c8c;
  --title-color: #262626;
  --font-family: "Poppins", sans-serif;
}

Import components using:

import {
  BlackList,
  LivenessCheck,
  DocumentReader,
  FaceMatch,
} from "gbc-kyc-kit";

Important For all components, you should send a token, this token have 1 hour expiration, and this token you could get from getAccessToken method, you have an example here👇

import axios from "axios"; //Remember to have it installed

const TOKEN = "**************"; //Bearer Token, Global Bridge Connections send you for email
const clientId = "**************"; //Client ID, Global Bridge Connections send you for email
// Is recommended manage this value for env

async function getAccessToken() {
  const customHeaders = {
    "Content-Type": "application/json",
    Authorization: TOKEN,
  };

  const parseReq = {
    method: "POST",
    url: "https://services.globalbridgeconnections.com.py/oauth/access-token",
    headers: customHeaders,
    data: {
      grant_type: "client_credentials",
    },
  };

  try {
    const res = await axios(parseReq);
    const { access_token } = res.data;
    return access_token;
  } catch (error) {
    throw new error("Error getting Token");
  }
}

Important If you use this components with TypeScript, you should create a customType.d.ts into src folder with: declare module 'gbc-kyc-kit'

Document Reader Component

import { DocumentReader } from "gbc-kyc-kit";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• inProduction: string default is prd
• dataDocument: function to get response
• countryCodeAllowed: array of string
• dualModeRequired: boolean
• validateVpn: boolean

const getDataDocument = async (info) => {
  if (info) {
    console.log(info.data);
  }
};
// This component return data and you can get it with getDataDocument function.

<DocumentReader
  dataDocument={getDataDocument}
  clientId={clientId}
  authorize={getAccessToken}
  inProduction="prd"
  successMessage="Documento agregado con éxito"
/>;

Liveness Component

import { LivenessCheck } from "gbc-kyc-kit";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• inProduction: string default is prd
• countryCodeAllowed: array of string
• dataLiveness: function to get response
• faceMatch: base64 to compare with Liveness, if it's null, just will validate Liveness else will validate Liveness first and then face match.
• validateVpn: boolean

const getDataLiveness = async (info) => {
  if (info) {
    console.log(info.data);
  }
};
// This component return data and you can get it with getDataLiveness function.
const listener = (event) => {
    console.log(event)
    if (event.detail) {
      if (event.detail.action === 'PROCESS_FINISHED') {
        const { response } = event.detail.data
        console.log(response)
      }
    }
  }

useEffect(() => {
    const component = document.getElementsByTagName('face-liveness')[0]
    if (component) {
      component.addEventListener('face-liveness', listener)
    }
  }, [listener])

<LivenessCheck
    clientId={clientId}
    authorize={getAccessToken}
    dataLiveness={getDataLiveness}
    inProduction="prd"
    faceMatch={base64Image}
    successMessage="Selfie procesada con éxito"
/>

BlackList Component

import { BlackList } from "gbc-kyc-kit";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• inProduction: string default is prd
• countryCodeAllowed: array of string
• validateVpn: boolean
• alertMessage: string

<BlackList
  clientId={clientId}
  authorize={getAccessToken}
  inProduction="prd" // Default value is prd, not is required
  mode="dark" // Default value is light, not is required
  successMessage="Persona no encontrada en lista de sanciones"
  alertMessage="Persona existente en lista de sanciones"
/>

Facematch Component

import { FaceMatch } from "gbc-kyc-kit";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• inProduction: string default is prd
• picBase64: string img to compare with selfie in base64 format
• dataFaceMatch: function to get response
• countryCodeAllowed: array of string
• validateVpn: boolean

const getDataFaceMatch = async (info) => {
  if (info) {
    console.log(info.data);
  }
};// This component return data and you can get it with getDataFaceMatch function.

const picbase64 = " ...This is the base64 image to be compared with the selfie. It would be image of id document or other image of onboarding maybe"

<FaceMatch
  dataFaceMatch={getDataFaceMatch}
  clientId={clientId}
  authorize={getAccessToken}
  inProduction="prd"
  picBase64={picbase64}
  countryCodeAllowed={["PY"]}
  successMessage="Comparación de rostro procesado exitosamente"
/>;