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

# OneSDK Quickstart Guide

> OneSDK provides two implementation approaches to match your technical requirements and customization needs.

## Implementation Options

<CardGroup cols={2}>
  <Card title="Hosted OneSDK" icon="cloud">
    FrankieOne hosts and manages the SDK infrastructure for you.

    **Perfect for**:

    * Quick implementation

    * Minimal technical overhead

    * Teams focusing on core business logic
  </Card>

  <Card title="Embedded OneSDK" icon="code">
    You host and manage the SDK within your infrastructure.

    **Perfect for**:

    * Complete flow customization

    * Deep integration requirements

    * Teams with strong technical resources
  </Card>
</CardGroup>

<AccordionGroup>
  <Accordion title="Detailed Comparison">
    | Feature             | Hosted OneSDK         | Embedded OneSDK |
    | ------------------- | --------------------- | --------------- |
    | Setup Complexity    | Minimal               | Advanced        |
    | Implementation Time | Days                  | Weeks           |
    | Flow Control        | Limited               | Complete        |
    | Customization       | Basic                 | Extensive       |
    | Maintenance         | Handled by FrankieOne | Self-managed    |
    | Cost                | Additional fee        | Base pricing    |
    | Infrastructure      | Managed               | Self-hosted     |
  </Accordion>
</AccordionGroup>

## Technical Requirements

<CardGroup cols={2}>
  <Card title="Frontend Knowledge" icon="code">
    * Modern JavaScript/TypeScript
    * Frontend frameworks (React, Vue, Angular)
    * NPM package management
  </Card>

  <Card title="Development Setup" icon="gear">
    * Node.js 18+
    * Modern web browser
    * HTTPS for local development
    * TypeScript 5+ (If you're using a web application framework)
  </Card>
</CardGroup>

## Getting Started

<Callout icon="bell" color="#FFCA16" iconType="regular">
  Always use environment-specific credentials and never commit API keys to version control.
</Callout>

<Steps>
  <Step title="Obtain Your Credentials">
    <AccordionGroup>
      <Accordion title="Required Credentials">
        You'll need the following for both UAT and Production:

        ```
            - Customer ID
            - API Keys
        ```

        <Callout icon="thumbtack" color="#1A6CFF" iconType="regular">
          Don't have credentials? Contact [FrankieOne Support <Icon icon="arrow-up-right-from-square" size={12} />](mailto:support@frankieone.com) to get started.
        </Callout>
      </Accordion>

      <Accordion title="Environment URLs">
        ```bash theme={null}
        UAT: https://backend.kycaml.uat.frankiefinancial.io
        PROD: https://backend.kycaml.frankiefinancial.io
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Install the SDK">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @frankieone/one-sdk
      ```

      ```bash yarn theme={null}
      yarn add @frankieone/one-sdk
      ```
    </CodeGroup>
  </Step>
</Steps>

<Panel>
  ##### Quick Integration Example

  <Callout icon="bell" color="#FFCA16" iconType="regular">
    Note: The sample code below is just an example. **Never generate tokens on the frontend** — doing so can expose your credentials. Always generate tokens securely on your backend and pass them to your app as needed.
  </Callout>

  ```javascript theme={null}
     import OneSDK from '@frankieone/one-sdk';
     
     const tokenResultRaw = await fetch(
       'https://backend.kycaml.uat.frankiefinancial.io/auth/v2/machine-session',
       {
         method: 'POST',
         headers: {  // Encode credentials as base64 for authorization header
           authorization: 'machine ' + btoa(`${CUSTOMER_ID}:${API_KEY}`),
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           permissions: {
             preset: 'one-sdk',
             // You can pass either your own unique customer reference
             // or if entity already created/existed, you can pass its ID here
             reference: "customer-reference",
             entityId: "abc-def-ghi"
           },
         }),
       }
     );
     
     // Initialize OneSDK with configuration
     const oneSdk = await OneSDK({ // Pass the auth token response
       session: tokenResultRaw,    // Set environment mode
       mode: "production",
       recipe: {
         ocr: {
           maxDocumentCount: 3,    // Allow up to 3 document scans
         }
       }
     });
  ```

  <Check>
    Visit our [npm package page <Icon icon="arrow-up-right-from-square" size={12} />](https://www.npmjs.com/package/@frankieone/one-sdk) for the latest version and detailed API documentation.
  </Check>
</Panel>