Client side user view

The next step is to load the Yoti client side view. Here we describe how to:

• Launch the web client
• Or launch the mobile client

Web client

In the earlier section we saw how to create a request, which returns:

• Session ID
• Session Token

We can then use these to construct a URL which loads the Yoti client side view. The URL can be used in the following ways:

• Within an iframe on your webpage
• As a link on your webpage
• As a link shared securely with a user

https://api.yoti.com/idverify/v1/web/index.html?sessionID=<inputsessionID>&sessionToken=<yoursessionToken>

The example below demonstrates the use of an iframe:

<iframe src="<https://api.yoti.com/idverify/v1/web/index.html?sessionID=<inputsessionID>&sessionToken=<yoursessionTokenID>" style="height:605px; width:100%; border:none;" allow="camera"></iframe>

Once the Yoti client side view has launched, it will take the user through the ID document capture flow.

Please note: allow="camera" is required when using Yoti Identity verification on mobiles (web or native), and is serving the website over HTTPS.

Event notifications

Yoti recommends using POST messaging if you would like to be notified for one of the following situations :

• When the iFrame flow has successfully completed
• If an error occurs during the flow. See below for full error list.

A POST message for either of these events is structured as follows:

{

  eventType: string, // "SUCCESS” or “ERROR”,

  eventCode: number // See 'Error codes' for possible error codes. This will be undefined in the event of a success

}

Below is a javascript example that can be used to listen to these messages.

window.addEventListener(

    'message',

    function(event) {

      console.log('Message received', event.data);

​

      if (event.data.eventType === 'SUCCESS') {

        // Act upon success

      } else if (event.data.eventType === ‘ERROR’) {

        // Act upon error

       const errorCode = event.data.eventCode;

      }

    }

  );

Please note if a success URL or error URL is supplied as part of the session preferences then the iFrame will redirect after button click at the end of the flow. To utilise POST messaging, a success URL and error URL should be omitted.

iFrame launch - Post method

Step 1: Render the Iframe with just the base Yoti URL, without the URL parameters:

https://api.yoti.com/idverify/v1/web/index.html

Step 2: Using the postMessage JavaScript functionality the session can will be launched with the correct configuration, posting the following

{

  eventType: 'INIT_SESSION',

  sessionID: '<Obtained from the get session API call>',

  sessionToken: '<Obtained from the get session API call>',

}

Step 3: User proceeds as normal. No other implementation changes are required to enable this functionality.

<iframe src="https://api.yoti.com/idverify/v1/web/index.html" allow=”camera” width="100%" height="100%" id="iframeId"></iframe> 

​

<script> 

   const iframe = document.getElementById('iframeId').contentWindow;

   const origin = 'https://api.yoti.com';

   window.addEventListener(

       'message',

       event => {

          if (event.data.eventType === 'STARTED' && event.origin === origin) {

               iframe.postMessage({

                       eventType: 'INIT_SESSION',

                       sessionID: 'someSessionId',

                       sessionToken: 'someSessionToken',

                   },

                   origin

               );

           }

       }

   );

</script>

In-session feedback

OCR failure on the document is a good sign that there’s something wrong with the submission.

Yoti will process the image and provide feedback to the user based on the result of the image capture. In unsuccessful prompting the user to try to upload once again and why if unsuccessful.

In session feedback should help:

• Notify the user something is wrong with the submission
• Provide the user with a chance to re-upload the document within the same session
• Increase number of successful checks

By default, Yoti will allow 1 extra attempt. The screen that will be shown to the user on unsuccessful attempts is:

In session feedback example screen

The user flow is as follows:

1. The user will select document type and country.
2. The user will upload / take a photo of the document.
3. If the document can be OCR’d it will go through.
4. If it cannot due to user error, they will be asked to retry or change their document type.

If the user has reached their maximum attempts the session will end there.

End of in-session feedback

Reclassification

If the wrong document is uploaded Yoti will attempt to reclassify the document. That means, that if the submitted document type or / and country would be different from the ones user selected Yoti will save it under the detected one if the data is extracted successfully.

Translation

Yoti Identity verification has configuration settings to change the language of the information displayed to the client.

Supported languages are:

• French (Français)
• Spanish (Español)
• Thai (ภาษาไทย)
• Russian (русский)
• Brazilian Portuguese (português brasileiro)
• Turkish (Türkçe)
• Vietnamese (Tiếng Việt)
• Czech (čeština)
• German (Deutsch)
• Canadian English
• Polish (polski)
• Italian (Italiano)
• Danish (Dansk)
• Finnish (Suomi)
• Norwegian (Norsk)
• Dutch (Dutch)
• Swedish (Svenska)
• Japanese (日本)
• Romanian (România)

For information on how to do this please go to Client preferences.

Hint See the next page for information on integrating our native SDK's.

Error codes