# iFrame

## What are the steps for getting set up?

### 1. Create Token

In order for the document scan/upload process to work you must submit a token within the parameters of the `veratadModal`.

```javascript
veratadModal = new veratad.modal({
token: "8dfe0180-5389-46d4-a28c-b74061d8e7c3",
});
```

To get a token you must make an API call with your Veratad username and password. See link below for more details.

{% hint style="warning" %}
Tokens are only valid for 6 hours. It is recommended that you get a new token on each iFrame build.
{% endhint %}

### 2. Include CSS, JS and iFrame

{% tabs %}
{% tab title="CSS" %}

```markup
<head>
<link rel="stylesheet" href="https://dcams.app/v3/stable/style.css">
</head>
```

{% endtab %}

{% tab title="JS" %}

```
<script src="https://dcams.app/v3/stable/initialize.js"></script>
```

{% endtab %}

{% tab title="iFrame" %}

```
<iframe allow="camera" style="display:none;" id="veratad-frame" scrolling="no"></iframe>
```

{% endtab %}
{% endtabs %}

### 3. Set-up a Webhook URL

Use the admin to set your endpoint, authentication and see IP addresses..&#x20;

## Full Example

{% hint style="info" %}
This example includes all parameters, functions and methods.
{% endhint %}

```markup
<head>
<link rel="stylesheet" href="https://dcams.app/v3/stable/style.css">
</head>
<body>
<iframe allow="camera" style="display:none;" id="veratad-frame" scrolling="no"></iframe>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
  $.get( "token.php", function( data ) {
      var token = data.token;
      var veratadModal;
          $(function(){
            veratadModal = new veratad.modal({
              fn: "John", 
              ln: "Smith", 
              addr: "123 Main St", 
              city: "Stratford", 
              state: "CT", 
              zip: "12345", 
              dob: "19880212", 
              phone: "5555555555",
              email: "test51598@veratad.com",
              reference: "tery745f",
              token: token,
              styleToken: "token ID",
              language: "en",
              desktopToMobileHandoff: {
                isActive: true, 
                continueIsAnOption: false
              },
              resultMessages: {
                success:{
                    verificationSuccessTitle: "Enter Text",
                    verificationSuccessSubTitle: "Enter Text",
                  },
                failure: {
                   verificationFailureTitle: "Enter Text",
                   verificationFailureSubTitle: "Enter Text",
                 },
                error: {
                   verificationErrorTokenTitle: "Enter Text",
                   verificationErrorTokenSubTitle: "Enter Text",
                   verificationErrorAlreadyVerifiedTitle: "Enter Text",
                   verificationErrorAlreadyVerifiedSubTitle: "Enter Text",
                   verificationErrorPendingTitle: "Enter Text",
                   verificationErrorPendingSubTitle: "Enter Text",
                   verificationErrorVelocityTitle: "Enter Text",
                   verificationErrorVelocitySubTitle: "Enter Text",
                 }
              },
              additionalData: {
                value_1: "test1",
                value_2: "test2"
              },
              onOpen: function() {

              },
              onClose: function() {

              },
              onSuccess: function() {

              },
              onFailure: function() {

              },
              onEmail: function() {

              },
              onQr: function() {

              },
              onError: function() {

              },
              onErrorToken: function() {

              },
              onErrorAlreadyVerified: function() {

              },
              onErrorPending: function() {

              },
              onErrorVelocity: function() {

              },
            });
          veratadModal.open();
        });
      }, "json" );
  });
    </script>
  <script src="https://dcams.app/v3/stable/initialize.js"></script>
</body>
```

## Functions

| Name                     | Description                                                                                   |
| ------------------------ | --------------------------------------------------------------------------------------------- |
| onOpen()                 | Triggers when the modal is first opened on the page or with the `open()` method               |
| onClose()                | Triggers when the modal is closed by the user or with the `close()` method                    |
| onSuccess()              | The document was successfully scanned or successfully uploaded if DCAMS+ is not active        |
| onFailure()              | The document failed the scan process or was not uploaded successfully if DCAMS+ is not active |
| onEmail()                | The user has requested that they get an email with a link to scan.                            |
| onQr()                   | The user pushed the "done" button after QR scanning.                                          |
| onError()                | A general processing error occurred during the scan or upload process.                        |
| onErrorToken()           | An invalid token was supplied                                                                 |
| onErrorPending()         | The user's document is currently in a `PENDING` state and they cannot submit a new document   |
| onErrorAlreadyVerified() | The user is in a `PASS` state already                                                         |
| onErrorVelocity()        | The user has already processed 3 attempts within a 24 hour period                             |

