Embed Connect – Web

Overview

If you choose to embed Finicity Connect directly into your application via iframe, you will need the Finicity Connect SDK. Finicity hosts this SDK of Javascript code that is needed to manage the iframe. Webhooks can be utilized with this implementation. If you wish to use webhooks see the Webhook Document.

You will need to add the following library script tag in your website or webapp to access the library:

Library Script Tag
 <script src="https://connect.finicity.com/assets/sdk/finicity-connect.min.js"></script> 

Once the library is loaded in your app and you have the customer and consumer information, you can open the Finicity Connect iframe using the Finicity Connect URL received via the Finicity Connect API call. Consumer information is only required when using lending solutions, and a consumer shouldn’t be created if the partner is not consuming these reports.

After the Finicity Connect flow is complete, you will receive the report id, consumer id, and customer id in the URL for lending solutions, and also via webhook to the listener specified when generating the Finicity Connect URL.  Otherwise, only customer id will be returned. You can then use that information for subsequent API calls you send to Finicity.

Example Implementation

Below is an example of how to implement the Finicity Connect iframe:

Finicity Connect iFrame Example
 // Frontend Javascript running on web app
fetch({
method: 'POST',
body: JSON.stringify(customerData)
}).then(function(response) {
const customerId = response.customerId;
const consumerId = response.consumerId;
const finicityConnectUrl = response.finicityConnectUrl;

window.finicityConnect.connectIFrame(finicityConnectUrl, {
selector: '#connect-container',
overlay: 'rgba(255,255,255, 0)',
success: function(data) {
console.log('Yay! We got data', data);
},
cancel: function() {
console.log('The user cancelled the iframe');
},
error: function(err) {
console.error('Some runtime error was generated during Finicity Connect', err);
},
loaded: function() {
console.log('This gets called only once after the iframe has finished loading');
},
route: function(event) {
console.log('This is called as the user progresses through Connect');
}
});
});
  • Selector and overlay are optional properties that provide the partner with some additional customization ability.

  • The Selector property allows the partner to select an HTML element to bind the iFrame to.

  • The iFrame will be contained within this element rather than expanding to fill the entire page.

  • The overlay property allows the partner to select the color of the background overlay which fills the space if the display is larger than the widget.