Guides

Collect Payments

Setting up Mandates

Direct Debit Mandates Verified Mandates Collecting mandates offline Importing Mandates

One-off Payments

One-off Direct Debit Instant Bank Payment

Recurring Payments

Subscription Instalments Variable Recurring Payments Instant Bank Payment + Direct Debit

Integration Types

GoCardless Hosted Pages Javascript Drop-in Flow Custom Payment Pages

Events & Webhooks

Mandate Events Billing Requests Events

Managing payments

FX Payments Reconciling Payouts

Scheme guidance

ACH and PAD Consent Types Billing Request Purpose Codes VRP Commercial Payment Purpose Codes PayTo Agreements and Payments

Send money

Introduction to Outbound Payments Payment Account API request signing

Send an outbound payment

Adding a new recipient Initiate an outbound payment Approve an outbound payment Cancel an outbound payment

Tracking outbound payments Bank Account Holder Verification Strong Customer Authentication

Optimise and increase revenue

Prevent fraud with Protect+ Retain customers with fallbacks Reduced failed payments with Success+

Prefill customer details

New customer record Existing customer record Populate Billing Request Flow

Blocking mandates

Tutorials

Taking Direct Debit payments using Billing Requests and Custom Payment Pages Handling tax Handling Customer Notifications

GoCardless Embed

Introduction Creating a creditor Adding a creditor bank account Optional Setting a scheme identifer Optional

Setting up mandates / collecting payments

Billing Request with Actions: Setting up a Direct Debit mandate Collecting a Direct Debit payment Billing Request with Actions: Taking an Instant Bank Payment Billing Request with Actions Dual Flow: Taking an Instant Bank Payment and setting up a Direct Debit mandate

Handling webhooks

Reconciling payouts

Payout Items API Automated Payout Reporting Optional

Setting Up Branding Optional API request signing Optional Bank Details Access Optional

Bank Account Data

Overview Quickstart Guide Endpoints Bank Selection UI Sandbox Statuses and Error code Output: Account Details Output: Balances Output: Transaction Details Postman Collection FAQs

Bank Account Data - Bank Selection UI

View as Markdown

Bank Selection UI

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

Step 1: Find Banks

First, query

institutions

endpoint to get a list of all available financial institutions in a given country.

curl -X GET "https://bankaccountdata.gocardless.com/api/v2/institutions/?country=gb" 
-H  "accept: application/json" 
-H  "Authorization: Bearer ACCESS_TOKEN"

Response:

[
  {
    "id": "ABNAMRO_ABNAGB2LXXX",
    "name": "ABN AMRO Bank Commercial",
    "bic": "ABNAGB2LXXX",
    "transaction_total_days": "540",
    "countries": [
      "GB"
    ],
    "logo": "https://cdn-logos.gocardless.com/ais/ABNAMRO_FTSBDEFAXXX.png"
  },
[...]
  {
    "id": "REVOLUT_REVOGB21",
    "name": "Revolut",
    "bic": "REVOGB21",
    "transaction_total_days": "730",
    "countries": [
      "GB"
    ],
    "logo": "https://cdn-logos.gocardless.com/ais/REVOLUT_REVOGB21.png"
  },
]

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 GoCardless that already incorporates best practices or,
build the UI from scratch

Here are some considerations if UI is built from scratch:

Have a clear call to action e.g. "Select your bank".
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.
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.
Add a bank search bar for better UX.
Use styles that fit with the rest of your application.

Step 3: Add Institution ID association

Once the end user selects their bank, make sure to pass the correct Institution ID when building the requisition and the link to start the end-user authentication process with the selected financial institution (see step 4 in the Quickstart Guide).

Connect as a partner