Result
Last updated
Last updated
This component can be found under the Sybrin.Identity
namespace and is called ResultComponent
.
Full name: Sybrin.Identity.ResultComponent
.
It is a component that displays the result of a document scan provided by the Sybrin Identity JavaScript API and presents it in the form of a UI component. The result is presented as a set of parsed data fields and the accompanying front and back photos (if applicable). It's recommended that you use this component if you do not wish to create your own UI and simply want to display a result provided by a completion of the Sybrin Identity Web SDK identity data extraction process.
The document scan result may be obtained by either using an instance of the JavaScript API or by using a component such as DocumentScanComponent
to run data extraction.
With default styling, the result component appears as follows:
Upon clicking "Continue", the onContinue
event will fire.
Upon clicking "Retry", the onRetry
event will fire.
The component supports the option to provide a boolean parameter called promptMobileOnRetry
, which when set to true
will result in a prompt to query if the user would like to try mobile capture upon clicking "Retry". Clicking "No" will fire the onRetry
event with a boolean parameter set to false
, and clicking "Yes" will fire the onRetry
event with a boolean parameter set to true
.
The component supports the option to provide a boolean parameter called isSingleStep
, which when set to true
will result in the "Next" button's text being displayed as "Complete Step" instead.
The result component can be initialized using the following code:
The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.
Please note that 'result' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.
During initialization, the result component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:
Required:
id (string)
: ID of the element you wish to use for component initialization. Not required if element
is passed.
element (HTMLElement)
: Element you wish to use for component initialization. Not required if id
is passed.
result (Sybrin.Identity.DocumentScanResult)
: The Sybrin.Identity.DocumentScanResult
instance to construct the UI with.
Optional:
promptMobileOnRetry (boolean)
: When set to true
this will result in a prompt to query if the user would like to try mobile capture upon clicking "Retry". Clicking "No" will fire the onRetry
event with a boolean parameter set to false
, and clicking "Yes" will fire the onRetry
event with a boolean parameter set to true
. Default false
isSingleStep (boolean)
: When set to true
this will result in the "Next" button's text being displayed as "Complete Step" instead of "Next". Default false
Warning: Initialization will fail if the intended host element does not exist yet.
Always ensure that the initialize function is only called once the DOM is loaded.
The result component may be removed from the UI by calling the "destroy()" function on it.
Example:
The result component offers multiple events. To hook onto an event, simply assign a function to it.
The following options are available:
onContinue()
onRetry(mobile: boolean)
This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:
No parameter is passed to this function call.
This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:
The mobile parameter is of type boolean. By default its value would be set to false. It will only be true if the user clicked "Retry" while the promptMobileOnRetry
parameter is set to true upon initialization of the component.
The result component is structured a follows:
The classes and elements specified above may be used to freely style the result component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.
The identity result component is dynamic. The presence and visibility of images and data fields may vary.
Styling implementation example: