To integrate the Natural Person Portal into your site, on whatever page you plan to put it on you need the following code:
/* In the <head> tag of the parent page */ <linkrel="stylesheet"href="https://verify.icomplykyc.com/main.css" />
/* In the <body> tag of the parent page or component */ <divid="icomply"></div> <script>document.body.onload= () => {iComply.init(document.getElementById('icomply')) } </script> <scriptsrc="https://verify.icomplykyc.com/icomply-min.js"></script>
The Natural Person Portal will fill the space of its container, so it's pretty flexible when it comes to where you can integrate it into your website. If all is configured well, you should be able to see the widget "Get Verified" page on your site. Please note the parent site MUST be served over HTTPS, otherwise camera access and liveness will not work.
Important: DO NOT embed the portal parent page in an iFrame. Due to browser security restrictions, users will not see a prompt asking for permission to allow access to their camera if the portal is embeded in an iFrame which will result in functionality like liveness detection not working.
If your integration is successfully implemented, you should see the following screen on your parent page.
To Prepopulate User Information For the Natural Person Portal
To pre-populate data from the widget parent website, initialize the widget as follows:
<script> document.body.onload = () => {/* const data = { naturalPersonOpenId: "1232434255", firstName: "FIRST NAME", middleName: "[MIDDLE NAME]", // optional lastName: "[LAST NAME]", dateOfBirth: "1976-05-21", // iso date format YYYY-MM-DD email: "example@mail.com", phoneNumber: "[PHONE NUMBER]", // optional address: "[ADDRESS]", unitApt: "[UNIT/APARTMENT]", // optional city: "[CITY]", countryCode: "CAN", // Alpha-3 code format state: "YT", // This field is required only if countryCode value // is either 'CAN' or 'USA' - Alpha-2 code format zip: "Y1A 0A1" // optional }; */iComply.init(document.getElementById("root"), {//data: data, icomplyPreview:true,callback:function(serverResponse) {console.log(serverResponse);// Your code goes here } }); }; </script>
Sample parent page for NP portal
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="utf-8" /> <metaname="viewport"content="width=device-width, initial-scale=1" /> <metaname="theme-color"content="#000000" /> <linkrel="stylesheet"href="https://verify.icomplykyc.com/main.css" /> <title>IComply widget</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <divid="root"></div> <script>document.body.onload= () => {iComply.init(document.getElementById("root"), { icomplyPreview:false,verificationIdCallback:function(verificationId) {console.log("VerificationId:",verificationId);// Your code goes here },callback:function(serverResponse) {console.log(JSON.stringify(serverResponse));// Your code goes here } }); }; </script> <scriptsrc="https://verify.icomplykyc.com/icomply-min.js"></script> </body></html>
Verification Result Callback Examples
The Natural Person Portal will trigger a callback function once the ID has been processed. The result of this callback can be read as follows:
document.body.onload= () => {iComply.init(document.getElementById("iComply"), { icomplyPreview:false,verificationIdCallback:function(verificationId) {console.log("VerificationId:",verificationId);// Your code goes here },callback:function(serverResponse) {console.log(JSON.stringify(serverResponse));// Your code goes here } }); };
The first callback fires after the user enters their personal information and has the following payload:
The second callback fires after the user submits their identity documents and completes their verification:
{"verificationId":1234567895,"summaryResult":"PASS","scanResult":true,"scanResultMessage":"Approved","scanVerificationResult":"Template Identified (OCR Completed)","faceMatch":true,"scanError":null,"resultCode":0,"errorCode":0,"scanConfidenceScore":50,"scanDocumentNumber":"HD123456","qualifiers": ["Last Name Does Not Match","YOB Does Not Match" ],"restriction":null,"datasources": [],"givenName":"Joe","middleName":"Callback","surname":"Tester","dateOfBirth":"1941-03-03T00:00:00","email":"joe@tester123.com","phoneNumber":"4323452345","entityId":"3c450652-a899-4c9d-8cf0-38a7c64aa1fd"}
This payload can be used to redirect the user based on the result of the ID verification and document authentication.
