Quick Start

Get up and running with OneSDK in minutes. This guide walks you through implementing two common onboarding flows: eKYC and IDV verification.

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

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:

Manual capture and verification flow.

ekycFlow.html
1<html lang="en">
2  <head>
3    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4    <title>OneSDK eKYC Onboarding</title>
5    <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
6    
7    <script>
8      async function startOneSDK() {
9        // Configuration
10        const config = {
11          CUSTOMER_ID: "your-customer-id",
12          CUSTOMER_CHILD_ID: "your-child-id", // Optional
13          API_KEY: "your-api-key"
14        };
15
16        // Initialize SDK
17        const oneSdk = await initializeSDK(config);
18
19        // Set up flow components
20        setupFlowComponents(oneSdk);
21      }
22
23      async function initializeSDK(config) {
24        // Get session token
25        const session = await getSessionToken(config);
26
27        // Initialize SDK
28        return await OneSDK({
29          session: session,
30          mode: "development",
31          recipe: {
32            form: {
33              provider: {
34                name: "react"
35              }
36            }
37          }
38        });
39      }
40
41      async function getSessionToken(config) {
42        const response = await fetch(
43          "https://backend.kycaml.uat.frankiefinancial.io/auth/v1/machine-session",
44          {
45            method: "POST",
46            headers: {
47              authorization: "machine " + btoa(
48                `${config.CUSTOMER_ID}:${config.CUSTOMER_CHILD_ID}:${config.API_KEY}`
49              ),
50              "Content-Type": "application/json"
51            },
52            body: JSON.stringify({
53              permissions: {
54                preset: "one-sdk",
55                reference: "your-reference-id"
56              }
57            })
58          }
59        );
60
61        return await response.json();
62      }
63
64      function setupFlowComponents(oneSdk) {
65        const individual = oneSdk.individual();
66        individual.setProfileType("auto");
67
68        // Initialize components
69        const components = {
70          welcome: oneSdk.component("form", {
71            name: "WELCOME",
72            type: "manual"
73          }),
74          consent: oneSdk.component("form", {
75            name: "CONSENT"
76          }),
77          // ... other components
78        };
79
80        // Set up event handlers
81        setupEventHandlers(components);
82      }
83    </script>
84  </head>
85  <body style="background-color: white" onload="startOneSDK()">
86    <div id="form-container" style="position:fixed;top:0;left:0;width:100%;height:100%"></div>
87  </body>
88</html>
3

Configure Your Credentials

Replace the following placeholders with your credentials:

1const config = {
2  CUSTOMER_ID: "your-customer-id",
3  CUSTOMER_CHILD_ID: "your-child-id", // Remove if not applicable
4  API_KEY: "your-api-key"
5};

Add Google Maps support for address auto-completion:

1const oneSdk = await OneSDK({
2  session: sessionObjectFromBackend,
3  mode: "development",
4  recipe: {
5    form: {
6      provider: {
7        name: "react",
8        googleApiKey: "your-google-maps-api-key"
9      }
10    }
11  }
12});
4

Test Your Implementation

  1. Save your code as an HTML file
  2. Open in a web browser
  3. 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.

Built with