Skip to content

Bank feeds UI

  Less than to read

This guide will walk you through the development requirements for a web-based product integrating with bank feeds UI.

Step 1. Obtain an access token

Before integrating with the Banking Service user interface you must integrate with the Authentication Service.

A JWT can be generated using the Authentication Service /accesstoken API endpoint (with requires a signature generated using the standard authorisation method). This JWT can then be provided as a Bearer token for Banking Service requests through the Authorisation header: ‘Bearer ‘. The JWT needs to be passed into the launch URL.

Step 2. Create the common UI URL

Create a bank feeds UI lanuch URL. This will be used to launch the common UI in an iFrame inside a full dialogue modal window.


QA Environment Sample URL:{JWT}/en-uk/default&defaultCountry=GBR&bankAccountId=984b74e7-d7fd-4753-afbc-dcaadbb55b77&xFrameDomain=

Required parameters

  1. {Environment}
    DEV →
    QA →
    PRE-PROD →
    PROD →

  2. {route} = the value to launch bank feeds onboarding is banking-cloud_choose-a-bank
  3. {JWT} = the JWT from Service Fabric Authentication Service
  4. {lang} = the language used for display of content translations [for example, en-us, en-uk, fr-fr, fr-ca, es-es]
  5. {UXSettings} = UI experience settings. Preset options are :default, wpb-preview, web-iframe, web-popup, sage-desktop, intacct-banking. This field only changes the UI styling and does not effect any core funtionality.
  6. {bcApiRegion} = region for Banking API call, defaults to US. Avialable options are are [eu, us].
  7. {countryCode} = the default country code for bank listings, for example USA, GBR.
  8. {productname} = Product the import bank transactions is initiated from.
  9. {bankAccountId} = Bank’s account ID, for example, 59d4ca99-9da6-476f-ab11-8989e459239b
  10. {bankAccountName} = Bank’s name, for example, Bank of America
  11. {currencyCode} = possible value for currency code are: “USD”, “CAD”,”GBP”,”AUD”,”ZAR”,”MYR”,”EUR”,”BRL”.
  12. {accountRef} = Account reference detail (this is a combination of sort code (UK), routing number (USA), IBAN.)
  13. {xFrameDomain} = Your product domain URL (This needs to match the domain which is on the allowlist with your product identifier).
  14. {dateFormat} = Regional date format to use, for example, DD%2FMM%2FYYYY.
  15. {multipleAccounts} = Allow the setup of multiple accounts. Set to true or false, default is true.
  16. {allowCountrySelection} = Display country selection options. Set to y or n, default y.
  17. {UiRedirectUrlOnCompletion} = The URL in which you would like the user to be redirected once onboard has complete.

Step 3. Load the URL in a full screen dialogue modal

Create full screen dialogue modal and open it when the user selects transaction import button.

Full screen modal dialog code snippet

<!-- The Modal -->
    <div id="dvFileImportV1" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">×</span>
                <iframe id="iframeWPBUIFileImportV1" height="850px" style="width: 100%;" src="" allow="fullscreen"></iframe>

Prepare File Import v1 UI URL & load into an iframe

    const launchURL = 
    const modal = document.getElementById("dvFileImportV1"); = "block";
    document.getElementById('iframeWPBUIFileImportV1').src = launchURL;

Note: You can test loading the common UI URL in an iframe on our test page

Step 4. User follows the bank feeds UI

4.1 Find your bank

When loaded within an iFrame the common UI will handle a lot of the onboarding of the user. The 1st step is for the user find their bank in the search. Top banks for the default region provided are presented for the user with a search bar available to locate others.

If the option was enabled with the query parameters a country selection drop down will also be displayed.

Image displaying a list of banks and a search bar.

4.2 Accept any terms and conditions

Then do this

Image displaying the terms and conditions for users connecting a bank feed.

4.3 Enter your credentials

Then do this

Image showing a screen for user to enter their login credentials.

4.4 Select a single account

The user will be directed to the bank account selection screen. At this point the user will be presented with all of the accounts in the authorisation they have just created. They will select the account they want to connect.

2 bank accounts displayed for a user to select.

4.5 Choose transaction start date

Banking will ask the user to select a start date to recieve transactions.

An image showing the UI where a user can select a transaction start date.

4.6 Bank account connected

The user can then select Finish on successful connection screen to finish their bank feed connection.

Image showing the bank account connected screen.

Step 5. Handle message returned from the iFrame

The Banking UI loading in the iFrame will post a message back to the parent window by calling the postMessage() method. To retrieve these messages back from the Banking UI you should implement the recieveMessage() method as demonstrated:

    function receiveMessage(event) {
        // Add security to ensure you trust the sender of this message
        console.log("MY Data:", event);
    window.addEventListener("message", receiveMessage, false);

The following is an example of a postback result from the Banking Service:


Step 6. Closing the common UI

When this messaged is recieved you can close the UI and return the user to their in-product bank account. If the user selects the ‘finish’ option a postback message with the account number only is sent.

Step 7. Save Account Details

Save the accountId returned in the post message response to your database.


In this walkthrough we have covered how to load the transaction import UI with a bank account or placeholder bank account within an iFrame. We have also covered the steps the user would take when using the common UI to upload transactions and anything your solution would need to action.

Was this helpful?