Bank Selection UI

This guide explains how to create end-user-facing UI to select the end-users bank.

Step 1: Find Banks

First, you'll need to get your token from the Nordigen Open Banking Portal, and query aspsps endpoint to get a list of all available 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 a UI element

You will need to create a UI or any other mechanism for selecting the end user's bank. Commonly the end user is presented with a choice of Nordigen's supported banks in the given country.

Below you can see a style guide 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 if the list contains more than five banks;
    • 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. Use styles that fit with the rest of your application.

 


Step 3: Add ASPSP ID association

Once the end user selects their bank, make sure to pass the correct ASPSP ID when building the requisition and the link to start the end-user authentication process with the selected ASPSP (see steps 4.1 and 4.2 in the Quickstart Guide).