Skip to main content

​
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'}
  ]
  // Add logo to top of the page
  logo: {
    src: './assets/logo.png' // path to your logo
  },
  style: {
    'ff-logo': {
      'width': '50px'
    }
  }
});

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

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