Overview

Enable the user to explore IBAN details or provide feedback when the IBAN is invalid.

Acceptance criteria

1. Create a page with the form:
- IBAN input field
- Validate button
 

2. Send IBAN to the API
When the user submits the form
 

3. Display valid IBAN details
- Validation states (based on flags from API response)
- - "Valid IBAN" when the response is successful
- - "Trusted bank" when bank.trustScore is over 7
- - "Accepts instant payments" when flags include INSTANT
- - "Positive operation history" when flags include POSITIVE_HISTORY
- - "No security claims" when flags miss SECURITY_CLAIMS
- - "Complies with Payment Services Directive (PSD2)" when flags include PSD2
 

4. Display invalid state when IBAN is invalid
- - When API throws — the IBAN is invalid
- - When a response is successful, the given IBAN is valid.

Design

Successful IBAN validation

Invalid IBAN

API specification

The validation is created via GET /validate endpoint.

Expected request:

Response:

Test data

- AT0309000000000019176655
- RO23INGB0001000000000222
- CZ3608000000002996530173

Overview

Enable the user to see which currency the IBAN supports.

Acceptance criteria

1. Display the currency underneath formatted IBAN
 

Design

SDK specification

Employ @partner/super-countries JavaScript SDK (from our partner) to retrieve the currency.

Usage:

import { findCountryByIso2Code } from '@partner/super-countries';

const { currency } = await findCountryByIso2Code('AT');

Result:

{
  "code": "EUR",
  "name": "Euro",
  "symbol": "€"
}

ℹ Consume country code (e.g., AT) from the bank.address.country attribute in the validation API response.
 

API specification

The validation is created via POST /validate endpoint.

Expected request:

Response:

Test data

- AT0309000000000019176655
- GB29NWBK60161331926819
- SA3245000000001123456001

Overview

Enable the user to see the bank IBAN belongs to.

Acceptance criteria

1. Display bank details
- Join bank.name and bank.address using , (comma) separator
- Join bank address parts using , (comma)
- Join city and zip using (space)

(Consider the bank.name and all address details are optional API response attributes)

Example:

Erste Bank, Am Belvedere 1, 1100 Vienna, AT
^name       ^street         ^zip ^city   ^country

Design

API specification

The validation is created via GET /validate endpoint.

Expected request:

Response:

Test data

- HU14116000060000000084586199
- HR8523300033203674306

Overview

Provide the user with feedback when the IBAN is missing or invalid.

Acceptance criteria

1. Display validation message when IBAN is missing
 

2. Display invalid state when IBAN is invalid
- When API throws an error
 

Design

Missing IBAN

Invalid IBAN

API specification

The validation is created via GET /validate endpoint.

Expected request:

- When a response is successful, the given IBAN is valid.
- When API throws — the IBAN is invalid

Test data

- LV64HABA0551018676991