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

Front-end code snippet

<html>
<head>
<title>Flare Partner - Direct Super App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>


<body>
<div class="container p-3 mb-5">

<ul class="nav nav-pills mb-3">
<li class="nav-item" onclick="handleTabChange('myOwnFund')">
<a id="myOwnFundLink" class="nav-link active bg-secondary" aria-current="page" href="#">My own fund</a>
</li>
<li class="nav-item" onclick="handleTabChange('defaultFund')">
<a id="defaultFundLink" class="nav-link" href="#">Default fund</a>
</li>
<li class="nav-item" onclick="handleTabChange('selfManagedFund')">
<a id="selfManagedFundLink" class="nav-link" href="#">Self Managed Fund</a>
</li>
</ul>

<div class="card p-3 myOwnFund" id="myOwnFund">

<div class="mb-3">
<strong>My own fund</strong>
</div>

<form>
<div class="form-group" id="fundSearchContainer">
<label for="fundUsi">Search your super fund</label>
<input autocomplete="off" type="text" class="form-control" id="fundUsi" aria-describedby="fundUsiHelp" placeholder="Type to search for your super fund">

<ul class="list-group" id="fundOptions">
</ul>
</div>

<div class="form-group" id="usiOnlyInput">
<label for="fundUsiOnly">Enter your fund USI</label>
<input autocomplete="off" type="text" class="form-control" id="fundUsiOnly" aria-describedby="fundUsiHelp" placeholder="Enter your fund USI">

</div>

<div id="selectedFundDetails"></div>

<div class="form-group mt-3">
<label for="memberNumber">Member number (required)</label>
<input autocomplete="off" type="text" class="form-control" id="memberNumber" placeholder="Enter your member number">
</div>

<div class="form-group mt-5 card p-3 bg-light">
<strong>Superannuation Standard Choice Form</strong>
<p>The superannuation <a target="_blank" href="https://www.ato.gov.au/uploadedFiles/Content/SPR/downloads/SUPER17983Superannuation_standard_choice_form.pdf?_extnav=true">standard choice form</a> informs your employer of your choice of fund.</p>

<label for="signature">Type your full name below (required)</label>
<input type="text" class="form-control" id="signature" placeholder="Type your full name here">
<small class="form-text text-muted">Your authorisation is required for signing this form. Applying your full name in the text field above is the same as applying your written signature and is legally binding.</small>
</div>

<div id="myOwnFund-success"></div>
<div id="myOwnFund-danger"></div>
<div id="myOwnFund-secondary"></div>

<a onclick="submitSuper()" id="submitSuper" class="btn btn-primary">Submit</a>
</form>
</div>

<div class="card p-3 defaultFund" id="defaultFund">

<div class="mb-3">
<strong>Default fund</strong>
</div>

<p>Almost there... all you have to do now is review the fund below, complete and sign the super choice form and submit. Your application to join the fund is subject to Trustee approval.</p>

<div class="mb-1">
<strong>Default fund name</strong>
</div>

<p>Company default fund</p>


<div class="form-group mt-5 card p-3 bg-light">
<strong>Superannuation Standard Choice Form</strong>
<p>The superannuation <a target="_blank" href="https://www.ato.gov.au/uploadedFiles/Content/SPR/downloads/SUPER17983Superannuation_standard_choice_form.pdf?_extnav=true">standard choice form</a> informs your employer of your choice of fund.</p>

<label for="signatureDefaultFund">Type your full name below (required)</label>
<input type="text" class="form-control" id="signatureDefaultFund" placeholder="Type your full name here">
<small class="form-text text-muted">Your authorisation is required for signing this form. Applying your full name in the text field above is the same as applying your written signature and is legally binding.</small>
</div>

<div id="defaultFund-success"></div>
<div id="defaultFund-danger"></div>
<div id="defaultFund-secondary"></div>

