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/
- 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";
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.
/* 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 | Description |
---|---|---|---|
inProduction | string | prd, stg, dev, sand | 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 | It isn't required, the default value is "light". |
clientId | string | Global Bridge Connections send you for email | This value is unique for each client and will be sent for email. |
authorize | promise | () => Promise() | This Function verify clientId vs TOKEN and return accessToken. |
picBase64 | string | Is required. It would be used to compare the selfie image with this picture | |
countryCodeAllowed | array of string | 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 | It isn't required. If exist these props, the component will validate the use of VPN. The default value is false | |
dualModeRequired | boolean | 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 | 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 | 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 | 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 |
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"
/>;
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"
/>
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"
/>
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"
/>;