Implementation

Add the MetaMap button to your HTML file:

HTML Example for Cordova

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

JavaScript Example for Cordova

function onDeviceReady() {
  console.log("[MetaMap] ✅ Device is ready");

  const metaMapButton = document.getElementById("metaMapButton");

  if (!cordova || !cordova.plugins || !cordova.plugins.MetaMapGlobalIDSDK) {
    console.error("[MetaMap] ❌ MetaMap plugin not found");
    return;
  }

  if (metaMapButton) {
    console.log("[MetaMap] 🔘 metaMapButton found:", metaMapButton);

    metaMapButton.onclick = () => {
      console.log("[MetaMap] 🔄 MetaMap button clicked, launching flow...");

      cordova.plugins.MetaMapGlobalIDSDK.showMetaMapFlow({
        clientId:  "YOUR_CLIENT_ID"
        flowId: "YOUR_FLOW_ID"
        metadata: { integration: "cordova_example" }
      });
    };

    // Set callback for MetaMap SDK events
    cordova.plugins.MetaMapGlobalIDSDK.setMetaMapCallback(
      function callbackHandler(params) {
        const { eventType, identityId, verificationID } = params || {};

        switch (eventType) {
          case "created":
            console.log("[MetaMap] 📦 Verification created:");
            console.log(" - identityId:", identityId);
            console.log(" - verificationID:", verificationID);
            break;

          case "success":
            console.log("[MetaMap] ✅ Verification successful:");
            console.log(" - identityId:", identityId);
            console.log(" - verificationID:", verificationID);
            break;

          default:
            console.warn("[MetaMap] ⚠️ Unknown eventType:", eventType);
            break;
        }
      },
      function errorCallback(params) {
        const { identityId, verificationID } = params || {};
        console.log("[MetaMap] ❌ Verification cancelled:");
        console.log(" - identityId:", identityId);
        console.log(" - verificationID:", verificationID);
      }
    );
  } else {
    console.warn("[MetaMap] ⚠️ metaMapButton not found in DOM.");
  }
}

document.addEventListener("deviceready", onDeviceReady, false);

In order to make this work you need to set your own CLIENT_ID and FLOW_ID. You can find them in the Metamap Dashboard, for more details please check this section.