General Information
client - web
HTML + JS
React
Angular
Hosted Integration
client - native
iOS
Android
React Native
Flutter
server
Webhooks
API
Developer Platform
Create Developer Account
Login
Powered by GitBook

Flutter

This guide helps you to integrate the Passbase SDK into your Flutter project

General

To integrate the Passbase Package you first need to sign up on our developer dashboard. Integration of the Passbase Flutter Package follows a few simple steps:

  1. Install the package in your project

  2. Initialization of the package with your API key

  3. Start a new verification process

  4. Handling verifications

1. Install the Package

At the root level of your project, open pubspec.yaml file and add the following line under dependencies section:

passbase_flutter: ^0.0.3

After that press Packages get.

iOS Specific Steps

Please follow these steps to complete the installation and integrate the SDK in the iOS project.

Adding Sources to Podfile

Navigate inside your iOS project folder and add the following three lines at top of the Podfile. You need to do this step to tell the Cocoapods where the Passbase iOS SDK is (our iOS SDK is a closed source project). If you forget this step, Cocoapods won't find our SDK.

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoom-cocoapods-specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'

The minimum iOS version is 11.0. Make sure to include this in the Podfile. Also, please include use_frameworks! Otherwise, Sentry specific problems may occur. Don't forget to add the following two lines:

  1. platform :ios, '11.0'

  2. use_frameworks!

Then, navigate inside the terminal into your project folder (cd ios) and run the following command to install the Passbase iOS SDK as a dependency:

pod install

pod install can take longer (up to 20 minutes) depending upon the speed of you internet. You can monitor the network activity in the activity monitor.

Example of a complete Podfile

# Example of a Podfile
# 1. Add this here
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoom-cocoapods-specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'
​
# 2. Add the platform requirement to at least iOS 11
platform :ios, '11.0' 
​
# Flutter related code
# ... 
​
target 'Runner' do
  # 3. Add use_frameworks! because of Sentry pod
  use_frameworks!
  
  # Flutter related code
  # ... 
end

Adding Camera Permissions in Info.plist

If you made it here, you successfully installed the Passbase SDK for iOS. Now let's adjust your last settings and start your first verification.

Please add the following permissions to your app's Info.plist, so that the Passbase iOS SDK can access your users' cameras, to run a verification. You can do it in the property list view or by code:

Right click somewhere outside the table and select Add Row. Now just type Privacy and add a Camera Usage Description + explain why you need to access the camera. Repeat the same step for Photo Library.

If you are more comfortable with code, right click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the <dict> </dict> 

<!-- permission strings to be include in info.plist -->
<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera, to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>

You have successfully finished setting up the Passbase iOS SDK! 🎉

Android Specific Steps

After installing the Passbase Flutter package, please complete the following steps to set up the Android environment correctly:

Adding Kotlin, Maven and minSdkVersion

Note: Make sure your Android Studio also supports Kotlin. As of this writing, Android Studio Version 3.5.1 has Kotlin support. If you're using an older version, you can install Kotlin support under Android Studio → Preferences… → Plugins → Browse Repository → Type “Kotlin” in search box → Install

Kotlin support is required in the main Android project. Please add the following lines to your project'sandroid/build.gradle file:

  1. Set kotlin_version to "1.3.21" or higher

  2. Add in dependencies the line classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")

Code Example

// In the different lines to your projcet's build.gradle file
buildscript {
    ext.kotlin_version = '1.3.21' // 2. Add kotlin_version
    
    dependencies {
       ...
       // 3. Add classpath
       classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 
    }
}

After add the change midSdkVersion to 21 or higher in your android/app/build.gradle file:

android {
    ...
    defaultConfig {
        ...
        // Change minSdkVersion
        minSdkVersion 21
        ...
  }
  ...
}

Sync the gradle & run. You've successfully installed the Passbase SDK for Android! 🎉

2. Initialize the SDK

