Field Comparison Module

📘
This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation here. Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade.

Full rollout to all clients still TBD.

The Field Comparison module collects the user's first and last name and submits them for backend verification against data already on file for the session.

Follows the form-based pattern. See the patterns page for the shared lifecycle.

Tag

<incode-field-comparison> is a standard Web Component. Importing the UI subpath registers the custom element; importing the CSS applies the module's styles.

import '@incodetech/web/field-comparison';
import '@incodetech/web/field-comparison/styles.css';

Properties

Property	Type	Required	Description
`config`	`FieldComparisonConfig`	❌	No options
`onFinish`	`() => void`	❌	Called when the module completes
`onError`	`(error: string) => void`	❌	Called when an error occurs

Configuration

The module takes no configuration — the backend sends an empty module configuration for this step:

type FieldComparisonConfig = Record<string, never>;

Which fields the backend compares, and how it scores the result, is configured server-side.

State machine

FieldComparisonState is a discriminated union over status:

Status	Description
`idle`	Initial state, waiting for `load()`.
`inputting`	Form rendered; the user enters their name.
`submitting`	Sending the entered names to the backend.
`success`	Submission accepted.
`finished`	Terminal.
`error`	Submission failed; the user can retry or skip.

When status === 'inputting':

Property	Type	Description
`fields`	`FieldComparisonFields`	Current values: `{ firstName, lastName }`.
`canSubmit`	`boolean`	`true` when both names have values and submitting is allowed.

submitting carries the same fields, frozen at submission time, so you can keep the form visible while the request is in flight.

API methods

Method	Purpose
`load()`	Starts the module. Moves `idle` → `inputting`. Call this first.
`setField(field, value)`	Update one field. `field` is `'firstName'` or `'lastName'`.
`submit()`	Submit the entered names. Available when `canSubmit` is `true`.
`retry()`	Retry after an `error`.
`skip()`	Skip the module and finish without submitting.

Plus the universal lifecycle: subscribe, getState, reset, stop.

Headless example

import { setup } from '@incodetech/core';
import { createFieldComparisonManager } from '@incodetech/core/field-comparison';

const manager = createFieldComparisonManager({ config: {} });

manager.subscribe((state) => {
  if (state.status === 'inputting') {
    renderForm(state.fields, state.canSubmit);
  }
  if (state.status === 'finished') {
    console.log('Field comparison complete');
  }
});

manager.load();

// Wire your inputs to setField, then submit.
manager.setField('firstName', 'Ada');
manager.setField('lastName', 'Lovelace');
manager.submit();

Tag

Properties

Configuration

State machine

API methods

Headless example

See also