<a onclick="submitSuper('defaultFund')" id="submitSuperDefaultFund" class="btn btn-primary">Submit</a>

</div>

<div class="card p-3 selfManagedFund" id="selfManagedFund">

<div class="mb-1">
<strong>Self managed fund (SMSF)</strong>
</div>

<form>
<div class="form-group mt-3">
<label for="smsfFundName">Fund name *</label>
<input autocomplete="off" type="text" class="form-control" id="smsfFundName" placeholder="Enter your SMSF fund name">
</div>

<div class="form-group mt-3">
<label for="smsfAbn">Fund ABN * (11 digits only)</label>
<input autocomplete="off" type="number" class="form-control" id="smsfAbn" placeholder="Enter your SMSF ABN">
</div>

<div class="form-group mt-3">
<label for="smsfEsa">Electronic service address alias (ESA) *</label>
<input autocomplete="off" type="text" class="form-control mb-1" id="smsfEsa" placeholder="Enter your SMSF ESA">
<a class="small" target="_blank" href="https://www.ato.gov.au/super/self-managed-super-funds/setting-up/get-an-electronic-service-address/">Where can I find my fund ESA?</a>
</div>

<div class="form-group mt-3">
<label for="smsfAddressLine1">Address line 1 *</label>
<input autocomplete="off" type="text" class="form-control" id="smsfAddressLine1" placeholder="Address line 1">
</div>

<div class="form-group mt-3">
<label for="smsfAddressLine2">Address line 2</label>
<input autocomplete="off" type="text" class="form-control" id="smsfAddressLine2" placeholder="Address line 2">
</div>

<div class="form-group mt-3">
<label for="smsfCity">City/suburb *</label>
<input autocomplete="off" type="text" class="form-control" id="smsfCity" placeholder="Enter your city/suburb">
</div>


<div class="form-group mt-3">
<div>
<label class="mb-0" for="smsfState">State *</label>
</div>

<select id="smsfState" class="form-select p-2 mt-1 w-100" aria-label="State picker">
<option selected>Select a state</option>
<option value="ACT">ACT</option>
<option value="NT">NT</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</div>



<div class="form-group mt-3">
<label for="smsfPostcode">Post code *</label>
<input autocomplete="off" type="number" class="form-control" id="smsfPostcode" placeholder="Enter your postcode">
</div>

<div class="form-group mt-3">
<label for="smsfBankBsb">Bank BSB * (only numbers e.g. 111222)</label>
<input autocomplete="off" type="number" class="form-control" id="smsfBankBsb" placeholder="Enter your bank BSB">
<div class="mt-2" id="bankNameText"></div>
</div>

<div class="form-group mt-3">
<label for="smsfBankAccountName">Bank account name *</label>
<input autocomplete="off" type="text" class="form-control" id="smsfBankAccountName" placeholder="Enter your bank account name">
</div>

<div class="form-group mt-3">
<label for="smsfBankAccountNumber">Bank account number *</label>
<input autocomplete="off" type="number" class="form-control" id="smsfBankAccountNumber" placeholder="Enter your bank account number">
</div>
</form>


<div class="form-group mt-5 card p-3 bg-light">
<strong>Superannuation Standard Choice Form</strong>
<p>The superannuation <a target="_blank" href="https://www.ato.gov.au/uploadedFiles/Content/SPR/downloads/SUPER17983Superannuation_standard_choice_form.pdf?_extnav=true">standard choice form</a> informs your employer of your choice of fund.</p>

<label for="signatureSelfManagedFund">Type your full name below (required)</label>
<input type="text" class="form-control" id="signatureSelfManagedFund" placeholder="Type your full name here">
<small class="form-text text-muted">Your authorisation is required for signing this form. Applying your full name in the text field above is the same as applying your written signature and is legally binding.</small>
</div>

<div id="selfManagedFund-success"></div>
<div id="selfManagedFund-danger"></div>
<div id="selfManagedFund-secondary"></div>

