alloy-sdk-example v1.7.0

🔐 Alloy SDK

Alloy helps top banks and fintechs make better decisions using a single API and dashboard to manage KYC/AML, fraud, and more.

📦 Installation

yarn add @alloyidentity/web-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
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 application
    primary?: string;
    secondary?: string;
}
forceMobile: boolean // Will force the user to follow the mobile flow (either QR or SMS).

☎️ Callback Data

When the flow finishes your callback() function will fire in your app with the following parameters. You can use these to tell the user whether the applicant was approved/denied/needs review and to GET information and documents from Alloy's APIs.

{
  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
  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"
}

📝 Example

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

const alloyInitParams = {
  key: '028d85e0-aa24-4ca1-99f2-90e3ee3f4e6b',
  // entityToken: 'P-nCLYNtmujqr9ZPwQ0C9S',
  // externalEntityId: 'P-nCLYNtmujqr9ZPwQ0C9S',
  documents: ['license', 'passport'],
  selfie: true,
  evaluationData: {
    nameFirst: 'John',
    nameLast: 'Beta',
    addressLine1: 'Address Line 1. C - left door',
    addressLine2: 'Secondary address. 2ºB',
    addressCity: 'City address',
    addressState: 'TX',
    addressPostalCode: '+419550',
    addressCountryCode: 'VI',
    birthDate: '2020-03-03',
  },
  // color: { primary: '#CD7D2D', secondary: '#862633' }
  // forceMobile: true
};
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;