Customization

The appearance option restyles the Footprint flow to match your product's design. Every SDK accepts it: JavaScript, Expo, React Native, Flutter, Swift, and Kotlin. A complete example lives in onefootprint/examples.

Variables are the first place to theme the flow. Each one maps to a CSS variable, so you can inspect the result with your browser's DOM explorer. Set a value in any unit you prefer: pixels, rem, hex, rgb, and so on. The tables below list every variable.

This call squares the corners and recolors the primary button:

typescript
1import "@onefootprint/footprint-js/dist/footprint-js.css";
2import { onboarding } from "@onefootprint/footprint-js";
3
4onboarding.initialize({
5  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
6  onComplete: (validationToken) => {
7    console.log(validationToken);
8  },
9  appearance: {
10    variables: {
11      borderRadius: "0px",
12      buttonPrimaryBg: "#315E4C",
13      buttonPrimaryHoverBg: "#46866c",
14      buttonPrimaryColor: "#FFF",
15    },
16  },
17});

A higher-level token sets the default for a group of lower-level tokens. The table lists each higher-level token and the tokens it sets by default.

Set a higher-level token to propagate one choice across its group. Set a lower-level token individually to override that default for a single component.

Wraps the entire Footprint component.

For inline integrations, containerMaxWidth (for example containerMaxWidth: '480px') constrains and centers the content while the outer container fills the available space. The modal variant has a predetermined width.

Links behave like standard anchor tags; the Terms of Service link is a common example. To style more properties or states, use rules.

Links take their color from colorAccent, which also drives link buttons and radio selection.

The label is the native HTML element paired with an input field.

Input covers every input field in the flow, including the PIN, phone, and address inputs.

Hints are the text below an input field. They show an error or extra information.

A link button is the standard button without a background.

Variables for the primary and secondary buttons.

Dropdowns pair with input fields: the phone input uses one for the list of countries, and the address input uses one for the list of results.

Radio select appears in two places. When an onboarding starts with a sandbox key, it selects the outcome; that choice is only visible in sandbox and hidden from users. During identity document verification, it lets the user pick which type of identity document to verify with.

Checkboxes appear wherever the flow asks for consent or a multi-choice selection.

Footprint loads custom fonts from Google Fonts. Pass a fontSrc URL in the appearance option, and the SDK loads the font and applies it across the component.

We strongly recommend also setting fontFamily in variables so the font applies consistently. The SDK tries to extract the font family from the Google Fonts URL, but setting fontFamily yourself gives you control over the value and the fallback chain.

This call loads Poppins and applies it to the flow:

typescript
1import "@onefootprint/footprint-js/dist/footprint-js.css";
2import { onboarding } from "@onefootprint/footprint-js";
3
4onboarding.initialize({
5  onboardingSessionToken: "obtok_...",
6  onComplete: (validationToken) => {
7    console.log(validationToken);
8  },
9  appearance: {
10    fontSrc:
11      "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap",
12    variables: {
13      fontFamily: "'Poppins', sans-serif",
14    },
15  },
16});

Use rules for styles the variables do not cover. A rule applies arbitrary CSS to one of the elements listed below.

This call animates buttons on hover, adds a focus ring to inputs, and underlines hovered links:

typescript
1import '@onefootprint/footprint-js/dist/footprint-js.css';
2import { onboarding } from '@onefootprint/footprint-js';
3
4onboarding.initialize({
5  onboardingSessionToken: 'obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH',
6  onComplete: (validationToken) => {
7    console.log(validationToken);
8  },
9  appearance: {
10    rules: {
11      button: {
12        transition: 'all .2s linear',
13      },
14      'button:hover': {
15        transform: 'translateY(-1px)',
16      },
17      'input:focus': {
18        boxShadow: '0 0 0 4px rgba(74, 36, 219, 0.12)',
19      },
20      'link:hover': {
21        textDecoration: 'underline',
22      },
23    }
24  },
25});

The l10n (localization) option sets the language and locale of the flow.

For Spanish-speaking users, set language to "es" and the flow renders in Spanish:

typescript
1import "@onefootprint/footprint-js/dist/footprint-js.css";
2import { onboarding } from "@onefootprint/footprint-js";
3
4const l10n = {
5  language: "es",
6};
7
8onboarding.initialize({
9  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
10  onComplete: (validationToken) => {
11    console.log(validationToken);
12  },
13  l10n,
14});

For users in Mexico, also set locale to "es-MX" (Spanish, Mexico). The locale drives how Footprint formats dates and numbers and which cultural conventions it follows:

typescript
1import "@onefootprint/footprint-js/dist/footprint-js.css";
2import { onboarding } from "@onefootprint/footprint-js";
3
4const l10n = {
5  language: "es",
6  locale: "es-MX",
7};
8
9onboarding.initialize({
10  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
11  onComplete: (validationToken) => {
12    console.log(validationToken);
13  },
14  l10n,
15});