# Onboarding (KYC/KYB)

## Getting started

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. **Create an onboarding session token**:
   * Obtain onboarding session token, e.g., `obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH`. Read [this article](/articles/guide/definitive-integration-guide#the-end-to-end-integration-step-3-create-an-onboarding-session-token).

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
import { onboarding } from "@onefootprint/footprint-expo";
import { View, Button } from "react-native";

const App = () => {
	const launch = () => {
		onboarding.initialize({
			onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
			onComplete: (validationToken) => {
				console.log(validationToken);
			},
		});
	};

	return (
		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
			<Button onPress={launch} title="Launch Footprint" />
		</View>
	);
};
```

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.

## Listening to events

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

```typescript
onboarding.initialize({
  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
  onComplete: (validationToken) => {
    console.log(validationToken);
  },
  onError: (error) => {
    console.log(error);
  },
  onCancel: () => {
    console.log("User canceled the flow");
  },
  onClose: () => {
    console.log("User closed the flow");
  },
});
```

## Setting a custom appearance

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

```typescript
onboarding.initialize({
  onboardingSessionToken: "obtok_UxM6Vbvk2Rcy1gzcSuXgk3sj3L9I0pAnNH",
  onComplete: (validationToken) => {
    console.log(validationToken);
  },
  appearance: {
    variables: {
      borderRadius: "8px",
      colorSuccess: "#10b981",
      colorError: "#F87171",
      buttonPrimaryBg: "#5550e9",
    },
  },
});
```

For more information, including a list of available variables, check out the [customization guide](/articles/integrate/customization).

## Available Props

| Variable                 | Description                                                                                                                                                                                            |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `onboardingSessionToken` | The onboarding session token you created.                                                                                                                                                              |
| `onComplete`             | Triggered after the user completes the onboarding flow. You'll 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. A function that is called there was an unrecoverable error while initializing the onboarding flow. It takes in an error string argument with more details.                                   |
| `onCancel`               | Triggered when the user abandons the flow. This can be triggered when the user clicks on the close button inside our in-app browser                                                                    |
| `onClose`                | Triggered when the user closes the flow (either completed or canceled).                                                                                                                                |
| `appearance`             | Optional. A `FootprintAppearance` object that customizes the look of your integration                                                                                                                  |
| `l10n`                   | Optional. Specifies the desired localization. More information [here](/articles/integrate/customization#localization-configuration).                                                                   |