Implementation
Add the Metamap button to your application's HTML and JavaScript files.
<ion-content class="ion-padding">
<ion-button expand="block" class="metaMapButtonCss" (click)="showMetaMapFlow()">
π Show MetaMap Flow
</ion-button>
</ion-content>
MetaMap method implementation and callBacks
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MetaMapCapacitor } from 'metamap-capacitor-plugin';
import { Plugins } from '@capacitor/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {
private verificationCreatedListener: any;
constructor() {}
ngOnInit() {
// Subscribe to verificationCreated event
this.verificationCreatedListener = MetaMapCapacitor.addListener(
'verificationCreated',
(data: any) => {
console.log('π‘ verificationCreated');
console.log(' β’ identityId:', data.identityId);
console.log(' β’ verificationId:', data.verificationId);
}
);
}
ngOnDestroy() {
// Clean up the listener
if (this.verificationCreatedListener) {
this.verificationCreatedListener.remove();
}
}
showMetaMapFlow() {
const metadataParams = { key: 'value' };
const options = {
clientId: 'YOUR_CLIENT_ID',
flowId: 'YOUR_FLOW_ID',
metadata: metadataParams,
};
console.log('π Launching MetaMap Flow with:');
console.log(' β’ clientId:', options.clientId);
console.log(' β’ flowId:', options.flowId);
console.log(' β’ metadata:', options.metadata);
MetaMapCapacitor.showMetaMapFlow(options)
.then((verification: any) => {
console.log('β
Verification Success');
console.log(' β’ identityId:', verification.identityId);
console.log(' β’ verificationId:', verification.verificationId);
})
.catch((error: any) => {
console.warn('β Verification Cancelled or Failed');
console.warn(' β’ message:', error.message);
if (error?.data) {
console.warn(' β’ identityId:', error.data.identityId);
console.warn(' β’ verificationId:', error.data.verificationId);
console.warn(' β’ status:', error.data.status);
}
});
}
}
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.
Updated 6 days ago