Flutter

General
Before integrating Passbase, we suggest you read first our best practice on how to integrate Passbase in your system in the overview section and complete the initial setup steps.
You can either follow the integration guide or watch the integration tutorial that shows the same steps. Please be aware that some property or function names might have slightly changed with newer versions. Make sure to compare your implementation with the latest code snippets here in the documentation.
1. Install the Package
At the root level of your project, open the pubspec.yaml file and add the following line in your dependencies section:
1
passbase_flutter: ^2.8.2 //for Flutter v.1
2
//or
3
passbase_flutter: ^2.8.2-nullsafety.0 //for Flutter v.2
Copied!
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 lines at top of the Podfile. 
1
source 'https://github.com/CocoaPods/Specs.git'
2
source 'https://github.com/passbase/cocoapods-specs.git'
3
source 'https://github.com/passbase/microblink-cocoapods-specs.git'
Copied!
The minimum iOS version is 11.0. Make sure to include this in the Podfile. Also, please include use_frameworks! 
1.
platform :ios, '11.0'
2.
use_frameworks!
Then, navigate inside the terminal into your project folder 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 your internet. You can monitor the network activity in the activity monitor.
Example of a complete Podfile
1
# Example of a Podfile
2
# 1. Add this here
3
source 'https://github.com/CocoaPods/Specs.git'
4
source 'https://github.com/passbase/cocoapods-specs.git'
5
source 'https://github.com/passbase/microblink-cocoapods-specs.git'
6
​
7
# 2. Add the platform requirement to at least iOS 11
8
platform :ios, '11.0' 
9
​
10
# Flutter related code
11
# ... 
12
​
13
target 'Runner' do
14
  # 3. Add use_frameworks! because of Sentry pod
15
  use_frameworks!
16
  
17
  # Flutter related code
18
  # ... 