<a onclick="submitSuper('selfManagedFund')" id="submitSuperSelfManagedFund" class="btn btn-primary">Submit</a>

</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6"></script>
</body>

<script>

const list = document.querySelector("#fundOptions");
let selectedFund = {}
let selectedFundType = 'myOwnFund';
handleTabChange()
document.getElementById('usiOnlyInput').style.display = 'none'
document.getElementById("fundUsi").addEventListener('input', handleSearchChange);
document.getElementById("memberNumber").addEventListener('input', clearAlerts);
document.getElementById("signature").addEventListener('input', clearAlerts);
document.getElementById("signatureDefaultFund").addEventListener('input', clearAlerts);
document.getElementById("signatureSelfManagedFund").addEventListener('input', clearAlerts);
document.getElementById("smsfBankBsb").addEventListener('input', bsbLookup);
document.getElementById("smsfAbn").addEventListener('input', handleAbnChange);
document.getElementById("smsfBankAccountNumber").addEventListener('input', handleBankAccountNumber);

getAllFunds()
.then(async response => {
if (response === [] || !response) showFallbackUsiInput()
this.allFunds = response;
})
.catch(() => {
showFallbackUsiInput()
})


function handleTabChange(tab = 'myOwnFund') {

clearAll()

selectedFundType = tab

if (tab === 'myOwnFund') {
document.getElementById('myOwnFund').style.display = 'block'
document.getElementById('defaultFund').style.display = 'none'
document.getElementById('selfManagedFund').style.display = 'none'

document.getElementById("myOwnFundLink").className = "nav-link active bg-secondary";
document.getElementById("defaultFundLink").className = "nav-link";
document.getElementById("selfManagedFundLink").className = "nav-link";
}

if (tab === 'defaultFund') {
document.getElementById('myOwnFund').style.display = 'none'
document.getElementById('defaultFund').style.display = 'block'
document.getElementById('selfManagedFund').style.display = 'none'

document.getElementById("myOwnFundLink").className = "nav-link";
document.getElementById("defaultFundLink").className = "nav-link active bg-secondary";
document.getElementById("selfManagedFundLink").className = "nav-link";
}

if (tab === 'selfManagedFund') {
document.getElementById('myOwnFund').style.display = 'none'
document.getElementById('defaultFund').style.display = 'none'
document.getElementById('selfManagedFund').style.display = 'block'

document.getElementById("myOwnFundLink").className = "nav-link";
document.getElementById("defaultFundLink").className = "nav-link";
document.getElementById("selfManagedFundLink").className = "nav-link active bg-secondary";
}




}


function handleAbnChange() {
const abn = document.getElementById('smsfAbn').value;
if (abn.toString().length > 11) document.getElementById('smsfAbn').value = parseInt(abn.toString().slice(0,11))
}

function handleBankAccountNumber() {
const bankAccountNumber = document.getElementById('smsfBankAccountNumber').value;
if (bankAccountNumber.toString().length > 9) document.getElementById('smsfBankAccountNumber').value = parseInt(bankAccountNumber.toString().slice(0,9))
}


