Onboarding (KYC/KYB)

This guide explains how to integrate the Footprint onboarding flow for KYC (Know Your Customer) and KYB (Know Your Business) into your Expo applications.

1. Start the onboarding:

   • Start the onboarding and get an onboarding token, e.g., obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH, from POST /onboardings.

2. Initialize the Footprint Flow:

   • Trigger Footprint, for example, when a button is clicked. Them, pass the onboardingSessionToken and onComplete callback to the initialize method.

javascript
1import { onboarding } from "@onefootprint/footprint-expo";
2import { View, Button } from "react-native";
3
4const App = () => {
5    const launch = () => {
6        onboarding.initialize({
7            onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
8            onComplete: (validationToken) => {
9                console.log(validationToken);
10            },
11        });
12    };
13
14    return (
15        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
16            <Button onPress={launch} title="Launch Footprint" />
17        </View>
18    );
19};

3. Handle Completion:
   • Once the user completes the flow, you'll receive the validationToken through the onComplete callback. Post this token to your backend for further processing.

Footprint provides some events based on some actions performed by the user. To listen to event, just pass it from the init method.

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});

You can customize the appearance of the onboarding flow by passing an appearance object to the init method.

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});

For more information, including a list of available variables, check out the customization guide.