Prerequisites
Essential Credentials
- Customer ID
- Child ID (if applicable)
- API Key
Backend URLs
- UAT:
https://backend.kycaml.uat.frankiefinancial.io/auth/v1/machine-session
- Prod:
https://backend.kycaml.frankiefinancial.io/auth/v1/machine-session
Need credentials? Contact FrankieOne support to set up your account.
Implementation Guide
Prepare Your Environment
Security Best Practice
Never expose API credentials in client-side code. Generate session tokens server-side and pass only the token to your frontend.Choose Your Integration Flow
Select the implementation that best fits your needs:Manual capture and verification flow.<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OneSDK eKYC Onboarding</title>
<script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
<script>
async function startOneSDK() {
// Configuration
const config = {
CUSTOMER_ID: "your-customer-id",
CUSTOMER_CHILD_ID: "your-child-id", // Optional
API_KEY: "your-api-key"
};
// Initialize SDK
const oneSdk = await initializeSDK(config);
// Set up flow components
setupFlowComponents(oneSdk);
}
async function initializeSDK(config) {
// Get session token
const session = await getSessionToken(config);
// Initialize SDK
return await OneSDK({
session: session,
mode: "development",
recipe: {
form: {
provider: {
name: "react"
}
}
}
});
}
async function getSessionToken(config) {
const response = await fetch(
"https://backend.kycaml.uat.frankiefinancial.io/auth/v1/machine-session",
{
method: "POST",
headers: {
authorization: "machine " + btoa(
`${config.CUSTOMER_ID}:${config.CUSTOMER_CHILD_ID}:${config.API_KEY}`
),
"Content-Type": "application/json"
},
body: JSON.stringify({
permissions: {
preset: "one-sdk",
reference: "your-reference-id"
}
})
}
);
return await response.json();
}
function setupFlowComponents(oneSdk) {
const individual = oneSdk.individual();
// Initialize components
const components = {
welcome: oneSdk.component("form", {
name: "WELCOME",
type: "manual"
}),
consent: oneSdk.component("form", {
name: "CONSENT"
}),
// ... other components
};
// Set up event handlers
setupEventHandlers(components);
}
</script>
</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>
</html>
OCR and Biometrics verification flow.<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OneSDK IDV Onboarding</title>
<script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
<script>
async function startOneSDK() {
// Configuration
const config = {
CUSTOMER_ID: "your-customer-id",
CUSTOMER_CHILD_ID: "your-child-id", // Optional
API_KEY: "your-api-key"
};
// Initialize SDK
const oneSdk = await initializeSDK(config);
// Set up IDV flow
setupIDVFlow(oneSdk);
}
async function initializeSDK(config) {
// Similar to eKYC flow initialization
}
function setupIDVFlow(oneSdk) {
const individual = oneSdk.individual();
// Add required consents
individual.addConsent("general");
individual.addConsent("docs");
individual.addConsent("creditheader");
// Initialize IDV flow
const idv = oneSdk.flow("idv");
setupIDVComponents(oneSdk, idv);
}
function setupIDVComponents(oneSdk, idv) {
// Initialize components
const components = {
loading: oneSdk.component("form", {
name: "LOADING",
title: { label: "Processing..." }
}),
review: oneSdk.component("form", {
name: "REVIEW",
type: "ocr"
})
};
// Set up event handlers
setupIDVEventHandlers(idv, components);
}
</script>
</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>
Configure Your Credentials
Replace the following placeholders with your credentials:const config = {
CUSTOMER_ID: "your-customer-id",
CUSTOMER_CHILD_ID: "your-child-id", // Remove if not applicable
API_KEY: "your-api-key"
};
Google Maps Integration
Custom Reference
Add Google Maps support for address auto-completion:const oneSdk = await OneSDK({
session: sessionObjectFromBackend,
mode: "development",
recipe: {
form: {
provider: {
name: "react",
googleApiKey: "your-google-maps-api-key"
}
}
}
});
Add a unique customer reference:permissions: {
preset: "one-sdk",
reference: "your-unique-reference"
}
Test Your Implementation
- Save your code as an HTML file
- Open in a web browser
- Test on both desktop and mobile devices
Development Tips
- Use the browser console to monitor events (
oneSdk.on("*", console.log))
- Test with different document types
- Verify all flow stages work as expected
Congratulations! You’ve successfully set up OneSDK. Need help? Contact our
support team for assistance.
