Skip to content
Super Fallback Application (public doc)
Share
Explore

Super selection fallback

Why is a fallback solution important?
When loading the Flare Super selection iFrame, there can be times when the app may not load due to a number of factors including browser type, network speed, anti-virus software and other ways that our component may not work for your end users as desired.
In these instances, we want to ensure that you are still able to provide a usable super selection experience for all end users, allowing your customers to have peace of mind their employees are being onboarded successfully every time.
The solution is provide a fallback front-end and server-side code that you as the partner are able to implement directly into your application and have full control over how it is presented.
This fallback UI will allow the end user to select either of My Own Fund, Default Fund or SMSF. It does not give them the ability to select a promoted fund provided by Flare.

What does the fallback UI look like?
How do I implement the fallback UI?
It is recommended that the fallback UI be loaded directly from the partners application should the app take longer than a given time to load.
In order to know whether the app has loaded or not, the iFrame will emit an appReady event. If this event is not triggered within a suitable timeframe, then the partner application will hide the iFrame and can show the front-end UI snippet suggested below.

<script>
function onLoadIframe() {
const messageSender = 'flare';
const iframe = document.getElementById('flareSuperSelection');

window.addEventListener(
'message',
(event) => {
const { data } = event;
if (!data || data.sender !== messageSender) {
return;
}
switch (data.type) {
case 'appReady':
// listen for this appReady event,
// if it's not triggered within a given timeframe,
// then hide the iframe below and show the front-end UI snippet
break;

default:
break;
}
},
false
);
}
</script>

<iframe
id="flareSuper"
src="<flare-url>/super-selection/embed/v1.0/web?token=<token>&success-redirection-url=<redirect-url>"
height="600"
width="1200"
>
</iframe>

Fallback UI
image.png
image.png
image.png


Front-end code
Server-side code (Node.js example)
IMPORTANT: DO NOT use this server-side code below in the browser. The accountKey is a sensitive piece of data and must only be used server-side.
async function fallbackSuperUpdate(req, res) {

const accountKey = "ENTER_YOUR_ACCOUNT_KEY"
const domainUrl = 'https://sandbox-partner.flarehr.com';
const profileId = 'ENTER_THE_USERS_PROFILE_ID';

if (!req.body.fundType) return res.status(400).send('Please select a fund type')

let payload = {}

if (req.body.fundType === 'myOwnFund') {
if (!req.body.fundUsi) return res.status(400).send('Please enter your funds USI')
if (!req.body.memberNumber) return res.status(400).send('Please enter a member number')
if (!req.body.signature) return res.status(400).send('Please type in your full name for a signature')

payload = {
choice: {
ordinarySuperFundChoice: {
fundUsi: req.body.fundUsi,
memberNumber: req.body.memberNumber
}
}
}
}

if (req.body.fundType === 'defaultFund') {
if (!req.body.signature) return res.status(400).send('Please type in your full name for a signature')

payload = {
choice: 'defaultFundChoice'
}
}

if (req.body.fundType === 'selfManagedFund') {
if (!req.body.signature) return res.status(400).send('Please type in your full name for a signature')

payload = {
choice: {
smsfChoice: {
fundAbn: req.body.fundAbn,
fundName: req.body.fundName,
addressLine1: req.body.addressLine1,
addressLine2: req.body.addressLine2,
addressSuburb: req.body.addressSuburb,
addressState: req.body.addressState,
addressPostcode: req.body.addressPostcode,
bankAccountBsb: req.body.bankAccountBsb,
bankAccountNumber: req.body.bankAccountNumber,
bankAccountName: req.body.bankAccountName,
electronicServiceAddress: req.body.electronicServiceAddress
}
}
}
}


console.log('payload', payload)
const url = `${domainUrl}/super-selection/v1.0/${profileId}/super-choice`;

const config = {
headers: {
'X-API-KEY': accountKey
}
}

try {
const { data, status } = await axios.put(url, payload, config)
return res.status(200).send({ success: true, data, status })
} catch(error) {

// if an invalid USI is entered,the following is text is returned with a 500 status response:
// "Error while fetching Australian super funds list: SuperNotFound"
console.log('error message', error.response.data)
return res.status(400).send({ success: false, message: error.response.data })
}

}
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.