Passbase uses API keys to allow access to the SDK and routes it back to your dashboard. You need to register on our website using your publishable API key from your developer dashboard's API settings. If you don't have a developer account yet, you can create one here: developer dashboard.​

First, add the following import statement to the top:

import 'package:passbase_flutter/passbase_flutter.dart';

Please use the publishable API key for all integrations. The secret key should never be exposed or used in a web integration or mobile app since it can access sensitive user data if leaked!

Then, initialize the SDK with your own API key. In promise based implementation like in the code snippet below, you need to replace YOUR_PUBLISHABLE_API_KEY with your own API key from your developer dashboard:

PassbaseFlutter.initialize(
  apiKey: "YOUR_PUBLISHABLE_API_KEY",
  prefillUserEmail: 'EMAIL',
  additionalAttributes: {
  // object of String:String based additional Params you want, **must be string (key, value) e.g.
  "userId": "a2ab4-f2jc4-k2dd4-1fa3x"
  }
);

You have successfully initialized the Passbase SDK! 🎉

3. Start Verification

Please make sure, you've initialized the SDK before starting a new verification. Otherwise you can't start the verification.

Keep in mind that in order to successfully finish a verification, you need to pass our liveness detection. Hence, if you develop on a Simulator (e.g. iPhone Simulator via Xcode), you won't be able to get past this step. Therefore please use a real device (e.g. an attached iPhone) to fully test and develop with our SDK.

There are two ways to start verification.

  1. Using PassbaseButton component

  2. Using startVerification method

Using PassbaseButton component is the simplest way to show ready made Passbase Button UI and start the verification process. The following code snippet shows how to use PassbaseButton component provided by the SDK

import 'package:passbase_flutter/passbase_flutter.dart';
​
...
PassbaseButton(
  onVerificationSuccess: (authKey) { 
    // do stuff in case of success
  },
  onVerificationCancel: () {
    // do stuff in case of cancel
  },
  backgroundColor: Colors.white, // set background color
  width: 256, // change button width
  height: 55, // and height
),
...

This will render the Passbase Button on UI and will automatically start verification on its press.

If you want to make your own UI or button but want to start verification programmatically, you can use the method,startVerification. 

FlatButton( // create your own button
  child: Container(
    width: 200,
    child: Center(
      child: Text("Start verification"),
    ),
  ),
  onPressed: () {
    PassbaseFlutter.startVerification( // start verification
    onVerificationSuccess: (authKey) {
      // do stuff in case of success
    },
    onVerificationCancel: () {
      // do stuff in case of cancel
    });
  },
),

You have successfully started your first verification! 🎉

4. Handling Verifications

To recognise if a verification was successful or a user cancelled it you can implement 2 callback functions. These are onVerificationCancel & onVerificationSuccess.

Method

Description

onVerificationSuccess

This callback activates once a user completes the full verification flow. You receive a string called authKey to track the status of the verification. Please see our section about Webhooks and API for more information.

onVerificationCancel

This callback method activates if a user cancels the verification flow. You can use this to see if people drop out of your verification flow.

import 'package:passbase_flutter/passbase_flutter.dart';
​
...
PassbaseButton(
  onVerificationSuccess: (authKey) { 
    // do stuff in case of success
  },
  onVerificationCancel: () {
    // do stuff in case of cancel
  },
),
...
​
// OR
​
...
PassbaseFlutter.startVerification( // start verification
  onVerificationSuccess: (authKey) {
    // do stuff in case of success
  },
  onVerificationCancel: () {
    // do stuff in case of cancel
  },
);
...

5. UI Customizations

We offer a variety of UI customizations for the button and other elements. For example, you can customize the color of the progress bar, button and different fonts. Please call these customizations on the PassbaseFlutter.buttonUI object.

Customizations must be set before calling startVerification()

Method

Description

setActionButtonBgColor

This is the background color of the action button. The default is set to blue.

setLoadingIndicatorColor

