Web SDK customizations

Stages

Stages can be customized 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 according to our prevailing Terms of Services and Privacy statement. Please refer to SDK Settings for further details on the onExit callback.

Please make sure you pass the clientConsent parameter when consent is granted by your client.

Options

The options object allows the customization 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 to verify your identity",
      message: [
        "In order to open an account, we need to 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 customize the look-and-feel of the SDK, you can provide a branding object with the following attributes:

Appearance

The appearance object allows you to customize the color scheme of the SDK with CSS values (e.g. RGBA, Hex). Customizable attributes include:

Attribute	Description
infoPopupColor	Warning popup background color
infoPopupTextColor	Warning popup background color
infoPopupLinkHoverColor	Warning popup fallback Link on hover background color
infoPopupLinkActiveColor	Warning popup fallback Link active background color
errorPopupColor	Error popup background color
errorPopupTextColor	Error popup text color
errorPopupLinkHoverColor	Error popup fallback Link on hover background color
errorPopupLinkActiveColor	Error popup fallback Link active background color
cameraButtonHoverColor	Camera button on hover background color
cameraButtonActiveColor	Camera button active background color
iconButtonActiveColor	Icon button active background color
iconButtonHoverColor	Icon button on hover background color
primaryButtonColor	Primary button background color
primaryButtonTextColor	Primary button text color
primaryButtonActiveColor	Primary button active background color
primaryButtonHoverColor	Primary button on hover background color
primaryButtonBorderColor	Primary button border color
secondaryButtonColor	Secondary button background color
secondaryButtonTextColor	Secondary button text color
secondaryButtonActiveColor	Secondary button active background color
secondaryButtonHoverColor	Secondary button on hover background color
secondaryButtonBorderColor	Secondary button border color
documentSelectorColor	Document selector background color
documentSelectorTextColor	Document selector text color
documentSelectorActiveBorderColor	Document selector active background color
documentSelectorHoverBorderColor	Document selector on the hover background color
linkHoverColor	Link on the hover background color
linkActiveColor	Link active background color
linkUnderlineColor	Link underline color
linkHoverTextColor	Link on the hover text color
bodyTextColor	SDK content text color
headingTextColor	SDK heading text color
subheadingTextColor	SDK subheading text color

Logo

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.