Connect Web 1.0 Embed iFrame

We recommend all Finicity clients Migrate to Connect Web SDK 2.0. Connect Web 1.0 will retire effective June 1, 2021.

Step 1—Generate a Connect URL Link

Step 2—Add the Library Script Tag

The Connect Web SDK is a Finicity JavaScript tag that access’ the SDK library. Add this tag anywhere you want to your web application.

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

Step 3—Open the Finicity Connect iFrame

After the library is loaded in your application, open the Finicity Connect iFrame using the URL you received when you generated a connect URL link.

Connect iFrame - Sample Code

This is an example of how to embed Finicity Connect 1.0 into an iFrame.

Sample
 // 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');
}
});

Additional Properties Definitions

  • The selector and overlay properties (optional) allow additional customization.

  • The selector property allows you to select an HTML element to bind the iFrame.

  • The iFrame is contained within the element and doesn’t expand, filling the entire page.

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

Manually Remove a Connect 1.0 iFrame

The SDK provides a destroyIFrame method which removes the Connect iFrame from the Document Object Model (DOM).

Sample
 Window.finicityConnect.destroyiframe();