Quick Start

1

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.

2

Choose Your Integration Flow

Select the implementation that best fits your needs:

eKYC Flow
IDV Flow

Manual capture and verification flow.

ekycFlow.html

<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();
  individual.setProfileType("auto");

  // 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.

idvFlow.html

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

3

Configure Your Credentials

Required Configuration

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

Optional Configuration

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

4

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

OneSDK

Smart UI (for deprecation)

Prerequisites

Essential Credentials

Backend URLs

Implementation Guide

Security Best Practice

Development Tips

​Prerequisites

Essential Credentials

Backend URLs

​Implementation Guide

Security Best Practice

Development Tips

Prerequisites

Implementation Guide