## Methods

| Name      | Description                                                       |
| --------- | ----------------------------------------------------------------- |
| open()    | Open the modal. i.e. `veratadModal.open();`                       |
| close()   | Close the modal i.e. `veratadModal.close();`                      |
| destroy() | Destroy the modal and all variables i.e. `veratadModal.destroy()` |

## Parameters

| Parameter              | Required | Type   | Description                                                                                                                                                                                                                                                                                                                          |
| ---------------------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| fn                     | required | string | The customer's first name                                                                                                                                                                                                                                                                                                            |
| ln                     | required | string | The customer's last name                                                                                                                                                                                                                                                                                                             |
| addr                   | optional | string | The customer's street address                                                                                                                                                                                                                                                                                                        |
| city                   | optional | string | The customer's city                                                                                                                                                                                                                                                                                                                  |
| state                  | optional | string | The customer's state                                                                                                                                                                                                                                                                                                                 |
| zip                    | optional | string | The customer's zip code                                                                                                                                                                                                                                                                                                              |
| dob                    | optional | string | <p>The customer's Date of Birth</p><p>(YYYYMMDD format)</p>                                                                                                                                                                                                                                                                          |
| email                  | required | string | The customer's email address                                                                                                                                                                                                                                                                                                         |
| phone                  | optional | string | 10 digits no chars                                                                                                                                                                                                                                                                                                                   |
| reference              | optional | string | An arbitrary value that will be returned with the callback                                                                                                                                                                                                                                                                           |
| token                  | required | string | The token for the iFrame session                                                                                                                                                                                                                                                                                                     |
| styleToken             | optional | string | You can create a style ID in the admin dashboard. Once created enter the value in this parameter to customize the iFrame style.                                                                                                                                                                                                      |
| desktopToMobileHandoff | optional | object | <p>There are two boolean values: <br><br><code>isActive</code> which will make the QR code the first thing a user sees on Desktop. <br><br><code>continueIsAnOption</code> if set to <code>true</code> then the user will have the option to bypass the QR and continue on desktop<br><br>Both are <code>false</code> by default</p> |
| additionalData         | optional | object | Any additional data you would like sent back with the callback POST. This can be set with any key => value pairs.                                                                                                                                                                                                                    |
| resultMessages         | optional | object | See `resultMessages` section below for more explanation.                                                                                                                                                                                                                                                                             |
| language               | optional | string | <p>If no language is specified then the system will default to English. All languages from the Google Translate API are supported. <a href="https://cloud.google.com/translate/docs/languages">Click here to view.</a></p><p><strong>The value should be the ISO-639-1 Code.</strong></p>                                            |

### resultMessages

These are the messages displayed to the end user in the iFrame.

{% hint style="info" %}
**NOTE:** If you do not want the user to be messaged in the iFrame you can simply run the `veratadModal.close()` after one of the function callbacks.

That said, If you do not customize these messages then your users that get an email link sent to them will see the defaults on the page.
{% endhint %}

{% tabs %}
{% tab title="Success" %}
**The user has passed verification or successfully uploaded if DCAMS+ is not active, but storage is active.**

| parameter                   | default message              |
| --------------------------- | ---------------------------- |
| verificationSuccessTitle    | Verification Success         |
| verificationSuccessSubTitle | You have passed verification |
| {% endtab %}                |                              |

{% tab title="Failure" %}
**The user did not PASS DCAMS+ verification or the image was not uploaded.**

| parameter                   | default message                        |
| --------------------------- | -------------------------------------- |
| verificationFailureTitle    | Verification Failed                    |
| verificationFailureSubTitle | Your document is pending manual review |
| {% endtab %}                |                                        |

{% tab title="Error" %}
**Something went wrong and no verification was processed. There are 4 error states:**

1. **Token** - the token provided in the iFrame is not valid&#x20;
2. **Already Verified** - the user (based on email) has already `PASSED` verification&#x20;
3. **Pending** - the user (based on email) is currently in a `PENDING` state of  verification&#x20;
4. **Velocity** - The user has exceeded the `velocity_threshold`&#x20;

