Getting Started with Web Components

Useful Documents

User Flow

This is the typical user flow using Array web components:

  1. See if the user is already enrolled in Array:
  1. Do you have a clientKey for this user?
  1. No - User must be enrolled and authenticated.
  1. Display and obtain user consent .
  2. Display the Enrollment web component [ appKey ]
  1. Can be pre-populated (optional).
  2. User fills and submits the enrollment form.
  3. The Enrollment web component returns a permanent clientKey .
  1. Store the clientKey - This is used the next time to verify that the user is already enrolled.
  2. Display the Authentication web component [ appKey , clientKey ]
  1. User answers questions based on credit history.
  2. The Authentication web component returns a short-lived userToken .
  1. Yes - User is already enrolled and authenticated. You may proceed to displaying the desired web component(s).
  1. Display the desired web component(s) [ appKey , userToken ]
  1. If the userToken doesn’t exist for this session or has expired, a new one can be obtained via an API call
  1. CreateUserToken [ appKey , clientKey , TimeToLive ]
  1. TimeToLive should NOT be greater than 15 minutes.
  1. Listen for component and webhook events and respond accordingly.

Integration Workflow

This is the workflow for setting up Array web components (see also the Array Web Component Flow Diagram ):

  1. Enrollment - A user must first be enrolled in Array before they can access any other web component.
  1. This is done only the first time  a user accesses Array web components.
  2. The user must be prompted for consent .
  3. The enrollment web component can be pre-populated with existing user info, if you have it.
  4. https://docs.array.com/docs/component-attributes#array-account-enroll  
  5. Input
  1. appKey (required)
  2. First Name (optional)
  3. Last Name (optional)
  4. SSN (optional)
  5. Date of Birth (optional)
  6. Address (optional)
  1. Output
  1. clientKey
  1. Upon successful enrollment, a permanent clientKey  associated with the user is returned and must be stored. It is the existence of this clientKey which permits your system to determine whether a user needs to enroll in Array or not.
  2. Use the loginHref attribute to set the destination page the user should be directed to once they successfully enroll.
  1. Authentication - A user must also be authenticated before they can access any other web component
  1. This is done only the first time  a user accesses Array web components.
  2. The user will be authenticated by answering questions based upon their credit history.
  3. https://docs.array.com/docs/component-attributes#array-authentication-kba  
  4. Input
  1. appKey (required)
  2. clientKey (required)
  1. Output
  1. userToken
  1. Upon successful authentication, a short-lived userToken  associated with the user is returned and is used to display other components. If this token expires during a user’s session, a new userToken can be obtained via an API call (CreateUserToken).
  2. Use the loginHref attribute to set the destination page the user should be directed to once they successfully enroll.
  1. Display desired web component(s)
  1. Any of the other web components can now be presented to the user.
  1. https://docs.array.com/docs/component-list
  2. Input
  1. appKey (required)
  2. userToken (required)
  1. If the userToken doesn’t exist for this session or has expired, a new one can be obtained via an API call ( CreateUserToken ).
  1. https://docs.array.com/reference#create-user-token  
  2. Input
  1. appKey (required)
  2. clientKey (required)
  3. TimeToLive (required - should NOT be greater than 15 minutes)
  1. S et up a link from the web component to your credit dashboard and pass the userToken to your dashboard on click.
  1. Listen for component and webhook events and respond accordingly
  1. https://docs.array.com/docs/component-events  
  2. https://docs.array.com/docs/webhook-events  
  3. Array sends component and webhook events to a listener that you have set up.
  4. Credit alerts are sent out via webhook events.
  1. https://docs.array.com/docs/efx-alerts
  2. The "webhook" examples show how these alerts would appear from our events.
  3. The titles of these alerts are customer-friendly explanations that you can include in the alert notifications (text message, email, etc) you send to the user.