Cordova plugin

Requirements and prerequisites

Requirements

Integration with Cordova plugin requires the project to target at least iOS version 11.0 and Android version 5.0 (API level 21) or higher.

Add the plugin to the project

Add the Veriff Cordova plugin to your project:

cordova plugin add @veriff/cordova-plugin-veriff

Adding this plugin will make the window.cordova.plugins.Veriff global object available once the deviceready event propagates.

Add permissions

iOS specific configuration

Not adding these permissions will cause the system to shut down the application when it requests the permissions.

        <config-file target="*-Info.plist" parent="NSCameraUsageDescription">
            <string>Access to camera is needed for user identification purposes</string>
        </config-file>

        <config-file target="*-Info.plist" parent="NSMicrophoneUsageDescription">
            <string>Access to microphone is needed for video identification</string>
        </config-file>

        <config-file target="*-Info.plist" parent="NSPhotoLibraryUsageDescription">
            <string>Access to photo library is needed uploading proof of address documents</string>
        </config-file>

<config-file target="*-Info.plist" parent="NFCReaderUsageDescription">
            <string>Access to NFC is needed for user identification purposes</string>
        </config-file>

<config-file target="*-Info.plist" parent="com.apple.developer.nfc.readersession.iso7816.select-identifiers">
    <array>
        <string>A0000002471001</string>
        <string>A0000002472001</string>
        <string>00000000000000</string>
    </array>
</config-file>

<config-file target="**/Entitlements.plist" parent="com.apple.developer.nfc.readersession.formats">
    <array>
        <string>TAG</string>
        <string>NDEF</string>
    </array>
</config-file>

Set the iOS target in Xcode

Make sure that the 'iOS Deployment Target' in Xcode (under Project > target > Info > Deployment Target) is set to iOS 12.4 or later.

Start the verification flow

The Veriff Plugin has a single function to start a verification attempt: start(callback, sessionUrl, configuration)

• callback (*required) - a callback that will be invoked with the verification attempt result. The callback includes the result object which indicates the end-user flow completion status, and not the verification session decision. See Verification session status section below for info.

• sessionUrl (*required) - sessionUrl can be received from your backend implementation. sessionUrl should be unique for each call. Check POST /sessions[↗] endpoint in the API documentation to learn how to generate one.

• configuration (optional) - an object that allows the customization of the Veriff plugin, including your brand's colors, font and logo. See Customization section below for more info. The supported properties are:

  • • branding (optional) - customize various branding options

    • locale (optional) - override the user interface language (default: device language)

    • customIntroScreen (optional) - Veriff supports replacing introduction screen with a custom client developed introduction screen for eligible customers

    • vendorData (optional) - Veriff supports the option to override vendor data.

Verification session status

The result returned by Veriff.start will have a status field that is one of either Veriff.STATUS_DONE, Veriff.STATUS_CANCELED or Veriff.STATUS_ERROR.

In case the status is Veriff.STATUS_ERROR there will be a error code (not human-readable) in the error field.

This is not the verification session decision.

This indicates whether the end-user was able to complete all the steps in the verification flow or not.

window.cordova.plugins.Veriff.start(
    function (result) {
        console.log("Veriff SDK result: status: " + result.status + ", error: " + result.error);
        switch (result.status) {
            case STATUS_DONE:
                // end-user submitted the images and completed the flow
                // note that this does not mean a final decision yet
                break;
            case STATUS_CANCELED:
                // end-user canceled the flow before completing
                break;
            case STATUS_ERROR:
                // the flow could not be completed due to an error
                console.log("Veriff verification failed with error=" + result.error);
                switch (result.error) {
                    case UNABLE_TO_ACCESS_CAMERA:
                        // unable to access camera, likely due to no permission
                        break;
                    case UNABLE_TO_ACCESS_MICROPHONE:
                        // unable to access camera, likely due to no permission
                        break;
                    case NETWORK_ERROR:
                        break;
                    case SESSION_ERROR:
                        break;
                    case UNKNOWN_ERROR:
                        break;
                    case UNSUPPORTED_SDK_VERSION:
                        break;
                }
                break;
        }
    },
    sessionUrl
);

Verification session decision

Veriff returns info about the verification session decision, extracted data, registries checks etc via webhooks. You need to set up webhooks and tie them to your system.

Customize the SDK

SDK customization is optional

It is possible to customize the look and feel to match your branding elements (including colors and fonts), add custom intro screen, and set the language settings for the SDK.

Match the brand

Veriff Cordova plugin allows the customization of your brand's colors, font and logo in the SDK flow.

Note: all custom values for branding are optional. If a value is not provided for them, the default Veriff color and logo will be used.

Pass the optional parameters when launching Veriff:

window.cordova.plugins.Veriff.start(
    function (result) {
        console.log("Veriff SDK result: status: " + result.status + ", error: " + result.error);
    },
    sessionUrl,
    {
        branding: {
            logo: 'parrot',
            background: '#ff00ff',
            onBackground: '#ffffff',
            onBackgroundSecondary: '#ff00ff',
            onBackgroundTertiary: '#000000',
            primary: '#333333',
            onPrimary: '#444444',
            secondary: '#333333',
            onSecondary: '#444444',
            outline: '#444444',
            cameraOverlay: '#59496a',
            onCameraOverlay: '#e27e23',
            error: '#333333',
            success: '#444444',
            buttonRadius: 28,
            iOSFont: {
                regular: 'Font-Regular',
                medium: 'Font-Medium',
                bold: 'Font-Bold',
            },
            androidFont: {
                regular: 'font_regular.ttf',
                medium: 'font-medium.ttf',
                bold: 'font_bold.ttf',
            }
        }
    },
);

For logo, the image assets need to be added into:

• Xcode assets in the iOS project, and

• drawable folders in the Android project

In the example above you would need to add an image asset named 'parrot' into Xcode assets and 'parrot.png' to Android drawable folderandroid/src/main/res.

Intro screen

In some cases, it is possible to replace the Veriff’s generic introduction screen with a custom intro screen.

Check with your Solutions Engineer to confirm if this feature can be enabled for your integration

If it is possible, the the following will happen:

• You agree your own introduction screen visuals and copy with our Solutions Engineer and get relevant legal documents signed in case they are needed

• After that Veriff will enable custom introduction screen from backend for your integrations

• After you have implemented your own introduction screen you can change the configuration option specified below

var result = await VeriffSdk.launchVeriff({
    sessionUrl: SESSION_URL,
    locale: 'et',
    customIntroScreen: true
  });

Adding the configuration alone in your app is not enough to enable the custom intro screen. Make sure to contact your solutions engineer so they can enable the feature for your integration.

User interface language settings

Veriff Cordova plugin allows setting the language of the SDK. In order to use this language, pass the locale as in example below.

window.cordova.plugins.Veriff.start(
    function (result) {
        console.log("Veriff SDK result: status: " + result.status + ", error: " + result.error);
    },
    sessionUrl,
    {
        locale: 'et'
    }
);