Web SDK Customisations
Stages can be customised by providing stage objects. A state object has two components -
name
and options
.The name attribute is the stage name. The possible values are:
intro
, userConsentCapture
, documentCapture
, faceCapture
, poaCapture,
and completion
.When the
userConsentCapture
stage 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.The
options
object allows the customisation of each stage as follows:Stage Name | Options |
intro |
|
documentCapture |
|
faceCapture |
|
poaCapture |
The value of each document type is a boolean that toggles the visibility of the document type. |
completion |
|
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"]
},
},
];
If you'd like to customise the look-and-feel of the SDK, you can provide a
branding
object with the following attributes: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 versiondarkLogoUrl
: URL for your logo's dark version
branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
logo: {
lightLogoUrl: 'light_logo_url',
darkLogoUrl: 'dark_logo_url',
}
},
The
textBrand
attribute represents the textual format of your brand.branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
textBrand: 'Acme Bank'
}
If
logo
and textBrand
attributes are specified at the same time, logo
takes precedence.Last modified 22d ago