Ionic Cordova

MetaMap's Ionic Cordova SDK

Version

This plugin uses the latest versions of the MetaMap iOS and Android SDKs. For more information on the latest native SDK versions, go to:

For changes to the plugin, go to the changelog page

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?