19
end
Copied!
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.
You need to adjust your iOS project's settings now. Open the workspace file inside your ios folder. It should have the name Runner.xcworkspace. Then open in the left project navigator your app's Info.plistfile. Here we have to adjust the App's permission so that we can access the users' camera 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 add the entries like below.
Or if you prefer to do this step with code, right-click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the <dict>   </dict> 
1
<!-- permission strings to be include in info.plist -->
2
<key>NSCameraUsageDescription</key>
3
<string>Please give us access to your camera, to complete the verification.</string>
4
<key>NSPhotoLibraryUsageDescription</key>
5
<string>Please give us access to your photo library to verify you.</string>
Copied!
Allow using embedded views
To use PassbaseButton on iOS, you need to opt-in for the preview of the embedded view by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.
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 the line classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")to dependencies
Code Example
1
// In the different lines to your projcet's build.gradle file
2
buildscript {
3
    ext.kotlin_version = '1.3.21' // 2. Add kotlin_version
4
    
5
    dependencies {
6
       ...
7
       // 3. Add classpath
8
       classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 
9
    }
10
}
Copied!
Set minSdkVersion to 21 or higher in android/app/build.gradle file:
1
android {
2
    ...
3
    defaultConfig {
4
        ...
5
        // Change minSdkVersion
6
        minSdkVersion 21
7
        ...
8
  }
9
  ...
10
}
Copied!
Sync the gradle & run. You've successfully installed the Passbase SDK for Android! 🎉
2. Initialize the SDK
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!
First, add the following import statement to the top of the main.dart file:
1
import 'package:passbase_flutter/passbase_flutter.dart';
Copied!
Then, initialize the SDK with your own publishable API key which you can get from your developer dashoard's API settings. 
1
PassbaseSDK.initialize(publishableApiKey: "YOUR_PUBLISHABLE_API_KEY");
Copied!
You have successfully initialized the Passbase SDK!  🎉
3. Start Verification
Keep in mind that in order to successfully finish a verification, you need to pass our liveness detection. If you develop on a Simulator (e.g. iPhone Simulator via Xcode), you will only be able to test the SKD in UI Demo Mode. The Demo Mode does not send data to our backend on a Simulator. Therefore please use a real device (e.g. an attached iPhone) to fully test and develop with our SDK.
Use PassbaseButtonPassbaseButton component provided by the SDK
1
import 'package:passbase_flutter/passbase_flutter.dart';
2
​
3
...
4
PassbaseButton(
5
  onFinish: (identityAccessKey) { 
6
    // do stuff in case of success
7
  },
8
  onSubmitted: (identityAccessKey) { 
9
    // do stuff in case of success
10
  },
11
  onError: (errorCode) {
12
    // do stuff in case of cancel
13
  },
14
  onStart: () {
15
    // do stuff in case of start
16
  },
17
),
18
...
Copied!
This will render the Passbase Button on UI and will automatically start verification on its press.
Prefilling Email Addresses
If you want to automatically prefill user's email address to skip the "Approve your Email" screen. This is available programmatically if you pass the prefillUserEmail parameter to the button like below. 
1
import 'package:passbase_flutter/passbase_flutter.dart';
2
​
3
...
4
PassbaseSDK.prefillUserEmail = "[email protected]"; //optional
5
...
Copied!
Prefilling Country
You can automatically prefill user's country in the drop-down list. This is available programmatically if you pass the prefillCountry parameter to the button like below. An ISO-3166 compliant country code, case insensitive. This will not enable skipping the country selection step. 
1
import 'package:passbase_flutter/passbase_flutter.dart';
2
​
3
...
4
PassbaseSDK.prefillCountry = "de"; //optional
5
...
Copied!
Prefilling metaData
If you are tracking end users in your backend through an internal UUID, transaction number, stripe ID, etc., you can use the metaData object to securely pass encrypted end user information to identify completed verifications. The metadata object requires an encrypted JSON string via the private key encoded in base64. 
​
Value
metaData
Encrypted JSON string via the private key encoded in base64
1
import 'package:passbase_flutter/passbase_flutter.dart';
2
​
3
...
4
// Signed and Armored Metadata, which contain {internal_customer_id: "XYZ", "email": "[email protected]", "country": "de", ...}
5
PassbaseSDK.metaData = "AJIZZDIZJADIOAJDOIZJAOIZJDOIAJIODZJIAJDIOZJAIOZDJALANLIKESJIZZOIZDJAOIZJDOZIAJDOIAZJDAZD"
6
...
Copied!
Add Encryption Key to your Project
Encryption should be completed on the server-side. Once you have completed the encryption, please enter the encryption keys for each individual project within the developer dashboard. The metaData object is then returned on the Passbase API.
​Click here to view metaData encryption documentation.
Retrieve MetaData from Passbase API
After a user completes a verification and you receive the VERIFICATION_REVIEWED webhook event, it is time to call the Passbase Get Identity endpoint.  Using this API endpoint, you will see the new metaData object returned.
If the public encryption key is not added to the developer dashboard, you will not see the metaData information returned on the API.
1
{
2
   id: "1234-1234-1234-1234",
3
   resources: [...],
4
   metadata: { internal_customer_id: "XYZ" }
5
}
Copied!
You have successfully started your first verification! 🎉
4. Handling Verifications
Often it is useful to know if a user has completed the verification or canceled it. For this, we can implement the following delegate/callback methods:
Method
Description
onStart
This callback method is triggered once a user starts the verification flow. 
onSubmitted
Method that is being called once verification data is submitted to Passbase.
You receive an object called identityAccessKey which can be used to access the identity. Please see our section about Webhooks and API for more information.
onFinish
Method that is being called once a user clicks the "Finish" button. You receive an object called identityAccessKey which can be used to access the identity. Please see our section about Webhooks and API for more information.
onError
This callback method is triggered when a user canceled the verification flow or the verification finished with an error. You can use this to find out if people dropped out of your verification flow.
Error codes:
CANCELLED_BY_USER 
BIOMETRIC_AUTHENTICATION_FAILED
1
import 'package:passbase_flutter/passbase_flutter.dart';
2
​
3
...
4
PassbaseButton(
5
  onFinish: (identityAccessKey) { 
6
    // do stuff in case of success
7
  },
8
  onSubmitted: (identityAccessKey) { 
9
    // do stuff in case of success
10
  },
11
  onError: (errorCode) {
12
    // do stuff in case of cancel
13
  },
14
  onStart: () {
15
    // do stuff in case of start
16
  },
17
),
18
...
Copied!
We recommend the following process for handling identity verifications:
1.
Obtain the identityAccessKey of successfully completed identity verifications from the callback method and save them to your DB e.g. a user's profile
2.
Set up webhooks to be notified once the identity verification has been processed by our system. Also once you have approved or declined the user in your dashboard
3.
Now you can use your own backend to query the details about this identity verification with e.g. the Get Identity call to obtain the details 
Identity Access Key as Reference
In order for your application to interoperate with Passbase, you should reference to your users once the Verification is completed.
For that, you will need to keep track of the identityAccessKey returned by the onFinish or onSubmitted callbacks and associate it in your backend with your end users' id. We recommend to save this key after the onSubmitted method from your user's completed verification, or listen for the incoming webhooks to make a call to the Passbase API linking back the email address of the user.
5. UI Customizations
Appearance
Our SDK currently supports a set of customization options that will influence the appearance. To customize the verification flow, please navigate to your developer dashboard's customization section. Here you can choose amongst a variety of colors, fonts, accepted countries & much more.
Customization Section
We also offer a dark mode, which will be automatically started if a user has activated this in his system settings.
Dark Mode
Language 
We support a variety of different languages for the verification flow. As of this writing more than 10 including (English, Spanish, German & many more). If one is missing and you want us to add support for it, please reach out to our customer support.
The SDK automatically detects the language of the user's phone settings. If we support the language, the verification flow will be set to it. Otherwise, the default is English.
6. ProGuard (Android)
If you are using ProGuard you might need to add the following options:
1
-dontwarn okio.**
2
-dontwarn retrofit2.Platform$Java8
3
-dontwarn com.facetec.zoom.sdk.**
Copied!
to ProGuard exceptions
1
buildTypes {
2
    release {
3
        minifyEnabled true
4
        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
5
    }
6
}
Copied!
Example & Demo App
You can find an example of a whole class in the code section below. Also we have a full example app on our Github: ​Flutter Demo App​
1
import 'package:flutter/material.dart';
2
import 'package:passbase_flutter/passbase_flutter.dart';
3
void main() => runApp(PassbaseFlutterDemoApp());
4
class PassbaseFlutterDemoApp extends StatelessWidget {
5
  @override
6
  Widget build(BuildContext context) {
7
    return MaterialApp(
8
      theme: ThemeData(
9
        primarySwatch: Colors.blue,
10
      ),
11
      home: PassbaseDemoHomePage(),
12
    );
13
  }
14
}
15
class PassbaseDemoHomePage extends StatefulWidget {
16
  PassbaseDemoHomePage({Key key}) : super(key: key);
17
  @override
18
  _PassbaseDemoHomePageState createState() {
19
    PassbaseSDK.initialize(publishableApiKey: "YOUR_PUBLISHABLE_API_KEY");
20
    PassbaseSDK.prefillUserEmail = "[email protected]"; //optional
21
    return _PassbaseDemoHomePageState();
22
  }
23
}
24
class _PassbaseDemoHomePageState extends State<PassbaseDemoHomePage> {
25
  @override
26
  Widget build(BuildContext context) {
27
    return Scaffold(
28
      appBar: AppBar(),
29
      body: Center(
30
        child: Column(
31
          mainAxisAlignment: MainAxisAlignment.center,
32
          children: <Widget>[
33
            PassbaseButton(
34
              onFinish: (identityAccessKey) {
35
// do stuff in case of success
36
                print(identityAccessKey);
37
              },
38
              onSubmitted: (identityAccessKey) {
39
// do stuff in case of success
40
                print(identityAccessKey);
41
              },
42
              onError: (errorCode) {
43
// do stuff in case of cancel
44
                print(errorCode);
45
              },
46
              onStart: () {
47
// do stuff in case of start
48
                print("start");
49
              },
50
              width: 300,
51
              height: 70,
52
            ),
53
          ],
54
        ),
55
      ),
56
    );
57
  }
58
}
Copied!
You have completed the integration for Flutter! 🎉
Troubleshooting
App is crashing when verification is started
If you experience a crash on Android when verification is started you can try to add this to your android/build.gradle file:
1
subprojects {
2
    project.configurations.all {
3
        resolutionStrategy.eachDependency { details ->
4
            if (details.requested.group == 'androidx.core' &&
5
                    !details.requested.name.contains('androidx')) {
6
                details.useVersion "1.1.0"
7
            }
8
        }
9
    }
10
}
Copied!
Camera is not starting in release build on android
If you experience that camera is not starting in release build make sure you set enableProguardInReleaseBuilds in build.gradle to false. Or add exeptions as described in ProGuard section above.