Metamap for Capacitor Usage Guide

This is a guide to implement Metamap in the Ionic Capacitor framework.

Capacitor Demo App

Download the MetaMap Capacitor demo app from GitHub.

Install Metamap for Capacitor

The following instructions use command line tools to install Metamap for Capacitor to your existing Capacitor application.

1. Use the following CLI to install Metamap for your Capacitor project. Replace <version_number> with the either the LTS or current version number your application uses:

   Bash

   npm i metamap-capacitor-plugin
   

2. Build your application.

   Bash

   ionic build
   

3. Update the Capacitor files.

   Bash

   npx cap sync
   

Add the Metamap Button

Add the Metamap button to your application's HTML and JavaScript files.

<your_index>.html

<ion-content>
   <ion-button className="matiButtonCss" (click)="showMatiFlow()">Show MatiFlow
   </ion-button>
</ion-content>

<your_index>.ts

import { Component } from '@angular/core';

import { MetaMapCapacitor } from "metamap-capacitor-plugin";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}

  showMatiFlow() {
    let metadataParams = { param1: "value1" };
    let registerParams = { clientId: "5c94e3c401ddc6001be83c07", flowId: "5e962a23728ddc001b5937aa", metadata: metadataParams};

    MatiCapacitor.showMatiFlow(registerParams)
      .then( verification => console.log("verification success:" + verification.verificationId))
      .catch(() => console.log("verification cancelled"))
  }
}

Launch for Android

ionic capacitor run android

Launch for iOS

1. Set minimum iOS version in capacitor.config.json

   JSON

        "ios": {
         "minVersion": "12.0"
       }
   

2. Add the following to info.plist:

   Bash

   <key>NSCameraUsageDescription</key>
   <string>MetaMap verification SDK requires camera use</string>
   
   <key>NSMicrophoneUsageDescription</key>
   <string>MetaMap verification SDK requires microphone use</string>
   
   <key>NSPhotoLibraryUsageDescription</key>
   <string>MetaMap verification SDK requires access to media library</string>
   
   <key>NSLocationWhenInUseUsageDescription</key>
   <string>MetaMap will use your location information to provide best possible verification experience.</string>
   
   <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
   <string>MetaMap will use your location information to provide best possible verification experience.</string>
   
   <key>NSLocationAlwaysUsageDescription</key>
   <string>MetaMap will use your location information to provide best possible verification experience.</string>
   

3. Launch the application for iOS

   Bash

   ionic capacitor run ios
   

Metadata is an additional optional parameters:

1. Set the Language:

   Bash

   metadata: {"fixedLanguage": "es"}
   

2. Set the Button Color:

   Bash

   metadata: {"buttonColor": "hexColor"}
   

3. Set the Title color of the button:

   Bash

   metadata: {"buttonTextColor": "hexColor"}
   

4. Set identity Id as parameter for re-verification:

   Bash

   metadata: {"identityId": "value"}
   

Some error codes you may get during integration

402 - MetaMap services are not paid: please contact your customer success manager

403 - MetaMap credentials issues: please check your client id and MetaMap id