Getting Started with Web Components
Useful Documents
- Embedding Web Components: https://docs.array.com/docs/embedding
- Web Component Attributes: https://docs.array.com/docs/component-attributes
- Web Component Flow Diagram: https://drive.google.com/file/d/1uagCL1ndKlOKMVOWYRs9LQixdw7dOlsz/view?usp=sharing
- API Reference: https://docs.array.com/reference
User Flow
This is the typical user flow using Array web components:
- See if the user is already enrolled in Array:
- Do you have a clientKey for this user?
- No - User must be enrolled and authenticated.
- Display and obtain user consent .
- Display the Enrollment web component [ appKey ]
- Can be pre-populated (optional).
- User fills and submits the enrollment form.
- The Enrollment web component returns a permanent clientKey .
- Store the clientKey - This is used the next time to verify that the user is already enrolled.
- Display the Authentication web component [ appKey , clientKey ]
- User answers questions based on credit history.
- The Authentication web component returns a short-lived userToken .
- Yes - User is already enrolled and authenticated. You may proceed to displaying the desired web component(s).
- Display the desired web component(s) [ appKey , userToken ]
- If the userToken doesn’t exist for this session or has expired, a new one can be obtained via an API call
- CreateUserToken [ appKey , clientKey , TimeToLive ]
- TimeToLive should NOT be greater than 15 minutes.
- 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 ):
- Enrollment - A user must first be enrolled in Array before they can access any other web component.
- This is done only the first time a user accesses Array web components.
- The user must be prompted for consent .
- The enrollment web component can be pre-populated with existing user info, if you have it.
- https://docs.array.com/docs/component-attributes#array-account-enroll
- Input
- appKey (required)
- First Name (optional)
- Last Name (optional)
- SSN (optional)
- Date of Birth (optional)
- Address (optional)
- Output
- clientKey
- 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.
- Use the loginHref attribute to set the destination page the user should be directed to once they successfully enroll.
- Authentication - A user must also be authenticated before they can access any other web component
- This is done only the first time a user accesses Array web components.
- The user will be authenticated by answering questions based upon their credit history.
- https://docs.array.com/docs/component-attributes#array-authentication-kba
- Input
- appKey (required)
- clientKey (required)
- Output
- userToken
- 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).
- Use the loginHref attribute to set the destination page the user should be directed to once they successfully enroll.
- Display desired web component(s)
- Any of the other web components can now be presented to the user.
- appKey (required)
- userToken (required)
- If the userToken doesn’t exist for this session or has expired, a new one can be obtained via an API call ( CreateUserToken ).
- appKey (required)
- clientKey (required)
- TimeToLive (required - should NOT be greater than 15 minutes)
- S et up a link from the web component to your credit dashboard and pass the userToken to your dashboard on click.
- Listen for component and webhook events and respond accordingly
- https://docs.array.com/docs/component-events
- https://docs.array.com/docs/webhook-events
- Array sends component and webhook events to a listener that you have set up.
- Credit alerts are sent out via webhook events.
- https://docs.array.com/docs/efx-alerts
- The "webhook" examples show how these alerts would appear from our events.
- 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.
Updated 3 months ago