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.
<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.
// 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).
Window.finicityConnect.destroyiframe();