Document Verification Web SDK

Alloy’s Document Verification plugin can be implemented for web, iOS or Android, with full UI components for users on mobile. Your customers see a great digital experience, while you experience decreased fraud and manual reviews by automatically verifying key documents. For more information on supported document types and use cases, check out our help article.

Prerequisites

  • An Alloy account
  • SDK Key (Please contact your Alloy admin to generate a key)
  • A Document Verification Workflow
  • Journey with at least one Document Verification node

For more information on dashboard set up, check out our dashboard set up guide.

Installation

First, install the web SDK npm package:

yarn add @alloyidentity/web-sdk

SDK Initialization Parameters

key: string; // client specific SDK key that is tied to your Alloy API Key/Secret. Can only be used to run the SDK
production?: boolean; // setting this to true will make the SDK use the Alloy production endpoints
color?: { // Specify different values for the main colors of the SDK
    primary?: string;
    secondary?: string;
}
journeyApplicationToken: string // Token of an application. ONLY IF USING A JOURNEY
journeyToken: string // Token that refers to that particular journey. ONLY IF USING A JOURNEY
isNext: true
entityToken?: string // Pass entity token into init params to for multi entity applications to send each applicant only their portion of the doc verfication process
isSingleEntity?: boolean, // Send each applicant in a joint application only their portion of document process

SDK with DocV Example

import React from 'react';
import alloy from 'alloy';
import './App.css';

const alloyInitParams = {
  key: '028d85e0-aa24-4ca1-99f2-90e3ee3f4e6b',
  journeyApplicationToken: 'JA-xyz',
  journeyToken: 'J-XYZ',
  color: { primary: '#CD7D2D', secondary: '#862633' }
};
alloy.init(alloyInitParams);

function App() {
  // Callback
  const callback = data => {
    console.log(data);
  };

  const onOpen = () => {
    const anchorElementSelected = document.getElementById('anchors');
    const anchorElement =
      anchorElementSelected.options[anchorElementSelected.selectedIndex].value;
    // The "open" function, allows the use of an optional parameter to mount the alloy modal inside a div identified by its ID or class name.
    // If not specified, it'll be absolute positioned in the middle of the document.
    alloy.open(callback, anchorElement);
  };

  const onClose = () => {
    alloy.close();
  };

  return (
    <>
      <div className="App">
          <div className="buttonContainer">
            <select name="anchors" id="anchors">
              <option value={undefined}>No anchor</option>
              <option value="anchorElementContainer1">Left anchor</option>
              <option value="anchorElementContainer2">Right anchor</option>
              <option value="anchorElementContainer3">Bottom anchor</option>
            </select>
            <button onClick={onOpen}>Open</button>
            <button onClick={onClose}>Close</button>
          </div>
          <div className="anchorContainer">
            <div className="anchorElementContainer1">(ID: anchor1)</div>
            <div className="anchorElementContainer2">(className: anchor2)</div>
            <div className="anchorElementContainer3">(className: anchor3)</div>
          </div>
        </div>
    </>
  );
}

export default App;

Legacy SDK Initialization Parameters

If you're using the legacy SDK, the following parameters need to be added to your init params file:
maxEvaluationAttempts, forceMobile, validationPrechecks, documents, and selfie. Definitions of each parameter are listed below in the comments.

key: string; // client specific SDK key that is tied to your Alloy API Key/Secret. Can only be used to run the SDK
entityToken?: string; // if this is an existing Alloy Entity pass in their entity_token
externalEntityId?: string; // pass your internal applicant/person ID here
production?: boolean; // setting this to true will make the SDK use the Alloy production endpoints
maxEvaluationAttempts?: number // maximum attempts number for the final verification; set to 2 by default
documents?: DocumentType // Array of values. Can be 'license' or ['license'], 'passport' or ['passport'] or ['license', 'passport']. This last one will prompt the user to select between those two options. If not specified will default to 'license'.
selfie?: boolean // If set to `true`, it'll add a final step to the document process whereby the user is prompted to take a picture of themselves
evaluationData?: { // pass all the applicant data you have collected Alloy can compare it to the data on the document
    nameFirst?: string;
    nameLast?: string;
    addressLine1?: string;
    addressLine2?: string;
    addressCity?: string;
    addressState?: string;
    addressPostalCode?: string;
    addressCountryCode?: string;
    birthDate?: string;
}
color?: { // Specify different values for the main colors of the SDK
    primary?: string;
    secondary?: string;
}
forceMobile: boolean // Will force the user to follow the mobile flow (either QR or SMS).
validationPreChecks: boolean // If true the pre-check (front/back) Evaluations are run. If not specified or false just the final evaluation is run.
journeyApplicationToken?: string // Token of an application. ONLY IF USING A JOURNEY
journeyToken?: string // Token that refers to that particular journey. ONLY IF USING A JOURNEY
isLegacy: True //indicates that legacy version is being used

Using the Legacy SDK without Journeys Callback Data

If you're using the legacy SDK without Journeys, when the flow finishes, your callback () function will fire within your app with the following parameters. You can use these to update the user on the applicant's status, which will be Approved, Denied, or Needs Review. You can make a GET request to collect information and documents from Alloy's API.

{
  document_token_front: "D-tiWOYJr6pB1xwW9P5gNF", // the Alloy Document Token for the front of the ID
  document_token_back: "D-dMANOKdbIwU6U7YaAfW3", // the Alloy Document Token for the back of the ID
  document_token_selfie: "D-asdf7SDF78f78SdF7", // the Alloy Document Token for selfie (if present)
  evaluation_token: "S-AJjTYAzGniwegALfnUcL", // the Evaluation token for the final Decision
  entity_token: "P-nCLYNtmujqr9ZPwQ0C9S", // the Entity Token for the user
  outcome: "Approved", // the final decision. By default, it will be "Approved", "Manual Review", or "Denied"
  status: "completed" // "closed" if the user did not finish the process and "completed" if they did
}

Did this page help you?