> ## 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">
    <CardGroup cols={2}>
      <Card title="Essential Credentials" icon="key">
        * Customer ID
        * Child ID (if applicable)
        * API Key
      </Card>

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

    <Callout icon="thumbtack" color="#1A6CFF" iconType="regular">
      Need credentials? Contact FrankieOne support to set up your account.
    </Callout>
  </Accordion>
</AccordionGroup>

## Implementation Guide

<Steps>
  <Step title="Prepare Your Environment">
    <Callout icon="bell" color="#FFCA16" iconType="regular">
      ##### 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();
          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>

        ```
      </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" color="#3DD892" iconType="regular">
      ##### 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" color="#3DD892" iconType="regular">
  Congratulations! You've successfully set up OneSDK. Need help? Contact our
  support team for assistance.
</Callout>
