Onboarding (KYC/KYB)

3 min read

This guide adds the Footprint onboarding flow for KYC (Know Your Customer) and KYB (Know Your Business) to your React Native app. Install the SDK first: Installation.

Start an onboarding

Create an onboarding session. Call POST /onboardings and keep the onboarding session token it returns, such as obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH.
Launch the flow. When the user taps a button, for example, call onboarding.initialize with the onboardingSessionToken, your app's redirectUri, and an onComplete callback.

javascript
1import { onboarding } from "@onefootprint/footprint-react-native";
2import { View, Button } from "react-native";
3
4const App = () => {
5    const launch = () => {
6        onboarding.initialize({
7            onboardingSessionToken: "obtok_M6QSNyfhAUAyq3wypanv7GVyof1GHIbWQr",
8            redirectUri: "awesomeproject://", // this is the schema of your app
9            onComplete: (result) => {
10                console.log(result);
11            },
12            onError: (error) => {
13                console.log(error);
14            },
15        });
16    };
17
18    return (
19        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
20            <Button onPress={launch} title="Launch Footprint" />
21        </View>
22    );
23};
24
25export default App;

Handle the result

When the user completes the flow, onComplete receives a validationToken. Post it to your backend for further processing.

The SDK also reports errors, cancellation, and closing. Pass onError, onCancel, and onClose to initialize:

typescript
1onboarding.initialize({
2  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
3  onComplete: (validationToken) => {
4    console.log(validationToken);
5  },
6  onError: (error) => {
7    console.log(error);
8  },
9  onCancel: () => {
10    console.log("User canceled the flow");
11  },
12  onClose: () => {
13    console.log("User closed the flow");
14  },
15});

Customize the appearance

Pass an appearance object to initialize to change the look of the flow:

typescript
1onboarding.initialize({
2  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
3  onComplete: (validationToken) => {
4    console.log(validationToken);
5  },
6  appearance: {
7    variables: {
8      borderRadius: "8px",
9      colorSuccess: "#10b981",
10      colorError: "#F87171",
11      buttonPrimaryBg: "#5550e9",
12    },
13  },
14});

The customization guide lists every variable.

Available props

Variable	Description
`onboardingSessionToken`	The onboarding session token you created.
`redirectUri`	Required. The URI scheme of your app (e.g., `awesomeproject://`), used to redirect back to your app after the onboarding flow completes.
`onComplete`	Triggered after the user completes the onboarding flow. You receive a `validationToken` that your backend can exchange with Footprint to see the `fp_id`, the login method used, and the KYC status.
`onError`	Optional. Called when there was an unrecoverable error while initializing the onboarding flow. It receives an error string with more details.
`onCancel`	Triggered when the user abandons the flow, for example by tapping the close button inside the in-app browser.
`onClose`	Triggered when the user closes the flow, whether completed or canceled.
`appearance`	Optional. A `FootprintAppearance` object that customizes the look of your integration.
`l10n`	Optional. The desired localization. See Localization configuration.

Next steps

Handle the decision validates the token on your backend and reads the onboarding status.
Changelog lists notable releases of @onefootprint/footprint-react-native.