Progeny SDK

How to use

npm install progeny-sdk-web
import ProgenySDK from 'progeny-sdk-web'

Add required markup

This will serve as containers to the markup the SDK will generate. This way, you can control where to display it on your layout.

A. If using the SDK without the preset buttons. The endpoint functionalities are triggered manually by calling the SDK functions.

<div id="progeny-sdk-loader"></div>
<div id="progeny-sdk-camera"></div>
<div id="progeny-sdk-document-options"></div>
<div id="progeny-sdk-upload-scan-options"></div>
<div id="progeny-sdk-aml"></div>
<div id="progeny-sdk-upload"></div>

B. If using the SDK with the preset buttons. The endpoint functionalities are triggered by just clicking on the preset buttons.

<div id="progeny-sdk-loader"></div>
<div id="progeny-sdk-camera"></div>
<div id="progeny-sdk-document-options"></div>
<div id="progeny-sdk-upload-scan-options"></div>
<div id="progeny-sdk-aml"></div>
<div id="progeny-sdk-upload"></div>
<div id="progeny-sdk-buttons"></div>

Create an instance of the SDK entrypoint

-Instantiate the SDK entrypoint -Set the endpoints base url -Set a callback that will provide the results of the token request transaction and return the -received token back to the SDK.

const sdk = new ProgenySDK('endpoints_base_url', async () => {   
    const accessToken = await getToken();
    return accessToken;
});

await getToken() in this case, calls server-side code that handles the token request transactions.

The token callback function is a means to hide and secure token request transactions from the browser client. It is advised that token request transactions are handled on the server (e.g PHP, NodeJS, Python) so that account credentials are not exposed to the browser client.

See the documentation on how to request for tokens https://docs.progeny.tech/our-api/token-obtain.

-call the initializeMarkUp function to generate the layout. (Make sure required markups are already loaded)

sdk.initializeMarkUp();

If using the SDK with preset buttons Add a third parameter to the SDK instance which will serve as the response callback. This response callback will be your listener for the responses received.

const sdk = new ProgenySDK(
'base_url', 
()=>{ //token callback }, 
(res)=>{ //response callback }
);

AIRSNAP

The selfie camera is using our Airsnap SDK which serves as a guide on how to properly position your face on the camera. To make the Airsnap work, follow the instructions below:

1. Navigate to package directory (node_modules/progeny-sdk-web/dist/public)
2. Copy these files and paste it to you client side dist or public folder
   a. liveface.data
   b. liveface.wasm

While the airsnap is evaluating the face, it consumes device memory resources. Thus, it will make the app crash once memory is out of bounds. This happens specially when a user takes time to capture a face. We created a function to handle this airsnap error. (By default when airsnap stops working because of memory out of bounds error, we switch to manual capture).

sdk.onAirsnapError=() => {
    setTimeout(() => {
      do anything here
    }, 2000)
}

We strongly advise to reload the page for airsnap to clean memory usage. Add these two functions on your consuming app and make sure to place it after sdk.initializeMarkUp()

Example on vue js app:
    mounted() {
        sdk.initializeMarkUp();
        sdk.liveness().then((response) => {
            //handle response here
        }).catch((err) => {   
            //handle error here
        });
        sdk.onAirsnapError=() => {
            console.log('Airsnap Error')
            setTimeout(() => {
            window.location.reload();
            }, 2000)
        }
    }

SDK functions

Liveness

example on React App:

const liveness = () => {
    sdk.liveness().then((response) => {
        //handle response here
    }).catch((err) => {   
         //handle error here
    });
}
<button onClick={liveness}>Liveness</button>

Register

example on React App:

const register = () => {
    sdk.register().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={register}>Register</button>

Authorize

example on React App:

const authorize = (uuid) => {
    sdk.authorize(uuid).then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={() => authorize(uuid)}>Authorize</button>

KYC

example on React App: KYC without AML

const kyc = () => {
    sdk.kyc().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={kyc}>Kyc</button>

KYC with AML

const kyc = () => {
    sdk.kyc({ aml: true }).then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={kyc}>Kyc</button>

Passport OCR

example on React App:

const passportOcr = () => {
    sdk.ocrPassport().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={passportOcr}>Passport OCR</button>

ID OCR

example on React App:

const idOcr = () => {
    sdk.ocrId().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={idOcr}>Id OCR</button>

AML (Background Check)

example on React App:

const aml = () => {
    sdk.aml().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={aml}>AML</button>

Face Search

example on React App:

const faceSearch = () => {
    sdk.faceSearch().then((response) => {
        //handle response here
    }).catch((err) => {   
        //handle error here
    });
}
<button onClick={faceSearch}>Face Search</button>

Stop Camera

For SPA applications, make sure to stop camera stream when component is unmounted.

    sdk.stopCamera();