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.
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" whenbank.trustScore
is over 7 - - "Accepts instant payments" whenflags
includeINSTANT
- - "Positive operation history" whenflags
includePOSITIVE_HISTORY
- - "No security claims" whenflags
missSECURITY_CLAIMS
- - "Complies with Payment Services Directive (PSD2)" whenflags
includePSD2
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![Image](https://github.com/niksumeiko/iban-validator-react-tdd-kata/assets/175385/477de4da-def1-4c12-941b-6de16985a1ac)
Invalid IBAN![Image](https://github.com/niksumeiko/iban-validator-react-tdd-kata/assets/175385/b08d22d8-2bd2-4b75-9fa2-b9e1a46091b0)
API specification
The validation is created via GET /validate endpoint.
Expected request:
Response:
INSTANT | POSITIVE_HISTORY | SECURITY_CLAIMS | PSD2
Test data
- AT0309000000000019176655 - RO23INGB0001000000000222 - CZ3608000000002996530173