search

niksumeiko / iban-validator-react-tdd-kata

97 stars 30 forks source link

Validate IBAN #1

Open niksumeiko opened 1 year ago

niksumeiko commented 1 year ago

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 Image

Invalid IBAN Image

API specification

The validation is created via GET /validate endpoint.

Expected request:

Attribute Type
iban string

Response:

Attribute Type
iban string
flags enum[]
INSTANT | POSITIVE_HISTORY | SECURITY_CLAIMS | PSD2
bank?.trustScore? number(0-10)

Test data

- AT0309000000000019176655 - RO23INGB0001000000000222 - CZ3608000000002996530173

niksumeiko commented 1 year ago

Ice boxed

4. Display formatted IBAN - Insert space after every 4th character - Example: - - Pure: AT0309000000000019176655 - - Formatted: AT03 0900 0000 0000 1917 6655