Manual Document Screen

The Manual Document screen enables secure ID capture from your users. You can configure it to collect one or multiple forms of identification, with full customization options.

Quick Implementation

<div id="form"></div>

const document = oneSdk.component("form", {
  name: "DOCUMENT",
  type: "manual",
});

document.mount("#form");

Configuration Options

Basic Setup
Advanced Options

const document = oneSdk.component('form', {
  // Set component name to identify this as document collection screen
  name: "DOCUMENT",
  // Use manual input mode rather than OCR scanning
  type: "manual", 
  // Require user to submit two forms of identification
  numberOfIDs: 2,
  // Configure the main heading
  title: {
    label: "Choose Your Identification"
  },
  // Add explanatory text below the heading
  descriptions: [
    {label: 'We need two forms of ID to verify your identity'}
  ]
  // Add logo to top of the page
  logo: {
    src: './assets/logo.png' // path to your logo
  },
  style: {
    'ff-logo': {
      'width': '50px'
    }
  }
});

const document = oneSdk.component('form', {
  // Set component name to identify this as document collection screen  
  name: "DOCUMENT",
  // Use manual input mode rather than OCR scanning
  type: "manual",
  // Require user to submit two forms of identification
  numberOfIDs: 2,
  // Configure the main heading with custom styling
  title: {
    label: "Identity Verification",
    style: "custom-title-class" // Apply custom CSS class to title
  },
  // Add explanatory text with custom styling
  descriptions: [
    {
      label: 'Please provide two government-issued IDs',
      style: 'ff-description' // Apply OneSDK's built-in description styling
    }
  ],
  // Add logo to top of the page
  logo: {
    src: './assets/logo.png' // path to your logo
  },
  style: {
    'ff-logo': {
      'width': '50px'
    }
  }
});

Customization Guide

General Settings

Number of IDs

Configure how many ID documents users must submit:

numberOfIDs: 2  // Requires two forms of ID

Users will be guided through submitting each required document sequentially.

Page Title

Customize the page header:

title: {
  label: "Identity Verification",
  style: "custom-title-class"  // Optional
}

Description Customization

Add descriptive text to guide users:

descriptions: [
  {
    label: 'Please provide a valid government-issued ID',
    style: 'ff-description'  // Optional styling
  },
  {
    label: 'Accepted formats: passport, driver's license, or national ID',
    style: 'ff-description'
  }
]

Multiple ID Text Customization

Use labels instead of label if you need to provide different text for each document when collecting multiple IDs.

const documents = oneSdk.component('form', {
  name: 'DOCUMENT',
  type: 'manual',
  numberOfIDs: 2,
  title: {
    labels: ['Title for first ID', 'Title for second ID'],
  },
  descriptions: [
    {
      labels: [
        'Label for first ID.',
        'Label for second ID.',
      ],
    },
  ],
  subtitle: {
    labels: [
      'Subtitle for first ID',
      'Subtitle for second ID',
    ],
  },
});

Event Handling

Lifecycle Events

form:document:loaded (Screen mounted successfully)
form:document:ready (User completed document submission)
form:document:failed (Screen encountered an error)

Navigation Events

form:document:back - User clicked back button
form:document:navigate - Navigation occurred

Event Listening Example

Event Handlers

document.on('form:document:loaded', () => {
  console.log('Document screen loaded successfully');
});

document.on('form:document:ready', (data) => {
// Handle successful document submission
console.log('Documents submitted:', data);
});

document.on('form:document:failed', (error) => {
console.error('Document submission failed:', error);
});

Best Practice

Always implement error handling for the form:document:failed event to provide a smooth user experience when issues occur.

Implementation Steps

Add Container Element

Add a container div to your HTML:

<div id="form"></div>

Initialize Component

Create and configure the document component:

const document = oneSdk.component("form", {
  name: "DOCUMENT",
  numberOfIDs: 1,
  title: { label: "Choose Your ID" },
  type: "manual",
  documents: [
    {
      type: 'DRIVERS_LICENCE',
      countries: {
        default: {
          default: {
            fields: [
              {
                name: 'country',
                options: [
                  {
                    label: 'Australia',
                    value: 'AUS',
                  },
                  {
                    label: 'Singapore',
                    value: 'SGP',
                  },
                ],
              },
            ],
          },
        },
        AUS: {
          default: {
            fields: [
              {
                name: 'country',
                options: [
                  {
                    label: 'Australia',
                    value: 'AUS',
                  },
                ],
              },
            ],
          },
        },
      },
    },
    {type: "PASSPORT"}
  ]
});

Mount Component

Mount the component to your container:

document.mount("#form");

Set Up Event Listeners

Add necessary event listeners for your use case:

document.on("form:document:ready", handleSubmission);

Ensure your HTML element has the correct viewport meta tags for proper mobile rendering:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
  charset="UTF-8"
/>

​Manual Document Screen

​Quick Implementation

​Configuration Options

​Customization Guide

Number of IDs

Page Title

​Event Handling

Lifecycle Events

Navigation Events

​Event Listening Example

Best Practice

​Implementation Steps

Manual Document Screen

Quick Implementation

Configuration Options

Customization Guide

Event Handling

Event Listening Example

Implementation Steps