# 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 Flutter applications. Please follow `footprint_flutter` installation instructions [here](/articles/sdks/flutter-introduction#installation).

**Note:** Make sure you have `footprint_flutter: ^2.2.2` version or higher installed for the onboarding integration to work properly.

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. Then, pass the `onboardingSessionToken` and `onComplete` callback to the `initialize` method.

```dart
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            onboarding.initialize(
              onboardingSessionToken: "YOUR SESSION TOKEN",
              redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
              context: context,
              onComplete: (token) {
                print("onComplete: $token");
              },
            );
          },
          child: Text('Launch Footprint Onboarding'),
        ),
      ),
    ),
  );
}
```

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 several events based on actions performed by the user. To listen to events, pass them from the `initialize` method.

```dart
onboarding.initialize(
  onboardingSessionToken: "YOUR SESSION TOKEN",
  redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
  context: context,
  onComplete: (token) {
    print("onComplete: $token");
  },
  onCancel: () {
    print("onCancel: user canceled the flow");
  },
  onError: (error) {
    print("onError: $error");
  },
);
```

## Setting a custom appearance

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

```dart
onboarding.initialize(
  onboardingSessionToken: "YOUR SESSION TOKEN",
  redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
  context: context,
  onComplete: (token) {
    print("onComplete: $token");
  },
  appearance: FootprintAppearance(
    variables: FootprintAppearanceVariables(
      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.                                                                                                                                                                         |
| `redirectUrl`            | A deep link that will be used to navigate back to your app if the in-app browser was opened during the onboarding process.                                                                                        |
| `context`                | Your widget's `BuildContext`.                                                                                                                                                                                     |
| `onComplete`             | Optional. 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 when there was an unrecoverable error during the onboarding flow.                                                                                                             |
| `onCancel`               | Optional. Triggered when the user abandons the flow.                                                                                                                                                              |
| `appearance`             | Optional. A `FootprintAppearance` object that customizes the look of your integration.                                                                                                                            |
| `l10n`                   | Optional. Specifies the desired localization using a `FootprintL10n` object. More information [here](/articles/integrate/customization#localization-configuration).                                               |