Natural Person Portal

The following describes the steps necessary to integrate the Natural Person portal into your website or mobile application.

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 */
 
 <link rel="stylesheet" href="https://verify.icomplykyc.com/main.css" />

/* In the <body> tag of the parent page or component */
 
   <div id="icomply"></div>
    <script>
      document.body.onload = () => {
        iComply.init(document.getElementById('icomply'))
      }
    </script>
    <script src="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: "[email protected]",
          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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="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>
    <div id="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>
    <script src="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:

{
    "userId": "109d48cb-b565-41e0-b449-82192e2554d0",
    "queryId": 3882244246,
    "verificationId": 2145816285,
    "entityId": "2c060732-a899-4c9d-8cf0-38a7c64aa1fd",
    "sessionId": "607e513e-5a12-4fe3-817b-3684a9e23b04",
    "error": "",
    "errorCode": 200,
    "entityCreated": true
}

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": "[email protected]",
    "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.

PreviousData Structures NextReact.js Integration

Last updated 3 years ago