OneSDKModuleseKYC Form

Personal

The Personal Screen component enables end-users to enter their details securely for verification against government data sources. This guide covers implementation, customization, and event handling.

Quick Start

1

Add HTML Container

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

Initialize Component

1const personal = oneSdk.component("form", {
2  name: "PERSONAL",
3  type: "manual",
4});
5
6// Mount to your container
7personal.mount("#form");

Configuration Guide

General Settings

1const personal = oneSdk.component('form', {
2  name: "PERSONAL",
3  type: "manual",
4  title: {
5    label: "Your Personal Details",
6    style: { 'ff-title': {} }
7  },
8  descriptions: [
9    {label: 'We need to collect your data'}
10  ]
11});

For more detailed configuration options, please refer to the Field Configuration section below

You can customize fields based on country (using ISO 3166-1 alpha-3 codes) and state:

1const personal = oneSdk.component('form', {
2  name: "PERSONAL",
3  type: "manual",
4  personal: {
5    countries: {
6      AUS: {
7        NSW: { /* NSW specific config */ },
8        default: { /* Other AU states */ }
9      },
10      NZL: {
11        default: { /* NZ config */ }
12      },
13      default: {
14        default: { /* Default config */ }
15      }
16    }
17  }
18});

Field Configuration

Name

Available Fields
  • givenName
  • middleName
  • familyName
Common Properties
  • fieldType: ‘input’
  • dataType: ‘text’
  • label: Custom label
  • hide: true/false
  • rules:
    • required: { value: ‘boolean’, message: ‘string’ }
    • pattern: { value: ‘regex string’, message: ‘string’ }
1fields: [
2  {
3    fieldType: "input",
4    name: "givenName",
5    label: "Given Name:",
6    dataType: 'text',
7    hide: false,
8    helperText: "As shown on your ID",
9    rules: {
10      required: {
11        value: true,
12        message: "Please enter your given name"
13      },
14      pattern: {
15        value: "^[a-zA-Z]+(\\s+[a-zA-Z]+)*$",
16        message: "Please use alphabetic characters only"
17      }
18    }
19  }
20]

Event Handling

form:personal:loaded

Emitted when the screen is successfully mounted

form:personal:ready

Emitted when form submission is complete and ready for next step

form:personal:failed

Emitted when an error occurs during form operation

Event Listener Example

1personal.on("form:personal:ready", (data) => {
2  // Handle successful form completion
3  console.log("Form completed:", data);
4});
Best Practice

Always implement error handling and loading states when working with Personal Screen events to provide a smooth user experience.

Google Maps API Key

Google Maps API is optional for OneSDK. Customers do not need to enable Google Maps API to use OneSDK—tokens can still be generated without it.

If you have a Google Maps API key, you can provide it for address auto-complete functionality, but it is not required.