| parameter                                | default message                                                                                                                       |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| verificationErrorTokenTitle              | Bad or Expired Token                                                                                                                  |
| verificationErrorTokenSubTitle           | This document scan instance is using a bad or expired token. Please contact customer service.                                         |
| verificationErrorAlreadyVerifiedTitle    | You Are Already Verified                                                                                                              |
| verificationErrorAlreadyVerifiedSubTitle | You have already passed this process and are not able to upload a new document at this time. Please call Customer Service.            |
| verificationErrorPendingTitle            | Your Document is Currently Pending Manual Review                                                                                      |
| verificationErrorPendingSubTitle         | Your document is currently pending manual review and you may not provide another document at this time. Please call Customer Service. |
| verificationErrorVelocityTitle           | Too Many Attempts                                                                                                                     |
| verificationErrorVelocitySubTitle        | You have exceeded the amount of verification attempts. Please call Customer Service.                                                  |
| {% endtab %}                             |                                                                                                                                       |
| {% endtabs %}                            |                                                                                                                                       |

## Webhook

Once a customer's status changes then the webhook will be invoked. The `email additional_data` or `reference` values can be used to associate the journey on Veratad's side to a customer/order on your side.

{% hint style="danger" %}
You should always use the backend webhook POST to get the official status of the customer/order. The frontend callback in the JS should only be used to message and route your customer on the frontend.
{% endhint %}

### Example

```javascript
POST {The URL you setup}
```

#### Body

```javascript
{
    "fn": "John",
    "ln": "Smith",
    "addr": "123 Main St",
    "city": "Stratford",
    "state": "CT",
    "zip": "06614",
    "dob": "19880521",
    "email": "test@veratad.com",
    "reference": "12345-test",
    "status": "PENDING",
    "additionalData": {
        "value_1": "test1",
        "value_2": "test2"
    },
    "dcams_plus": {
        "document_data": {
            "FirstName": "LOUISA",
            "LastName": "SAMPLE",
            "MiddleName": "ANNA",
            "FullAddress": "109 S FOSTER RD, BATON ROUGE, LA, 70808-0000",
            "Address": "109 S FOSTER RD",
            "City": "BATON ROUGE",
            "State": "LA",
            "Zip": "70808-0000",
            "DateOfBirth": "19720629",
            "Height": "5-08",
            "Sex": "F",
            "EyeColor": "BRN",
            "DocumentNumber": "003009381",
            "IssueDate": "20140714",
            "ExpirationDate": "20300629",
            "CountryCode": "USA", // (ISO Alpha 2 or 3)
            "DocumentType": "DRIVERS LICENSE" // other values are PASSPORT, IDENTITY CARD and UNKNOWN
        },
        "confirmation": 92480850,
        "action": "REVIEW",
        "issues": ["DOB DOES NOT MATCH DOCUMENT", "FIRST NAME DOES NOT MATCH DOCUMENT"],
        "detail": "TRANSACTION REQUIRES FURTHER ATTENTION"
    },
    "storage": {
            "success": false
      }
}
```

#### Body (When Image Return is Active)

There is a setting when a company is not using the Veratad storage system to have the document images returned via the callback. If this setting is active then the callback body will be as follows.

```javascript
{
    "fn": "John",
    "ln": "Smith",
    "addr": "123 Main St",
    "city": "Stratford",
    "state": "CT",
    "zip": "06614",
    "dob": "19880521",
    "email": "test@veratad.com",
    "reference": "12345-test",
    "status": "PENDING",
    "additionalData": {
        "value_1": "test1",
        "value_2": "test2"
    },
    "dcams_plus": {
        "document_data": {
            "FirstName": "LOUISA",
            "LastName": "SAMPLE",
            "MiddleName": "ANNA",
            "FullAddress": "109 S FOSTER RD, BATON ROUGE, LA, 70808-0000",
            "Address": "109 S FOSTER RD",
            "City": "BATON ROUGE",
            "State": "LA",
            "Zip": "70808-0000",
            "DateOfBirth": "19720629",
            "Height": "5-08",
            "Sex": "F",
            "EyeColor": "BRN",
            "DocumentNumber": "003009381",
            "IssueDate": "20140714",
            "ExpirationDate": "20300629",
            "CountryCode": "USA", // (ISO Alpha 2 or 3)
            "DocumentType": "DRIVERS LICENSE" // other values are PASSPORT, IDENTITY CARD and UNKNOWN
        },
        "confirmation": 92480850,
        "issues": ["DOB DOES NOT MATCH DOCUMENT", "FIRST NAME DOES NOT MATCH DOCUMENT"],
        "detail": "TRANSACTION REQUIRES FURTHER ATTENTION"
    },
    "storage": {
            "success": false
      },
    "documents": {
        "front": "BASE 64 Encoded Image String",
        "back": "BASE 64 Encoded Image String"
    }
}
```

#### Possible Status Values

| status  | description                          |
| ------- | ------------------------------------ |
| PASS    | The document has passed verification |
| PENDING | The document is under manual review  |
| FAIL    | The document has failed verification |
