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, and querry aspsp endpoint to get a list of all avialable ASPSPs (banks) in a given country.


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

Response:


[
  {
    "id": "MONZO_MONZGB2L",
    "name": "Monzo Bank Limited",
    "bic": "MONZGB2L",
    "countries": [
      "GB"
    ]
  },
[...]
  {
    "id": "HSBC_HBUKGB4B",
    "name": "HSBC Personal",
    "bic": "HBUKGB4B",
    "countries": [
      "GB"
    ]
  }
]

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