Theming

The SDK supports white-label theming through the theme option on Checktiv.init(). Theming is set in your frontend code at initialization time and threads into the capture journey automatically.

There is no console-persisted theme in the current version. Set theming in your init() call; it applies to every module mounted from that client instance.

Brand your own page and layout around the SDK embed for logos and full custom styling. The theme object controls the color inside the capture journey itself.

Available theme options

Checktiv.init({
  publishableKey: 'ah_pk_us_test_...',
  getSessionToken: async (ctx) => {
    /* ... */
  },
  theme: {
    primaryColor: '#0b5fff', // hex color; defaults to the platform blue
  },
});

Option	Type	Description
primaryColor	string	Hex color string (e.g. #0b5fff). Applied to primary buttons, progress indicators, and focus rings inside the capture journey.

How theming is applied

When the SDK mounts a module, it passes theme to the capture journey via the capture:init message. The journey applies the values as CSS custom properties inside its sandboxed iframe. Your page’s CSS does not affect the capture UI (it runs in a shadow root), so all styling must go through the theme object.

Example: matching your app’s brand

import { init } from '@checktiv/sdk-web';
import '@checktiv/sdk-web/idv'; // registers the IDV module that mountProvisioned renders

const client = init({
  publishableKey: 'ah_pk_us_test_...',
  getSessionToken: async (ctx) => {
    const res = await fetch('/api/checktiv/token', { method: 'POST' });
    return (await res.json()).token;
  },
  theme: {
    primaryColor: '#6200ee',
  },
});

client.mountProvisioned({ target: document.getElementById('idv-container') });

Related pages

• Quickstart - end-to-end integration including theming
• React - pass theme through <ChecktivProvider>