Iframe Integration (H5)
This section provides a comprehensive guide to integrating the AAI iframe into your application. It includes steps for embedding the iframe, handling events, and interpreting the event codes.
1. Enabling Iframe Mode
To enable iframe integration mode, you must configure the iframeEnabled parameter in the generateUrl API.
2. Embedding the Iframe
To integrate the iframe, include it in your HTML using the following structure:
Attribute Value | Purpose | Required |
---|---|---|
autoplay | Allow autoplay of video streams | true |
camera | Allows invocation of camera permissions | true |
clipboard-write | Allow links to be copied during the fallback process | false |
<iframe src="kyc-generated-url-here" allow="autoplay;camera;clipboard-write;"></iframe>
Note: If the clipboard-write permission is not granted, the copy operation may fail. In such cases, a postMessage event with type 'copy' will be dispatched. For details, please refer
3. Event Types and Codes
The iframe emits events to notify the parent application about workflow progress and completion. When the type
is complete
, the code
field provides additional details about the outcome.
How to Usetype
andcode
type
andcode
-
Event Type (
type
):- When
type
iscomplete
, the workflow has finished, and you should check thecode
field for details.
- When
-
Event Code (
code
):- Use the
code
value to identify the specific reason for the completion and take appropriate actions.
- Use the
Example Implementation
Here is an example of how to handle type
and code
in your JavaScript application:
window.addEventListener('message', (event) => {
const { type, code } = event.data;
if (type === 'complete') {
switch (code) {
case 'SUCCESS':
console.log('Document Verification complete successfuly.');
break;
default:
console.info('Refer to the corresponding {errorCode}:', code);
break;
}
}
if (type === 'copy') {
console.log(event.data.shortUrl)
}
});
Updated 15 days ago