Iframe Support

How to use the consent journey as an Iframe

In order to create a consent journey connection just add iframe=true in the url's query params.

Embedding the journey

When you create a new connection you get the link to the journey, copy the link and paste it in the SRC of the Iframe.
When the iframe show up the journey will open.

<!DOCTYPE html>
<html>
<body>

<h2>Open Finance Iframe</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
 <script>
  /* journey window and iframe container */
  let iframeContainer = null

  /* style helper functions */
  const objectToCss = (obj) => Object.keys(obj).map((key) => `${key}: ${obj[key]}`).join(';') + ';'

  /* styles */
  const iframeStyle = objectToCss({
    'border-width': '0',
    border: '0',
  })

  const modalStyle = objectToCss({
    position: 'fixed',
    top: '0',
    left: '0',
    'z-index': '2147483647',
    width: '100%',
    height: '100%',
    border: '0',
      backgroundColor: 'transperent',
  })

  /* functions */
  // user controlled functions
  let abort = () => {
    console.log('aborted')
  }
  let approve = (data) => {
    console.log('approved', data)
  }
  let failed = (data) => {
    console.log('failed', data)
  }

  // global functions
  function closeAll() {
    iframeContainer.remove()
  }

  /* main functions  */
  const init = (options = {}) => {
    const {
      onApprove = approve,
      onAbort = abort,
      onFailed = failed,
    } = options

    approve = onApprove
    abort = onAbort
    failed = onFailed
  }

  const start = async (webUrl) => {
    /* window post messages listener */
    window.addEventListener('message', ({
      origin,
      data,
    }) => {
      if (!data || (data.source !== 'waiting' && data.source !== 'journey') || !data.type) {
        return
      }

      const {
        type,
      } = data

      switch (type) {
        case 'close':
          abort()
          closeAll()
          break
        case 'success':
          approve(data)
          closeAll()
          break
        case 'fail':
          failed(data)
          closeAll()
        default:
          break
      }
    })

    // modal
    iframeContainer = document.createElement('div')
    iframeContainer.style = modalStyle

    // create the waiting iframe
    const mainIframe = document.createElement('iframe')

    mainIframe.src = webUrl
    mainIframe.style = modalStyle + iframeStyle
    mainIframe.allowtransparency = true

    const timer = setInterval(function () {
      if (mainIframe.closed) {
        clearInterval(timer)
        closeAll()
      }
    }, 1000)

    iframeContainer.appendChild(mainIframe)
    document.body.appendChild(iframeContainer)
  }

  const openFinance = {
    init,
    start,
  }

  // To use openFinance in your JS code, you need to assign it to a global variable
  window.openFinance = openFinance

 </script>
</body>
</html>

After implementing the JS snippet you can now access 2 function on the windows

// the init function gets functions as parameters in order to handle the connection journey events
openFinance.init({ onApprove, onAbort, onFailed })
// the start function initializes the connection journey with the connect url given from create connection API
openFinance.start(connectUrl)

Event Types

The types of event that happened in the journey.

Type	Payload	Description
success	connectionId	When the user has successfully completed the journey and succeeded and the login to the bank.
fail	connectionId, error	When there is any problem during the journey, you will see the error detail in the payload.
close	connectionId, step	When the user has closed the journey.
redirectToBank	connectionId, paymentId, error	When the user is redirect to the provider

Payload

The post message will send a payload body with informative info

{
  userId: string // The user unique identifier
  connectionId: string // For connection journey
  connectionStatus: string // For connection journey, See list of connection statuses for more info
  paymentId: string // For payment journey
  paymentStatus: string // For payment journey, See list of payment statuses for more info
  step: string // The step which triggered the event, see below for enums
  error: string // Incase of an error 
  
}

Step

The close event send the step in the payload and shows the stage where the user closed the journey.

Step	Description
TERMS_AND_CONDITIONS	Disclaimer stage when the user needs to confirm our terms and conditions.
CHOOSING_PROVIDER	Choosing provider stage, the user chooses his provider to connect here.
CHOOSE_ACCOUNT_TO_PAY_FROM	Choosing account to pay from in the payment journey
PROVIDER_LOGIN	Login stage, the user login to his provider to in order to fetch his financial data from there.
SUCCESSFUL_LOGIN	When the login succeeds.
SUCCESSFUL_PAYMENT	When the payment succeeded
GENERAL_ERROR	When the login fails or an error as occurred.