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 Flutter applications. Please follow footprint_flutter installation instructions here.

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

dart
1Widget build(BuildContext context) {
2  return MaterialApp(
3    home: Scaffold(
4      body: Center(
5        child: ElevatedButton(
6          onPressed: () {
7            onboarding.initialize(
8              onboardingSessionToken: "YOUR SESSION TOKEN",
9              redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
10              context: context,
11              onComplete: (token) {
12                print("onComplete: $token");
13              },
14            );
15          },
16          child: Text('Launch Footprint Onboarding'),
17        ),
18      ),
19    ),
20  );
21}

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

dart
1onboarding.initialize(
2  onboardingSessionToken: "YOUR SESSION TOKEN",
3  redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
4  context: context,
5  onComplete: (token) {
6    print("onComplete: $token");
7  },
8  onCancel: () {
9    print("onCancel: user canceled the flow");
10  },
11  onError: (error) {
12    print("onError: $error");
13  },
14);

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

dart
1onboarding.initialize(
2  onboardingSessionToken: "YOUR SESSION TOKEN",
3  redirectUrl: "YOUR REDIRECT URL (example: com.footprint.fluttersdk://example)",
4  context: context,
5  onComplete: (token) {
6    print("onComplete: $token");
7  },
8  appearance: FootprintAppearance(
9    variables: FootprintAppearanceVariables(
10      borderRadius: "8px",
11      colorSuccess: "#10b981",
12      colorError: "#F87171",
13      buttonPrimaryBg: "#5550e9",
14    ),
15  ),
16);

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