gbc-test-2 v4.8.14

KYC Kit

Components to make a complete secure onboarding

Library installation

• Run npm i gbc-test-2

or

• Run yarn add gbc-test-2

Import CSS component with:

import "../node_modules/gbc-test-2/dist/style.css";

Import components using:

import { BlackList, LivenessCheck, DocumentReader } from "gbc-test-2";

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

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 with: declare module 'gbc-test-2'

Document Reader Component

import { DocumentReader } from "gbc-test-2";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• loader: bool default is false

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

Liveness Component

import { BlackList } from "gbc-test-2";

Props Available:

• mode: string 'dark' || 'light' default is 'light'
• loader: bool default is false

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}
    inProduction="prd"
/>

BlackList Component

import { BlackList } from "gbc-test-2";

<BlackList
  clientId={clientId}
  authorize={getAccessToken}
  inProduction="prd" // Default value is prd, not is required
  mode="dark" // Default value is light, not is required
/>