Iframe Implementation

Overview

The Jerry platform by Fintech Financial integrates with Flinks to provide secure banking data collection and analysis for lending decisions. This documentation covers the implementation of our SaaS iframe solution that enables clients to seamlessly collect banking information from their users.

What is Flinks?

Flinks is a financial data aggregation service that allows secure connection to users' bank accounts to retrieve transaction history, account information, and other banking data. In the Jerry platform, we use Flinks to:

Collect comprehensive banking data for credit decisioning

Verify user identity through KYC (Know Your Customer) processes

Analyze transaction patterns and account attributes

Provide real-time banking information for loan approval workflows

SaaS Instance

Our production-ready SaaS iframe instance is available at:

https://saas-iframe.private.fin.ag/v2/

Prerequisites

Before implementing the Flinks iframe, you need:

Lead ID: Generated through our Create Lead endpoint

Tenant ID: Your unique tenant identifier provided by Fintech Financial

Webhook URL: Endpoint to receive Flinks data after user completion

Implementation Guide

Step 1: Create a Lead

First, create a lead using our API to generate a leadId:

Endpoint: POST /leads
Documentation: Create Lead API Reference

The response will include a leadId that you'll use in the iframe configuration.

Step 2: Configure the Iframe

Basic HTML Structure

JavaScript Implementation

Step 3: URL Parameters Reference

Parameter	Type	Required	Description
`redirectUrl`	string	Yes	URL to redirect after successful completion
`tag`	string	Yes	JSON object containing `tenantId` and `leadId`
`theme`	string	No	Interface theme (`light` or `dark`)
`desktopLayout`	boolean	No	Enable desktop-optimized layout
`features`	string	No	Comma-separated list of enabled features
`backgroundColor`	string	No	Hex color code (without #)
`institutionFilterEnable`	boolean	No	Enable institution filtering
`headerEnable`	boolean	No	Show/hide header
`language`	string	No	Interface language (`en` or `fr`)
`accountSelectorEnable`	boolean	No	Enable account selection
`showAllAccounts`	boolean	No	Display all user accounts

Step 4: Tag Object Structure

The tag parameter must be a JSON string containing:

{
    "tenantId": "your-tenant-id",
    "leadId": "12345"
}

Important: The leadId should be a string representation of the numeric ID returned from the Create Lead endpoint.

Best Practices

User Experience

Implement loading states while the iframe initializes

Provide clear instructions about the banking connection process

Handle iframe events to show appropriate success/error messages

Error Handling

Monitor for iframe loading failures

Implement timeout handling for long-running connections

Provide fallback options if Flinks is unavailable

Performance

Preload the iframe when possible

Implement proper cleanup when the component unmounts

Use appropriate iframe dimensions for your layout

Advanced Configuration

Custom Styling

The iframe supports limited customization through URL parameters:

backgroundColor: Set the background color

theme: Choose between light and dark themes

Multi-language Support

Set the language parameter to en or fr for English or French interfaces.

Feature Configuration

Use the features parameter to enable specific Flinks features:

TransactionHistory: Include transaction data

AccountNumberandAccountInfo: Include account details

Troubleshooting

Common Issues

Iframe not loading: Verify the URL parameters are properly encoded

Webhook not received: Check webhook URL accessibility and HTTPS configuration

Invalid tag data: Ensure tag is properly JSON stringified

Missing leadId: Verify the Create Lead API call was successful

Support Resources

Flinks Documentation: https://docs.flinks.com/reference/webhooks

Flinks KYC Reference: https://docs.flinks.com/reference/kyc

Create Lead API: https://docs.fintechfinancial.ca/create-lead-17485423e0

For technical support or implementation questions, contact Fintech Financial support team.

Example Implementation

Here's a complete Vue.js example based on our production implementation:

<template>
  <div class="flinks-container">
    <div v-if="loading" class="loading-spinner">
      Loading Flinks...
    </div>
    <div v-show="!loading" ref="flinksContainer"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const flinksContainer = ref(null)
const loading = ref(true)
let iframe = null

const props = defineProps({
  leadId: { type: [String, Number], required: true },
  tenantId: { type: String, required: true },
  redirectUrl: { type: String, required: true },
  language: { type: String, default: 'en' }
})

const handleFlinksMessage = (event) => {
  if (event.data.step === 'APP_MOUNTED') {
    loading.value = false
  }
}

const generateIframeUrl = () => {
  const tag = JSON.stringify({
    tenantId: props.tenantId,
    leadId: props.leadId.toString()
  })
  
  const params = new URLSearchParams({
    redirectUrl: encodeURIComponent(props.redirectUrl),
    tag: encodeURIComponent(tag),
    theme: 'light',
    desktopLayout: 'true',
    features: 'TransactionHistory,AccountNumberandAccountInfo',
    backgroundColor: 'ffffff',
    institutionFilterEnable: 'true',
    headerEnable: 'false',
    language: props.language,
    accountSelectorEnable: 'true',
    showAllAccounts: 'true'
  })
  
  return `https://saas-iframe.private.fin.ag/v2/?${params.toString()}`
}

const createIframe = () => {
  iframe = document.createElement('iframe')
  iframe.width = '100%'
  iframe.height = '570'
  iframe.src = generateIframeUrl()
  
  if (flinksContainer.value) {
    flinksContainer.value.appendChild(iframe)
  }
}

onMounted(() => {
  window.addEventListener('message', handleFlinksMessage)
  createIframe()
})

onBeforeUnmount(() => {
  window.removeEventListener('message', handleFlinksMessage)
  if (iframe) {
    iframe.remove()
  }
})
</script>

This documentation provides everything needed to implement the Flinks iframe integration with the Jerry platform's SaaS solution.

Flinks Instance

Iframe Implementation#

Overview#

What is Flinks?#

SaaS Instance#

Prerequisites#

Implementation Guide#

Step 1: Create a Lead#

Step 2: Configure the Iframe#

Basic HTML Structure#

JavaScript Implementation#

Step 3: URL Parameters Reference#

Step 4: Tag Object Structure#

Best Practices#

User Experience#

Error Handling#

Performance#

Advanced Configuration#

Custom Styling#

Multi-language Support#

Feature Configuration#

Troubleshooting#

Common Issues#

Support Resources#

Example Implementation#