function bsbLookup() {

const bsb = document.getElementById('smsfBankBsb').value
const bsbTrimmed = bsb.replace('-', '').replace('.', '').replace('=','').replace('+','')
if (bsbTrimmed.length > 6) document.getElementById('smsfBankBsb').value = bsbTrimmed.slice(0,6)

const bsbToBank = [{bsb: "9", bank:"Reserve Bank of Australia"}, {bsb: "10", bank: "BankSA"}, {bsb: "11", bank: "St George Bank" }, {bsb: "12", bank: "Bank of Queensland" }, {bsb: "14", bank: "Rabobank" }, {bsb: "15", bank: "Town & Country Bank" }, {bsb: "18", bank: "Macquarie Bank" }, {bsb: "19", bank: "Bank of Melbourne" }, {bsb: "21", bank: "JPMorgan Chase Bank" }, {bsb: "22", bank: "BNP Paribas" }, {bsb: "23", bank: "Bank of America" }, {bsb: "24", bank: "Citibank Australia" }, {bsb: "25", bank: "BNP Paribas" }, {bsb: "26", bank: "BT Financial Group" }, {bsb: "28", bank: "National Mutual Royal Bank" }, {bsb: "29", bank: "Bank of Tokyo" }, {bsb: "30", bank: "Bankwest" }, {bsb: "31", bank: "Bank Australia" }, {bsb: "33", bank: "St George Bank" }, {bsb: "34", bank: "HSBC Bank Australia" }, {bsb: "35", bank: "Bank of China" }, {bsb: "40", bank: "Commonwealth Bank" }, {bsb: "41", bank: "Deutsche Bank" }, {bsb: "42", bank: "Colonial Trust Bank" }, {bsb: "45", bank: "OCBC Bank" }, {bsb: "46", bank: "Advance Bank" }, {bsb: "47", bank: "Challenge Bank" }, {bsb: "48", bank: "Suncorp Bank" }, {bsb: "52", bank: "Colonial Trust Bank" }, {bsb: "55", bank: "Bank of Melbourne" }, {bsb: "57", bank: "Australian Settlements" }, {bsb: "60", bank: "State Bank of Victoria" }, {bsb: "70", bank: "Indue" }, {bsb: "73", bank: "Westpac" }, {bsb: "76", bank: "Commonwealth Bank" }, {bsb: "78", bank: "National Australia Bank" }, {bsb: "80", bank: "Cuscal" }, {bsb: "230", bank: "BankVic" }, {bsb: "325", bank: "Beyond Bank Australia" }, {bsb: "510", bank: "Citibank Australia" }, {bsb: "512", bank: "Community First Credit Union" }, {bsb: "514", bank: "RACQ Bank, previously QT Mutual Bank" }, {bsb: "517", bank: "Volt Bank" }, {bsb: "527", bank: "Trust Bank of Tasmania" }, {bsb: "533", bank: "Bananacoast Community Credit Union" }, {bsb: "610", bank: "Adelaide Bank" }, {bsb: "611", bank: "Sydney Mutual Bank, previously Sydney Credit Union" }, {bsb: "630", bank: "ABS Building Society" }, {bsb: "632", bank: "B&E now trading as Bank of us" }, {bsb: "633", bank: "Bendigo & Adelaide Bank, includes UP Bank (633-123) and Rural Bank (633-111)" }, {bsb: "634", bank: "Uniting Financial Services" }, {bsb: "636", bank: "Hay Limited" }, {bsb: "637", bank: "Greater Bank" }, {bsb: "638", bank: "Heritage Bank" }, {bsb: "639", bank: "Bank of Queensland" }, {bsb: "640", bank: "Hume Bank" }, {bsb: "641", bank: "IMB Bank" }, {bsb: "642", bank: "Australian Military Bank" }, {bsb: "645", bank: "Wide Bay Australia, now Auswide Bank" }, {bsb: "646", bank: "Maitland Mutual Building Society" }, {bsb: "647", bank: "IMB Bank" }, {bsb: "650", bank: "Newcastle Permanent Building Society" }, {bsb: "653", bank: "Pioneer Permanent Building Society" }, {bsb: "654", bank: "ECU Australia" }, {bsb: "655", bank: "The Rock Building Society, now part of MyState Bank" }, {bsb: "656", bank: "Wide Bay Australia, now Auswide Bank" }, {bsb: "659", bank: "G&C Mutual Bank, previously SGE Credit Union" }, {bsb: "664", bank: "Suncorp Bank" }, {bsb: "670", bank: "86400 Bank commencing operations in Australia in 2018" }, {bsb: "676", bank: "Gateway Bank previously CBOA Credit Union" }, {bsb: "704", bank: "BankVic" }, {bsb: "721", bank: "Holiday Coast Credit Union" }, {bsb: "722", bank: "Southern Cross Credit Union" }, {bsb: "723", bank: "Heritage Isle Credit Union" }, {bsb: "728", bank: "Summerland Credit Union " }, {bsb: "775", bank: "Xinja" }, {bsb: "805", bank: "People's Choice Credit Union" }, {bsb: "812", bank: "Teachers Mutual Bank" }, {bsb: "813", bank: "The Capricornian" }, {bsb: "814", bank: "Great Southern Bank" }, {bsb: "815", bank: "Police Dept Employees Credit Union" }, {bsb: "817", bank: "Warwick Credit Union" }, {bsb: "818", bank: "Bank of Communications" }, {bsb: "819", bank: "Industrial & Commercial Bank of China" }, {bsb: "833", bank: "Defence Bank" }, {bsb: "865", bank: "Qudos Bank" }, {bsb: "882", bank: "Unity Bank" }, {bsb: "888", bank: "China Construction Bank Corporation" }, {bsb: "889", bank: "DBS_Bank Australia Branch" }, {bsb: "902", bank: "Australia Post" }, {bsb: "911", bank: "Sumitomo Mitsui Banking Corporation" }, {bsb: "913", bank: "State Street Bank & Trust Company" }, {bsb: "915", bank: "FNC Agency - Bank One, NA" }, {bsb: "917", bank: "Arab Bank Australia" }, {bsb: "918", bank: "Mizuho Corporate Bank" }, {bsb: "922", bank: "United Overseas Bank" }, {bsb: "923", bank: "ING Bank" }, {bsb: "931", bank: "Mega International Commercial Bank Co" }, {bsb: "932", bank: "New England Credit Union" }, {bsb: "936", bank: "ING Bank" }, {bsb: "939", bank: "AMP Bank" }, {bsb: "941", bank: "Delphi Bank" }, {bsb: "942", bank: "Bank of Sydney" }, {bsb: "943", bank: "Taiwan Business Bank" }, {bsb: "944", bank: "ME Bank" }, {bsb: "946", bank: "UBS" }, {bsb: "951", bank: "Investec now trading as BOQ Specialist" }, {bsb: "952", bank: "Royal Bank of Scotland" }, {bsb: "969", bank: "Tyro Payments" }, {bsb: "980", bank: "Bank of China" }, {bsb: "985", bank: "HSBC Bank Australia" }, {bsb: "03", bank: "Westpac" }, {bsb: "06", bank: "Commonwealth Bank" }, {bsb: "08", bank: "National Australia Bank" }, {bsb: "050", bank: "People's Choice Credit Union" }]

if (bsbTrimmed.length <= 3) {

document.getElementById('bankNameText').innerHTML = ''

const findBanks1 = bsbToBank.filter(item => (item.bsb.substring(0, 1) === bsbTrimmed.substring(0, 1)))
const findBanks2 = bsbToBank.filter(item => (item.bsb.substring(0, 2) === bsbTrimmed.substring(0, 2)))
const findBanks3 = bsbToBank.filter(item => (item.bsb.substring(0, 3) === bsbTrimmed.substring(0, 3)))

let bankDetails = {}
if (findBanks1.length === 1) bankDetails = findBanks1[0]
if (findBanks2.length === 1) bankDetails = findBanks2[0]
if (findBanks3.length === 1) bankDetails = findBanks3[0]

if (bankDetails && bankDetails.bsb && bankDetails.bank) {
const bankDetailsElement = document.getElementById('bankNameText')

bankDetailsElement.innerHTML = `
<div class="alert alert-success" role="alert">
${bankDetails.bank}
</div>`
}

if (bsbTrimmed === '') {
document.getElementById('bankNameText').style.display = 'none'
} else {
document.getElementById('bankNameText').style.display = 'block'
}

}

}

