Bank Selection UI

This guide explaind how to create end user facing UI to select end users bank.

Step 1: Find Banks

First, you'll need to get your token from the Nordigen's Open Banking Portal. If you are not permitted to query ASPSPs in a given country you can use a mock up bank's ASPSP ID (SANDBOXFINANCE_SFIN0000) for testing purposes.


curl -X GET "https://ob.nordigen.com/api/aspsps/?country=uk" 
-H  "accept: application/json" 
-H  "Authorization: Token YOUR_TOKEN"

Response:


[
  {
    "id": "BAR_BUKBGB22",
    "name": "Barclays",
    "bic": "BUKBGB22",
    "countries": [
      "UK"
    ]
  },
[...]
  {
    "id": "HSBC_HBUKGB4BXXX",
    "name": "HSBC",
    "bic": "UNLALV2X",
    "countries": [
      "UK"
    ]
  }
]

Step 2: Create UI element

You need to create a UI or any other selection mechanism for finding an end users bank. Commonly an end user is given a choice of supported banks by Nordigen in a given country to choose from.

Below is a style guide which is based on best practices.

Notes:

  1. Inform the end user what they should do. Include additional support text if necessary.
  2. Show available banks. Considerations:
    • Instead of listing, show banks in grid form
    • Show both logo and a name of a bank
    • Sort banks in alphabetical order or by popularity
  3. Add a bank search bar for better UX
  4. Apply your own colour palette that fits with rest of your application

Step 3: Add ASPSP ID association

Once an end user selects their bank account, the right ASPSP ID needs to be passed in requisition for building a link for an end user to follow to.

Jump to