Ionic Cordova

MetaMap's Ionic Cordova SDK

Install MetaMap for Cordova

  1. add target minimum version on the config.xml file
<preference name="deployment-target" value="12.0" />
  1. add the plugin:
cordova plugin add metamap-cordova-plugin
  1. Add the MetaMap button to your HTML file:

HTML Example for Cordova

 <input
     class="metaMapButton"
     id="metaMapButton"
     type="button"
     value="show MetaMap Flow"
     />

JavaScript

  1. Add the MetaMap button in your JavaScript file index.js:

JavaScript Example for Cordova

function onDeviceReady() {

//trigger login on button click
var metaMapButton = document.getElementById("metaMapButton");

  metaMapButton.onclick = () => {
      //set 3 params clientId (cant be null), flowId, metadata
      var yourMetadata = { param1: "value1", param2: "value2" }
      var metaMapButtinParams = { clientId: "YOUR_CLIENT_ID", flowId: "YOUR_FLOW_ID", metadata: yourMetadata }
      cordova.plugins.MetaMapGlobalIDSDK.showMetaMapFlow(metaMapButtinParams)
    };

    //register to callback
    cordova.plugins.MetaMapGlobalIDSDK.setMetaMapCallback(
     params => {
       console.log("setMetaMapCallback success: " + params.identityId);
       console.log("setMetaMapCallback success: " + params.verificationID);
     },
     error => {
       console.log("setMetaMapCallback error: " + error);
     }
    );

}

Install MetaMap for Ionic Cordova

  1. add target minimum version on the config.xml file
<preference name="deployment-target" value="12.0" />
  1. add the plugin:
ionic cordova plugin add metamap-cordova-plugin
  1. Add the MetaMap button to your HTML file:

HTML Example for Ionic Cordova

 <input
     class="metaMapButton"
     id="metaMapButton"
     type="button"
     value="show MetaMap Flow"
     />
  1. Add the MetaMap button in your JavaScript file index.js:

JavaScript Example for Ionic Cordova

function onDeviceReady() {

//trigger login on button click
var metaMapButton = document.getElementById("metaMapButton");

  metaMapButton.onclick = () => {
      //set 3 params clientId (cant be null), flowId, metadata
      var yourMetadata = { param1: "value1", param2: "value2" }
      var metaMapButtinParams = { clientId: "YOUR_CLIENT_ID", flowId: "YOUR_FLOW_ID", metadata: yourMetadata }
      cordova.plugins.MetaMapGlobalIDSDK.showMetaMapFlow(metaMapButtinParams)
    };

    //register to callback
    cordova.plugins.MetaMapGlobalIDSDK.setMetaMapCallback(
      params => {
       console.log("setMetaMapCallback success: " + params.identityId);
       console.log("setMetaMapCallback success: " + params.verificationID);
     },
     error => {
       console.log("setMetaMapCallback error: " + error);
     }
    );

}

Android

Download the latest version of MetaMap for Android here.

  1. Check that your project's Gradle file (<YourProject>/platforms/android/mati-global-id-sdk-cordova-plugin/<demoCordovaMati-build>.gradle) uses the latest version of Mati for Cordova:
    dependencies {
      implementation 'com.getmati:mati-sdk:<LATEST_VERSION>'
    }
  1. Enable AndroidX support in config.xml.
   <platform name="android">
    <preference name="AndroidXEnabled" value="true" />
   </platform>

iOS

  1. In the info.plist file, add the following permissions to capture video, access the photo gallery, and capture audio for voiceliveness:
    Info.plist
    <key>NSCameraUsageDescription</key>
    <string>MetaMap needs access to your Camera</string>
    
    <key>NSPhotoLibraryUsageDescription</key>
    <string>MetaMap needs access to your media library</string>
    
    <key>NSMicrophoneUsageDescription</key>
    <string>MetaMap needs access to your Microphone</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>

Metadata Usage

Metadata is an additional optional parameters:

  1. Set the Language:
yourMetadata: {"fixedLanguage": "es"}
  1. Set the Button Color:
yourMetadata: {"buttonColor": "hexColor"}
  1. Set the Title color of the button:
yourMetadata: {"buttonTextColor": "hexColor"}
  1. Set identity Id as parameter for re-verification:
yourMetadata: {"identityId": "value"}

Did this page help you?