Quick Start
In this quick start guide, you can quickly run two sample onboarding flows with OneSDK and see it in action.
Step1: Obtain your API credentials
API Access
If you don't already have an account with FrankieOne, you need to contact FrankieOne customer support team to get new credentials.
To be able to run OneSDK, you need to have the API URL and credentials ready:
- Customer ID and Child ID
- API Key
- Backend URL
Step 2: Copy the following code snippet
API Credentials
Do not publish your credentials in your front-end application for security reasons. The following sample HTML codes are for illustration only. You need to create a session token from your server side and only pass the token to your front-end applicattion.
Sample 1: eKYC only
The following code sample will give you an onboarding flow with eKYC only (manual capture).
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>oneSdk onboarding</title>
<script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
<script>
async function startOneSdk() {
const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
const tokenResultRaw = await fetch("https://backend.kycaml.uat.frankiefinancial.io/auth/v1/machine-session", {
method: "POST",
headers: {
"authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
"Content-Type": "application/json"
},
body: JSON.stringify({
permissions: {
"preset": "one-sdk",
"reference": "random"//"<YOUR_UNIQUE_CUSTOMER_REF>"
}
})
});
const tokenResult = await tokenResultRaw.json();
const sessionObjectFromBackend = tokenResult;
const oneSdk = await OneSdk({
session: sessionObjectFromBackend,
mode: "development",
recipe: {
form: {
provider: {
name: 'react'
//googleApiKey: "YOUR_API_KEY"
},
}
}
});
oneSdk.on('*', console.log);
const oneSdkIndividual = oneSdk.individual();
oneSdkIndividual.setProfileType('auto');
const welcome = oneSdk.component("form", {
name: "WELCOME",
type: "manual",
/*descriptions: [
{ label: 'This is a sample dynamic page.', style: {} },
{ label: 'It can contain multiple paragraphs.', style: {} },
], */
//cta: {style: {'ff-button':{backgroundColor: "red"}}}
});
const consent = oneSdk.component("form", {name: "CONSENT"});
const personal = oneSdk.component("form", {
name: "PERSONAL",
type: "manual",
});
const document = oneSdk.component("form", {
name: "DOCUMENT",
type: "manual",
numberOfIDs: 1,
});
const review = oneSdk.component("form", {
name: "REVIEW",
type: "manual",
verify: true
});
const retry = oneSdk.component("form", {
name: "RETRY",
type: "manual",
});
const result_fail = oneSdk.component("form", {
name: "RESULT",
type: "manual",
state: 'FAIL',
title: {label:'Max attempt reached'},
descriptions: [{label:'You have reached all the attempts. Our officer will review your details and get in touch.'}, {label:'Please close the browser'}],
cta:{label: 'Close'}
});
welcome.mount("#form-container");
welcome.on("form:welcome:ready", () => {
consent.mount("#form-container");
});
consent.on("form:consent:ready", async () => {
personal.mount("#form-container");
});
welcome.on("form:welcome:failed", () => {
// display error message
});
welcome.on("*", (message) => {
console.log(message);
});
personal.on("form:personal:ready", async () => {
document.mount("#form-container");
});
document.on("form:document:back", async ({inputInfo}) => {
personal.mount("#form-container");
});
document.on("form:document:ready", async ({inputInfo}) => {
review.mount("#form-container");
});
let count = 0;
review.on("form:result:partial", async () => {
if (count < 2)
{
retry.mount("#form-container");
count+=1;
}
else
{
result_fail.mount("#form-container");
}
});
}
</script>
<style>
</style>
</head>
<body style="background-color: white" onload="startOneSdk()">
<div id="form-container" style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"></div>
</body>
Sample 2: IDV flow
The following code sample gives you an onboarding flow with OCR and Biometrics.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>oneSdk onboarding</title>
<script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
<script>
async function startOneSdk() {
const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
const tokenResultRaw = await fetch("https://backend.kycaml.uat.frankiefinancial.io/auth/v1/machine-session", {
method: "POST",
headers: {
"authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
"Content-Type": "application/json"
},
body: JSON.stringify({
permissions: {
"preset": "one-sdk",
"reference": "random"//"<YOUR_UNIQUE_CUSTOMER_REF>"
}
})
});
const tokenResult = await tokenResultRaw.json();
const sessionObjectFromBackend = tokenResult;
const oneSdk = await OneSdk({
session: sessionObjectFromBackend,
mode: "development",
recipe: {
form: {
provider: {
name: 'react'
//googleApiKey: "YOUR_API_KEY"
},
}
}
});
oneSdk.on('*', console.log);
const oneSdkIndividual = oneSdk.individual();
oneSdkIndividual.addConsent("general");
oneSdkIndividual.addConsent("docs");
oneSdkIndividual.addConsent("creditheader");
await oneSdkIndividual.submit();
const idv = oneSdk.flow("idv");
const loading1 = oneSdk.component("form", {name: "LOADING", title: {label: "Loading..."}, descriptions: [{label: ""}]});
const loading2 = oneSdk.component("form", {name: "LOADING", title: {label: "Processing results..."}, descriptions: [{label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."}]});
const review = oneSdk.component("form", {
name: "REVIEW",
type: "ocr",
});
let before = true;
idv.on("loading", (display)=>{
if(display){
if (before)
{
loading1.mount("#loading1");
}
}else{
if (before)
{
loading1.unmount();
}
before = false;
}
})
idv.on("results", async ({checkStatus, document, entityId}) => {
if (checkStatus) {
console.log("results succesfful");
loading2.unmount();
review.mount("#idv-el");
} else {
console.log("no data returned");
}
});
idv.on("error", ({ message, payload }) => {
console.log("received error");
console.log(message, payload);
});
idv.on("detection_complete", (message) => {
console.log("capture finished");
console.log(message);
loading2.mount("#loading2");
});
idv.on("*", (message) => {
console.log(message);
});
review.on("form:review:ready", async (message) => {
console.log(message);
});
idv.mount("#idv-el");
}
</script>
<style>
</style>
</head>
<body style="background-color: white" onload="startOneSdk()">
<div id="idv-el" style="top: 0;left: 0; width: 100%; height: 100%; display: block"></div>
<div id="loading1"></div>
<div id="loading2"></div>
</body>
</html>
Step 3: Replace your credentials
In the code snippet, replace the following items with your credentials
CUSTOMER_ID
CUSTOMER_CHILD_ID
: If you don't have a child ID, please removeCUSTOMER_CHILD_ID
from the code line below:
"authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`)
API_KEY
reference
: Use a unique customer reference- Google Map API key (Optional): If you do have a Google Map API key, you can provide it in the following format, so that you can auto search addresses in the OneSDK forms:
const oneSdk = await OneSdk({
session: sessionObjectFromBackend,
mode: "development",
recipe: {
form: {
provider: {
name: 'react',
googleApiKey: "YOUR_API_KEY"
},
}
}
});
Step 4: Run the sample
Save the final code into an HTML file, and simply open it on your desktop or mobile browser.
Updated about 2 months ago