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. To build the UI element you can either:

• use open source JavaScript library built by Nordigen that already incorporates best practices or,
• build the UI from scratch 

Here are some considerations if UI is built from scratch:

1. Have a clear call to action e.g. "Select your bank".
2. Include additional support text if necessary. It's twice more likely that the end user goes trough Open Banking journey if the value proposition is stated clearly.
3. Show available banks. Considerations:
   • Show both logo and a name of a bank;
   • Sort banks in alphabetical order or by popularity;
   • You can list all available banks in a given country or select only those ones that are used by your customer base;
   • Instead of listing the banks, show banks in a grid form if the bank list is not extensive. 
4. Add a bank search bar for better UX.
5. 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).