Skip to main content
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.

​
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>

​
Configuration 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'}
  ]
});

​
Customization Guide

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
}
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'
  }
]

​
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

1

Add Container Element

Add a container div to your HTML:
<div id="form"></div>
2

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"}
  ]
});
3

Mount Component

Mount the component to your container:
document.mount("#form");
4

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"
/>