Embedded Finicity Connect – Web Based

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:

<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.

After the Finicity Connect flow is complete, you will receive the report id, consumer id, and customer id in the URL, and also via webhook to the listener specified when generating the Finicity Connect URL.  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:

//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.