Step Up Plugins

yarn add @alloyidentity/web-sdk

or 

npm install @alloyidentity/web-sdk

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
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
//Theme customizations
color?: { // Specify different values for the main colors of the SDK
    primary?: string;
    secondary?: string;
}

import React from 'react';
import alloy from '@alloyidentity/web-sdk';
import './App.css';

const alloyInitParams = {
  key: 'xyz',
  journeyApplicationToken: 'JA-xyz',
  journeyToken: 'J-XYZ',
  isNext: true,
  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;