Implement Loan Journey
Add the loan journey to your website or app in seconds
Insert JS implementation script
In order to get started with our loan journey make sure you implement our Loan Journey SDK script in your website/app
/* journey window and iframe container */
let journeyWindow = null
let iframeContainer = null
const orgName = {{ORG_NAME}} // insert the organization name here
/* 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',
})
/* functions */
// user controlled functions
function abort() {
// insert abort function login here
console.log('aborted')
}
function approve(data) {
// insert approve function logic here
console.log('approved', data)
}
function failed(data) {
// insert failed function logic here
console.log('failed', data)
}
// global functions
function closeAll() {
iframeContainer.remove()
}
/* window post messages listener */
window.addEventListener('message', ({
origin,
data,
}) => {
if (!data || (data.source !== 'waiting' && data.source !== 'loan-journey') || !data.type) {
return
}
const {
type,
} = data
switch (type) {
case 'close':
closeAll()
break
case 'approve':
approve(data)
break
case 'abort':
abort(data)
closeAll()
break
case 'failed':
failed(data)
break
default:
break
}
})
/* main functions */
const init = (options = {}) => {
const {
onApprove = approve,
onAbort = abort,
onFailed = failed,
} = options
approve = onApprove
abort = onAbort
failed = onFailed
}
const start = async ({
requestedAmount,
phoneNumber,
businessName,
firstName,
lastName,
email,
title,
leadSource,
businessId,
}) => {
// modal
iframeContainer = document.createElement('div')
iframeContainer.style = modalStyle
// create the waiting iframe
const mainIframe = document.createElement('iframe')
const webUrl = `https://${orgName}.open-finance.ai/?requestedAmount=${requestedAmount}&phoneNumber=${phoneNumber}&businessName=${businessName}&firstName=${firstName}&lastName=${lastName}&email=${email}&title=${title}&leadSource=${leadSource}&businessId=${businessId}`
mainIframe.src = webUrl
mainIframe.style = modalStyle + iframeStyle
const timer = setInterval(function () {
if (mainIframe.closed) {
clearInterval(timer)
closeAll()
}
}, 1000)
iframeContainer.appendChild(mainIframe)
document.body.appendChild(iframeContainer)
}
// eslint-disable-next-line no-unused-vars
const openFinance = {
init,
start,
}
Please see our documentation for what initial fields are supported within the Loan Journey
Make sure to add abort, approve and failed handlers so you will be notified when one of them triggers
The script will expose 2 functions:
openFinance.init()
- This function will initialize all our components to the client. You need to make sure you trigger it before theopenFinance.start()
openFinance.start()
- This function will start the Loan Journey in an Iframe with optional initialised parameters.
After the openFinance.start()
activation the user will onboard to our Loan Journey. Depending on the user's flow, one of the following will be triggered:
Triggers | Description | Data |
---|---|---|
approve | This will be triggered when the user successfully finishes the flow | lrId(loan request id), phoneNumber(users phone number) |
abort | This will be triggered if the user aborts the Loan Journey before he ends the flow | - |
failed | This will be triggered if we encounter an error for some reason | error (the error description) |
To get more details on the Loan Request you can fetch our API.
Updated about 2 years ago