This is the background color of the loading animation. The default is set to blue.

setActionButtonDeativatedBgColor

This is the background color of the action button. The default is set to a lighter blue.

setActionButtonTextColor

This is the text color of the action button. The default is set to a lighter white.

setDisclaimerTextColor

This is the text color of the disclaimer, that the users agree to. The default is set to gray.

setTitleTextColor

This is the text color of the title. The default is set to black.

setSubtitleTextColor

This is the text color of the sub title. The default is set to black.

Code Example

import 'dart:io' show Platform;
​
...
​
PassbaseFlutter.buttonUI.setActionButtonBgColor(color: Colors.red);
PassbaseFlutter.buttonUI.setSubtitleTextColor(color: Colors.red);
PassbaseFlutter.buttonUI.setLoadingIndicatorColor(color: Colors.red);
PassbaseFlutter.buttonUI.setTitleTextColor(color: Colors.red);
PassbaseFlutter.buttonUI.setDisclaimerTextColor(color: Colors.red);
PassbaseFlutter.buttonUI.setActionButtonTextColor(color: Colors.white);
PassbaseFlutter.buttonUI.setActionButtonDeactivatedBgColor(color: Colors.red.withAlpha(30));
...

You have finished the UI customization section! 🎉

Example & Demo App

You can find a code example of a whole class in the code section below. Also we have a full example integration app hosted on our Github Page.

​​Flutter Demo App​

import 'package:flutter/material.dart';
import 'package:passbase_flutter/passbase_flutter.dart';
​
void main() => runApp(PassbaseFlutterDemoApp());
​
class PassbaseFlutterDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PassbaseDemoHomePage(),
    );
  }
}
​
class PassbaseDemoHomePage extends StatefulWidget {
  PassbaseDemoHomePage({Key key}) : super(key: key);
​
  @override
  _PassbaseDemoHomePageState createState() {
    PassbaseFlutter.initialize(
        apiKey:
            "YOUR_PUBLISHABLE_API_KEY");
​
    PassbaseFlutter.buttonUI.setActionButtonBgColor(color: Colors.red);
    PassbaseFlutter.buttonUI.setSubtitleTextColor(color: Colors.red);
    PassbaseFlutter.buttonUI.setLoadingIndicatorColor(color: Colors.red);
    PassbaseFlutter.buttonUI.setTitleTextColor(color: Colors.red);
    PassbaseFlutter.buttonUI.setDisclaimerTextColor(color: Colors.red);
    PassbaseFlutter.buttonUI.setActionButtonTextColor(color: Colors.white);
    PassbaseFlutter.buttonUI.setActionButtonDeactivatedBgColor(color: Colors.red.withAlpha(30));
​
    return _PassbaseDemoHomePageState();
  }
}
​
class _PassbaseDemoHomePageState extends State<PassbaseDemoHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            PassbaseButton(
              onVerificationSuccess: (authKey) {
                // do stuff in case of success
                print(authKey);
              },
              onVerificationCancel: () {
                // do stuff in case of cancel
                print("cancel");
              },
              backgroundColor: Colors.white,
              width: 300,
              height: 70,
            ),
            SizedBox(
              height: 20,
            ),
            FlatButton(
              child: Container(
                width: 200,
                child: Center(
                  child: Text("Start verification"),
                ),
              ),
              onPressed: () async {
                await PassbaseFlutter.startVerification(
                  onVerificationSuccess: (authKey) {
                    // do stuff in case of success
                    print(authKey);
                  },
                  onVerificationCancel: () {
                    // do stuff in case of cancel
                    print("cancel");
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

You have completed the integration for Flutter! 🎉

Previous
React Native
Next - server
Webhooks
Last updated 4 days ago
Contents
General
1. Install the Package
iOS Specific Steps
Android Specific Steps
2. Initialize the SDK
3. Start Verification
4. Handling Verifications
5. UI Customizations
Example & Demo App