Adding Widget to Application
Steps to Add the EDGE Connect V2 Widget to your application
o launch EDGE Connect from your web application, include ninjafetch.js in the HTML and call NinjaFetchWidget.mount() from JavaScript.
1. Import ninjafetch.js
Add this line to your HTML code.
<script type='text/javascript' src="https://connectv2.edgescore.com/edge_connect_v1_adapter.js"></script>2. Add a container
You can apply custom styles to the container element to change the position of the widget.
<div id="widgetContainer"/>
3. Add JavaScript code
<script>
function launch() {
//Build consumer data
var consumerData = {
access_token: 'eyJhbGciOiJIUzI1NiJ9.eyJjbGllbnRf...',
container_id: 'widgetContainer',
consumer_data: {
consumer_id: '123456', //the same that was used to generate the access token
context_id: 'abc12345', //a unique identifier of the application, such as a loan id
context_data: 'application12345',
reference_date: '2023-03-14', //usually the current date
first_name: 'John',
middle_name: 'Edge',
last_name: 'Smith',
nickname: 'John',
birth_date: '1995-01-01',
ssn: '322-32-5345',
full_address: '222 South Riverside Plaza Suite 200, Chicago, IL 60606',
street_address: '222 South Riverside Plaza',
street_address2: 'Suite 200',
city: 'Chicago',
state_code: 'IL',
zip_code: '60606',
home_phone: '855-646-5201',
mobile_phone: '855-646-5201',
email: '[email protected]',
secondary_email: '[email protected]',
employer_name: 'Edge LLC',
secondary_employer_name: 'Edge LLC2',
bank_name: 'Bank of America',
routing_number: '000111449',
account_number: '2302389238923',
debit_card_number: '1234567890123456',
additional_data: {
vantage_score: 500,
housing: 'rent'
},
partner_name: '<only applies to partners>'
},
data_pull_timeout: 300,
//Optional timeout setting for data pulls. Default is 300 seconds (5 minutes)
intent_url: 'myApp://',
//required only for native mobile apps to handle OAuth callbacks
onSuccess: (data) => {
console.log(data)
//NinjaFetchWidget.unmount()
},
onError: (data) => {
//Handle Technical errors.
console.log(data)
if (data.hasOwnProperty("isLastVendor") && data.isLastVendor) {
NinjaFetchWidget.unmount()
}
},
onClose: (data) => {
//Reserved for future features
console.log(data)
}
}
//Initialize widget
try {
NinjaFetchWidget.mount(consumerData)
}
catch (err) {
//Handle mounting errors here
console.log(err)
}
}
</script>4. Create Product Request
Clients may create a new Consumer Connection with a POST request to:
https://api.edgescore.com/api/v2/ibv/requests
Header
| Name | Description | Example | Required |
|---|---|---|---|
| x-api-key | A unique API Key for the environment | 19YYgyZecTaSs2N0gjlq32Vh6D | Yes |
| Content-Type | The format the data should be displayed in | application/json | Yes |
Body
| Name | Description | Example | Type | Expected Format | Required |
|---|---|---|---|---|---|
| consumer_id | A unique identifier provided by the client for each consumer. The same ID that was used to generate the access token | 123456 | String | Yes | |
| context_id | Unique identifier provided by the client for the consumer’s application. Sometimes referred to as Loan ID or Application ID. | loan12345 | String | Yes | |
| context_data | Optional text that further describes the context_id | application12345 | String | No | |
| first_name | First name of the consumer | John | String | Yes | |
| last_name | Last name of the consumer | Smith | String | Yes | |
| ssn | Social security number | 322-32-5345 | String | DDD-DD-DDDD | Yes |
| routing_number | Routing number of the account the consumer wants to use for IBV. Used to pre-select bank for verification | No routing number or 000111449 or 074000101. | String | /^\d9$/ | No |
| account_number | Account number of the account specified by the consumer to use for IBV analysis | 523423512 | String | /^[0-9]*$/ | No |
| birth_date | Date of birth | 1776-07-04 | String (Date) | YYYY-MM-DD | No |
| full_address | Full consumer address. Use when the address is not split into multiple fields | 222 South Riverside Plaza Suite 2200, Chicago, IL 60010 | String | No | |
| street_address | Street number and name | 222 South Riverside Plaza | String | No | |
| street_address2 | Address unit designator and number | Suite 2200 | String | No | |
| city | City | Chicago | String | No | |
| state_code | U.S. State Code | IL | String | No | |
| zip_code | U.S. Postal Code (5-digit OR 9-digit) | 60606 | String | /^[0-9]5(?:-[0-9]4)?$/ | No |
| home_phone | Landline number | 855-646-5201 | String | DDD-DDD-DDDD | No |
| Email address of the consumer | [email protected] | String | /\A[^@\s]+@[^@\s]+\z/ | No | |
| secondary_email | Secondary email address of the consumer | [email protected] | String | /\A[^@\s]+@[^@\s]+\z/ | No |
| employer_name | Name of consumer's employer | EDGE LLC | String | No | |
| secondary_employer_name | Name of consumer's secondary employer | EDGE LLC | String | No | |
| partner_name | Name of the partner | EDGE | String | Yes for partners only | |
| debit_card_number | Number of the debit card | 5555 5555 5555 4444 | String | No | |
| additional_data | Additional data for data analytics based on agreements with clients | {“vantage_score”:500, “housing”:”rent”, “existing_customer”:true … | Json Object | No | |
| reference_date | As of date for attribute and score calculation, used to evaluate recent account activities. Default is the current date. | 2022-04-14 | String | YYYY-MM-DD | Yes |
Example
{
"consumer_id": "CN32892349",
"context_id": 'abc12345',
"context_data": '123',
"ssn": "322-32-5345",
"first_name": "John",
"middle_name": "Edge",
"last_name": "Smith",
"birth_date": "1776-07-04",
"full_address": "full address",
"street_address": "222 South Riverside Plaza",
"street_address2": "Suite 200",
"city": "Chicago",
"state_code": "IL",
"zip_code": "60606",
"home_phone": "855-646-5201",
"mobile_phone": "855-646-5201",
"email": "[email protected]",
"secondary_email": "[email protected]",
"employer_name": "EDGE",
"secondary_employer_name": "EDGE2",
"bank_name": "Bank of America",
"routing_number": "0740000101",
"account_number": "2302389238923",
"debit_card_number": "1234567890123456",
"additional_data": {
"vantage_score": 500,
"housing": "rent",
"existing_customer": true
},
"reference_date": "2023-08-01",
"partner_name": "<only applies to partners>"
}
Response
{
"ibv_report": "https://api.edgescore.com/api/v2/ibv/requests/IBV7952B6CE58AA7C698588",
"product_request_id": "IBV7952B6CE58AA7C698588",
"ibv_report_status": "initiated",
"ibv_connection_link": "https://c2.edgescore.com/9a3db0b97e",
"connection_request_id": "dd94c6f7-1f67-4833-839a-c8b985f0f0ae"
}
2. Embed IBV Connection link into iframe
Embed the ibv_connection_link received in the response of the previous step in the webpage where the consumer connects their bank accounts in an iframe.
Example
<iframe
src="https://c2.edgescore.com/9a3db0b97e"
width="100%"
height="600"
frameborder="0"
style="border: 1px solid #ccc;">
</iframe>You can adjust the styling of the iframe to match your application’s design system. Clients have full control to apply inline styles or use CSS classes for positioning, borders, sizing, and more to ensure a seamless visual fit within their user experience.
3. Handle iframe events to monitor request progress
Once the iframe is embedded, your application can listen for messages sent from the iframe to respond dynamically as the user progresses through the IBV connection flow. These messages are sent as window events and include an event field that indicates the current status.
Here are the event types currently supported:
login_successibv_data_acquire_successreport_generation_successlogin_failed_incorrect_credentialslogin_failed_incorrect_additional_infovendor_connection_erroribv_data_acquire_failedfailure_finalreport_generation_failed
Updated 17 days ago
