Quick Start - frankieone

Prerequisites

Required Credentials

Essential Credentials

Customer ID
Child ID (if applicable)
API Key
Service Name — Required in the request body for V2 API calls.

Backend URLs

UAT: https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session
Prod: https://backend.kycaml.frankiefinancial.io/auth/v2/machine-session

Important: When using V2 endpoints, you must include “serviceName”: “KYC” in the request body. Omitting this field will result in a 400 Bad Request error.

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:

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();

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

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

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.

Documentation Index

​Prerequisites

Essential Credentials

Backend URLs

​Implementation Guide

Security Best Practice

Development Tips

Prerequisites

Implementation Guide