Docs
HomeAPI ReferenceSupportLog in ➔
Search…
⌃K
Links

Web SDK Customisations

Stages

Stages can be customised by providing stage objects. A state object has two components - name and options.

Name

The name attribute is the stage name. The possible values are: intro, userConsentCapture, documentCapture, faceCapture, poaCapture,and completion.
When the userConsentCapturestage is enabled, the onExit callback must be used to handle instances where your client does not grant their consent to be checked as per our prevailing Terms of Services and Privacy statement. Please refer to SDK Settings for further details on the onExit callback.

Options

The options object allows the customisation of each stage as follows:
Stage Name
Options
intro
​
  • heading: change the intro screen heading
  • message: a list of messages to display on the intro screen. Max size 3.
  • startButtonText: change the text of the start button on the intro screen.
documentCapture
​
  • crossDeviceOnly: a boolean that indicates whether to force users to capture their document using their phone. This removes the document upload option.
  • documentTypes: the list of ID document types visible to the user. Valid document types include:
    • passport
    • driving_license
    • national_identity_card
    • residence_permit
    ​
    The value of each can be either a boolean or a country object. Boolean values toggle the visibility of the document type. The country object allows to specify the issuing country for non-passport document types and thus bypass the country selection screen. The country value is the two-letter country ISO code.
faceCapture
​
  • mode: the mode of the facial capture. Possible values are: photo or video.
poaCapture
​
  • documentTypes: the list of Proof of Address (poa) document types visible to the user. Valid poa document types include:
    • bank_statement
    • utility_bill
The value of each document type is a boolean that toggles the visibility of the document type.
completion
​
  • heading: change the completion screen heading.
  • message: a message to display on the completion screen. Max size 1.

Example options object

stages: [
{
name: "intro",
options: {
heading: "We need verify your identity",
message: [
"In order to open an account, we need check a few things.",
"This will take only a moment",
],
startButtonText: "Start Verification"
},
},
"userConsentCapture",
{
name: "documentCapture",
options: {
crossDeviceOnly: true,
documentTypes: {
passport: true,
driving_license: false,
national_identity_card: true,
residence_permit: {
country: "GB",
},
},
},
},
{
name: "faceCapture",
options: {
mode: "video"
},
},
{
name: "poaCapture",
options: {
documentTypes: {
bank_statement: true,
utility_bill: false,
},
},
},
{
name: "completion",
options: {
heading: "Thank you for completing the process",
message: ["we will get in touch shortly"]
},
},
];
​

Branding

If you'd like to customise the look-and-feel of the SDK, you can provide a branding object with the following attributes:

Appearance

The appearance object allows you to customise the colour scheme of the SDK with CSS values (e.g. RGBA, Hex). Customisable attributes include:
Attribute
Description
infoPopupColor
Warning popup background colour
infoPopupTextColor
Warning popup background colour
infoPopupLinkHoverColor
Warning popup fallback Link on hover background colour
infoPopupLinkActiveColor
Warning popup fallback Link active background colour
errorPopupColor
Error popup background colour
errorPopupTextColor
Error popup text colour
errorPopupLinkHoverColor
Error popup fallback Link on hover background colour
errorPopupLinkActiveColor
Error popup fallback Link active background colour
cameraButtonHoverColor
Camera button on hover background colour
cameraButtonActiveColor
Camera button active background colour
iconButtonActiveColor
Icon button active background colour
iconButtonHoverColor
Icon button on hover background colour
primaryButtonColor
Primary button background colour
primaryButtonTextColor
Primary button text colour
primaryButtonActiveColor
Primary button active background colour
primaryButtonHoverColor
Primary button on hover background colour
primaryButtonBorderColor
Primary button border colour
secondaryButtonColor
Secondary button background colour
secondaryButtonTextColor
Secondary button text colour
secondaryButtonActiveColor
Secondary button active background colour
secondaryButtonHoverColor
Secondary button on hover background colour
secondaryButtonBorderColor
Secondary button border colour
documentSelectorColor
Document selector background colour
documentSelectorTextColor
Document selector text colour
documentSelectorActiveBorderColor
Document selector active background colour
documentSelectorHoverBorderColor
Document selector on hover background colour
linkHoverColor
Link on hover background colour
linkActiveColor
Link active background colour
linkUnderlineColor
Link underline colour
linkHoverTextColor
Link on hover text colour
bodyTextColor
SDK content text colour
headingTextColor
SDK heading text colour
subheadingTextColor
SDK subheading text colour
The logo object has two attributes:
  • lightLogoUrl: URL for your logo's light version
  • darkLogoUrl: URL for your logo's dark version

Example of logo branding

branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
logo: {
lightLogoUrl: 'light_logo_url',
darkLogoUrl: 'dark_logo_url',
}
},

Text Brand

The textBrand attribute represents the textual format of your brand.

Example of text branding

branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
textBrand: 'Acme Bank'
}
If logo and textBrand attributes are specified at the same time, logo takes precedence.

​

Previous
Web SDK Integration Guide
Next - Guides
Mobile SDK Quick Guide
Last modified 22d ago