Iframe Support
This page will help you embed the journey to your site.
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. |
Updated about 1 month ago
What’s Next