Capacitor

Add the MetaMap button to your Capacitor app.

LTS version (Recommended for most users):Current Version(Latest features)
3.8.03.8.0

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:

    npm i [email protected]<version_number>
    
  2. Build your application.

    ionic build
    
  3. Update the Capacitor files.

    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

         "ios": {
          "minVersion": "12.0"
        }
    
  2. Add the following to info.plist:

    <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

    ionic capacitor run ios
    

Metadata is an additional optional parameters:

  1. Set the Language:

    metadata: {"fixedLanguage": "es"}
    
  2. Set the Button Color:

    metadata: {"buttonColor": "hexColor"}
    
  3. Set the Title color of the button:

    metadata: {"buttonTextColor": "hexColor"}
    
  4. Set identity Id as parameter for re-verification:

    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