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:

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:

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.

Last updated