Docs
Developer Hub

Function call

Suggest Edits

What is a function call

Metamap verification process can be started programmatically via function call.

When should you use function call

You should use function call when you want to start verification process programmatically.

Importing scripts

In order to use function call on your page you will need to add button.js to your page like so

<script src="https://web-button.getmati.com/button.js"></script>

This script will expose MetamapVerification class in window object.

Instantiating verification

Instantiate verification from MetamapVerification class. 

const configuration = {
  clientId: "your_client_id",
  flowId: "your_flow_id",
};
const verification = new MetamapVerification(configuration);

const configuration = {
  clientId: "your_client_id",
  flowId: "your_flow_id",
};
const verification = new MetamapVerification(configuration);

Learn how to obtain client and flow ids here.

Configuration

Configuration is done via configuration object passed as an argument into MetamapVerification constructor. You can find complete list of parameters here

Add event listeners

You can add listeners for verification events using .on method.

verification.on('metamap:userStartedSdk', ({ detail }) => {
  console.log('started payload', detail)
});
verification.on('metamap:userFinishedSdk', ({ detail }) => {
  console.log('finished payload', detail)
});

verification.on('metamap:userStartedSdk', ({ detail }) => {
  console.log('started payload', detail)
});
verification.on('metamap:userFinishedSdk', ({ detail }) => {
  console.log('finished payload', detail)
});

You can remove listeners by using .off method. Note that you will need to pass the same reference to a function that was passed to .on method.

const handler = ({ detail }) => {
  console.log('started payload', detail)
};

verification.on('metamap:userStartedSdk', handler);
verification.off('metamap:userStartedSdk', handler);

const handler = ({ detail }) => {
  console.log('started payload', detail)
};

verification.on('metamap:userStartedSdk', handler);
verification.off('metamap:userStartedSdk', handler);

Starting verification

In order to start verification process call .start method on verification instance.

verification.start();

verification.start();

Verification instance methods

Method nameDescriptionArguments
onSubscribe to verification event.eventName: string,
callback: (data: { detail: { identityId?: string, verificationId: string } | null }) => void
offUnsubscribe from verification event.

Note that to unsubscribe you must pass same function reference to callback argument of off method that was passed to on method.		eventName: string,
callback: (data: { detail: { identityId?: string, verificationId: string } | null }) => void
startStart verificationn/a

Events

Event nameDescriptionPayload
metamap:loadedIndicates that verification scripts are loaded. Emitted before verification itself starts.n/a
metamap:userStartedSdkIndicates that user has started verification process. Emitted just after verification was created.identityId, verificationId
metamap:userFinishedSdkIndicates that user finished verification process. Emitted when user reaches final screen.identityId, verificationId
metamap:exitedSdkIndicates that user exited verification before finishing it. Emitted when user chooses to exit verification.identityId, verificationId
metamap:continuedOnAnotherDeviceIndicates that user chose to continue redirection on another device. Emitted when use chooses redirection method.identityId
verificationId
metamap:screenIndicates that the individual reached to an specific screen. Emitted when individual lands on the screen.identityId
verificationId
screen

Screen Names

This is meant to be a guide for you to use as potential names you could see in the MetaMap button- metamap:screen event.

⚠️

Screen names are subject to change.

[
    "verificationStart",
    "verificationExit",
    "verificationExitAskReasons",
    "verificationExpired",
    "verificationSuccess",
    "verificationBackToDesktop",
    "languageSelect",
    "documentsOverview",
    "documentCountrySelect",
    "DocumentRegionSelect",
    "documentSelect",
    "documentHint",
    "proofOfResidencyHint",
    "documentCamera",
    "documentCaptureIncode",
    "documentPreview",
    "documentUpload",
    "documentUploading",
    "emailInput",
    "emailEnterCode",
    "selfieHint",
    "selfieCamera",
    "selfiePreview",
    "selfieUpload",
    "selfieCaptureIncode",
    "livenessHint",
    "livenessFallbackHint",
    "livenessCamera",
    "livenessPreview",
    "livenessFallbackPreview",
    "livenessUpload",
    "voicelivenessHint",
    "voicelivenessCamera",
    "VoicelivenessPreview",
    "voicelivenessUpload",
    "uploadError",
    "uploadSuccess",
    "eSignatureDocuments",
    "proofOfOwnershipHint",
    "proofOfOwnershipCamera",
    "proofOfOwnershipPreview",
    "redirectVerification",
    "redirectEmailWaiting",
    "redirectEmailForm",
    "redirectQRCodeWaiting",
    "redirectQRCodeInstructions",
    "redirectGalleryDenied",
    "phoneEnter",
    "phoneCountrySelect",
    "phoneSmsEnterCode",
    "redirectBiometricFallback",
    "permissionsInstructions",
    "loading",
    "documentSubtypeSelect",
    "unsupportedBrowsers",
    "maxFileSizeError",
    "minFileSizeError",
    "cameraDeniedError",
    "inputAccessError",
    "documentFaceDetectError",
    "biometryFaceDetectError",
    "documentNotAllDataError",
    "DocumentMRZError",
    "DocumentMismatchError",
    "commonError",
    "livenessMovementError",
    "livenessVoiceError",
    "noTextError",
    "timeoutError",
    "ipRestrictions",
    "IncorrectSideError",
    "DynamicInput",
    "VideoAggrement",
    "documentOcclusionError",
    "RetriesBlockedError"
]