function showFallbackUsiInput() {
document.getElementById('fundSearchContainer').style.display = 'none'
document.getElementById('usiOnlyInput').style.display = 'block'
}

// this will get all current valid Super Funds from superfundlookup.gov.au
async function getAllFunds() {
try {
const { data } = await axios.get('https://superfundlookup.gov.au/Tools/UsiList')

const [headers, ...rows] = data.trim().split('\n')
const [ firstRow, ...allRows ] = rows

const allFundItems = []

allRows.map(row => {

const rowItem = row.split(' ').filter(item => !!item)
const usi = rowItem && rowItem[1] && rowItem[1].trim().split(' ').filter(item => !!item)[0] || ''
const productName = rowItem && rowItem[1] && rowItem[1].split(' ').filter(item => !!item)[1].trim()

if (usi && productName) {
const fundItem = { usi, productName }
allFundItems.push(fundItem)
}

})

return allFundItems

} catch(error) {
showAlert('danger', 'We had an issue getting the list of valid super funds. Please simply enter a valid USI')
return []
}


}

function generateTemplate(fund) {
let html = ''
if (!fund) return list.innerHTML = `<li class="list-group-item">We could not find any funds matching this search</span></li>`;

html = `<li value="${fund.productName}" id="${fund.usi}" onclick="handleSelectFund(this)" class="list-group-item">${fund.productName} <span class="small">(USI: ${fund.usi})</span></li>`;
list.innerHTML += html;
}

