> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<AccordionGroup>
  <Accordion title="Required Credentials">
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem', alignItems: 'start' }}>
      <Card title="Essential Credentials" icon="key">
        * Customer ID
        * Child ID (if applicable)
        * API Key
        * Service Name — Required in the request body for V2 API calls.
      </Card>

      <Card title="Backend URLs" icon="server">
        * UAT: `https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session`
        * Prod: `https://backend.kycaml.frankiefinancial.io/auth/v2/machine-session`
      </Card>
    </div>

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

    <Note>
      Need credentials? Contact FrankieOne support to set up your account.
    </Note>
  </Accordion>
</AccordionGroup>

## Implementation Guide

<Steps>
  <Step title="Prepare Your Environment">
    <Callout icon="bell" iconType="regular" color="#FFCA16">
      ##### Security Best Practice

      Never expose API credentials in client-side code. Generate session tokens server-side and pass only the token to your frontend.
    </Callout>
  </Step>

  <Step title="Choose Your Integration Flow">
    Select the implementation that best fits your needs:

    <Tabs>
      <Tab title="eKYC Flow">
        Manual capture and verification flow.

        ```html ekycFlow.html theme={null}
        <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>
        ```
      </Tab>

      <Tab title="IDV Flow">
        OCR and Biometrics verification flow.

        ```html idvFlow.html theme={null}
        <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>
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Your Credentials">
    <AccordionGroup>
      <Accordion title="Required Configuration">
        Replace the following placeholders with your credentials:

        ```javascript theme={null}
        const config = {
          CUSTOMER_ID: "your-customer-id",
          CUSTOMER_CHILD_ID: "your-child-id", // Remove if not applicable
          API_KEY: "your-api-key"
        };
        ```
      </Accordion>

      <Accordion title="Optional Configuration">
        <Tabs>
          <Tab title="Google Maps Integration">
            Add Google Maps support for address auto-completion:

            ```javascript theme={null}
            const oneSdk = await OneSDK({
              session: sessionObjectFromBackend,
              mode: "development",
              recipe: {
                form: {
                  provider: {
                    name: "react",
                    googleApiKey: "your-google-maps-api-key"
                  }
                }
              }
            });
            ```
          </Tab>

          <Tab title="Custom Reference">
            Add a unique customer reference:

            ```javascript theme={null}
            permissions: {
              preset: "one-sdk",
              reference: "your-unique-reference"
            }
            ```
          </Tab>
        </Tabs>
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="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

    <Callout icon="star" iconType="regular" color="#3DD892">
      ##### 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
    </Callout>
  </Step>
</Steps>

<Callout icon="check" iconType="regular" color="#3DD892">
  Congratulations! You've successfully set up OneSDK. Need help? Contact our support team for assistance.
</Callout>