enum Screens {
    VerificationStart = 'verificationStart',
    VerificationExit = 'verificationExit',
    VerificationExitAskReasons = 'verificationExitAskReasons',
    VerificationExpired = 'verificationExpired',
    VerificationSuccess = 'verificationSuccess',
    VerificationBackToDesktop = 'verificationBackToDesktop',
    LanguageSelect = 'languageSelect',
    DocumentsOverview = 'documentsOverview',
    DocumentCountrySelect = 'documentCountrySelect',
    DocumentRegionSelect = 'DocumentRegionSelect',
    DocumentSelect = 'documentSelect',
    DocumentHint = 'documentHint',
    ProofOfResidencyHint = 'proofOfResidencyHint',
    DocumentCamera = 'documentCamera',
    DocumentCaptureIncode = 'documentCaptureIncode',
    DocumentPreview = 'documentPreview',
    DocumentUpload = 'documentUpload',
    DocumentUploading = 'documentUploading',
    EmailEnter = 'emailInput',
    EmailEnterCode = 'emailEnterCode',
    SelfieHint = 'selfieHint',
    SelfieCamera = 'selfieCamera',
    SelfiePreview = 'selfiePreview',
    SelfieUpload = 'selfieUpload',
    SelfieCaptureIncode = 'selfieCaptureIncode',
    LivenessHint = 'livenessHint',
    LivenessFallbackHint = 'livenessFallbackHint',
    LivenessCamera = 'livenessCamera',
    LivenessPreview = 'livenessPreview',
    LivenessFallbackPreview = 'livenessFallbackPreview',
    LivenessUpload = 'livenessUpload',
    VoicelivenessHint = 'voicelivenessHint',
    VoicelivenessCamera = 'voicelivenessCamera',
    VoicelivenessPreview = 'VoicelivenessPreview',
    VoicelivenessUpload = 'voicelivenessUpload',
    UploadError = 'uploadError',
    UploadSuccess = 'uploadSuccess',
    ESignatureDocuments = 'eSignatureDocuments',
    ProofOfOwnershipHint = 'proofOfOwnershipHint',
    ProofOfOwnershipCamera = 'proofOfOwnershipCamera',
    ProofOfOwnershipPreview = 'proofOfOwnershipPreview',
    RedirectVerification = 'redirectVerification',
    RedirectEmailWaiting = 'redirectEmailWaiting',
    RedirectEmailForm = 'redirectEmailForm',
    RedirectQRCodeWaiting = 'redirectQRCodeWaiting',
    RedirectQRCodeInstructions = 'redirectQRCodeInstructions',
    RedirectGalleryDenied = 'redirectGalleryDenied',
    PhoneEnter = 'phoneEnter',
    PhoneCountrySelect = 'phoneCountrySelect',
    PhoneSmsEnterCode = 'phoneSmsEnterCode',
    RedirectBiometricFallback = 'redirectBiometricFallback',
    PermissionsInstructions = 'permissionsInstructions',
    Loading = 'loading',
    DocumentSubtypeSelect = 'documentSubtypeSelect',
    UnsupportedBrowsers = 'unsupportedBrowsers',
    MaxFileSizeError = 'maxFileSizeError',
    MinFileSizeError = 'minFileSizeError',
    CameraDeniedError = 'cameraDeniedError',
    InputAccessError = 'inputAccessError',
    DocumentFaceDetectError = 'documentFaceDetectError',
    BiometryFaceDetectError = 'biometryFaceDetectError',
    DocumentNotAllDataError = 'documentNotAllDataError',
    DocumentMRZError = 'DocumentMRZError',
    DocumentMismatchError = 'DocumentMismatchError',
    CommonError = 'commonError',
    LivenessMovementError = 'livenessMovementError',
    LivenessVoiceError = 'livenessVoiceError',
    NoTextError = 'noTextError',
    TimeoutError = 'timeoutError',
    IpRestrictions = 'ipRestrictions',
    IncorrectSideError = 'IncorrectSideError',
    DynamicInput = 'DynamicInput',
    VideoAggrement = 'VideoAggrement',
    DocumentOcclusionError = 'documentOcclusionError',
    RetriesBlockedError = 'RetriesBlockedError'
  }

Updated 3 months ago