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 [email protected] 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'

| Props | Type | Values | Component | Description | | ------------------ | --------------- | -------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | inProduction | string | prd, stg, dev, sand | All Components | It isn't required, the default value is "prd". You should use "dev" to test integration and then pass to "stg". This env return real data, finally you can delete this prop or change to "prd" | | mode | string | dark, light | All Components | It isn't required, the default value is "light". | | clientId | string | Global Bridge Connections send you for email | All Components | This value is unique for each client and will be sent for email. | | authorize | promise | () => Promise() | All Components | This Function verify clientId vs TOKEN and return accessToken. | | picBase64 | string | | Facematch - 1098 | Is required. It would be used to compare the selfie image with this picture | | countryCodeAllowed | array of string | | Document Reader - 1099 | It isn't required. If exist these props, the component will validate the client geolocation vs the code country thay is used as country allowed. You can use several countries but remember to use the country code aording to the ISO | | validateVpn | boolean | | Document Reader - 1099 | It isn't required. If exist these props, the component will validate the use of VPN. The default value is false | | dualModeRequired | boolean | | Document Reader - 1099 | It isn't required. Only apply to OCR Component. If exist these props, the component will be forced to upload two side of docuemnt. The default value is false | | successMessage | string | | All Components | It isn't required. If exist these props, the component will take this message, else we use the default values for each component | | alertMessage | string | | All Components | It isn't required. If exist these props, the component will take this message, else we use the default values for each component, Only apply to Blacklist Component | | faceMatch | string | | Liveness Check - 1096 | It isn't required. If exist these props, should be an image in base64 or url, the component will to compare this image with the liveness check. The default vaue is null | | showFilterByButton | boolean | | Blacklist - 1095 | It isn't required. If these props exist, they should be a boolean. The component hides the 'Filter By' button if this prop is false. The default value is true |

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
• dataBlackList: function to get response
• validateVpn: boolean
• alertMessage: string
• showFilterByButton: boolean

<BlackList
  clientId={clientId}
  authorize={getAccessToken}
  dataBlackList={getDataBlackList}
  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'
  showFilterByButton={false} // Default value is true
/>

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"
/>;