function handleSelectFund(element) {
const usi = element.getAttribute('id');
const productName = element.getAttribute('value');
list.innerHTML = '';
selectedFund = {usi, productName};
document.getElementById('fundUsi').value = '';

const selectedFundDetails = document.getElementById('selectedFundDetails')
selectedFundDetails.innerHTML = `
<div class="card p-3 bg-light">
<strong class="mb-3">Selected fund details</strong>
<p><strong class="mr-2">Fund name</strong>${selectedFund.productName}</p>
<p><strong class="mr-2">USI</strong>${selectedFund.usi}</p>
<div class="mt-3">
<a onclick="clearFundSelection()" class="btn btn-light">Clear selected fund</a>
</div>

</div>
`;

}

function clearFundSelection() {
selectedFund = {}
document.getElementById('selectedFundDetails').innerHTML = ''
}

async function handleSearchChange(event) {
list.innerHTML = ''
clearFundSelection()
clearAlerts()

const results = await searchForFund(event.target.value)
if (event.target.value === '') return;

if (results.length > 0) {
results.map(result => {
return generateTemplate(result.item)
})
} else {
return generateTemplate(null)
}

}

async function searchForFund(search) {
const options = {
includeScore: true,
threshold: 0.3,
keys: ['usi', 'productName']
}

const fuse = new Fuse(allFunds, options)
return fuse.search(search).slice(0,5)

}

function showAlert(alertType, message) {
const alertElement = document.getElementById(`${selectedFundType}-${alertType}`)

alertElement.innerHTML = `
<div class="alert alert-${alertType}" role="alert">
${message}
</div>`
}

function clearInputs() {
selectedFund = {}

document.getElementById('signature').value = ''
document.getElementById('memberNumber').value = ''
document.getElementById('smsfPostcode').value = ''
document.getElementById('smsfCity').value = ''
document.getElementById('smsfState').value = ''
document.getElementById('smsfAddressLine1').value = ''
document.getElementById('smsfAddressLine2').value = ''
document.getElementById('smsfFundName').value = ''
document.getElementById('smsfAbn').value = ''
document.getElementById('smsfEsa').value = ''
document.getElementById('smsfBankAccountName').value = ''
document.getElementById('smsfBankAccountNumber').value = ''
document.getElementById('smsfBankBsb').value = ''
document.getElementById('signatureSelfManagedFund').value = ''
document.getElementById('signatureDefaultFund').value = ''
}