IBAN Validation in React (2022)

IBAN Number Structure

An international bank account number consists of a two-letter country code, followed by a two-digit checksum that is calculated using the MOD97 formula, followed by a NIB—a 34-character sequence of digits that identifies the bank, a PSP reference number, basic bank account number, and two NIB check digits.

How IBAN Numbers are Validated

An IBAN (international bank account) number is primarily validated using the MOD97 algorithm. MOD stands for “modulus” and it is a mathematical operation. There are several other steps involved in validating IBANs, including validation of the length of the number and whether or not the country identified by the country code can support IBAN, but the MOD97 evaluation is the first and most important step.

If an IBAN number does not pass MOD97 validation, it can be assumed to be invalid.

Modulus

The modulus operation is the process of finding the remainder when one number is divided by another number. You will also see it referred to as “modulo.” They are the same thing.

As an example, when you divide 4 by 2, the remainder is 0. So 4 modulus 2 is 0. The modulus operator is typically represented by the ‘%’ symbol in programming. So to represent the above example, we could write

4 % 2 = 0.

MOD97

The MOD97 algorithm uses the modulus operator to find the remainder of the numeric value of an IBAN number when it is divided by 97. If the remainder of the operation is 1, then the IBAN number is assumed to be valid.

Steps

First, the IBAN number is stripped of all non-alphanumeric characters (spaces, dashes, etc.)
Next, the first four digits (the country identifier and checksum) are moved to the right-hand side.
The alphabetic characters are converted to their numeric representations, using a standardized conversion method.
Finally, the resulting number is divided by 97, and the remainder is found. If the remainder is 1, then the IBAN is valid.

Validating IBAN Numbers in React

You could write your own algorithm to do this process. All of the components and standardizations are available online. However, it’s a cumbersome process and one that is prone to errors. Rather than rolling your own, it’s usually recommended to use a package like the NPM iban Javascript library or to rely on a third-party API that handles validation of IBANs. Some APIs will also allow you to convert IBAN numbers.

One such API is the AbstractAPI Free IBAN Validator API. The API handles validation of any international bank account number and performs several checks to ensure validation. In addition to the MOD97 evaluation, the API also checks the IBAN number length and the validity of IBAN in the specified country.

Let’s build a simple React webpage that accepts a user’s IBAN number, validates the number with the AbstractAPI IBAN validator, and allows a payment transfer to be made only if the number is valid.

Create a React app and Install Dependencies

This tutorial assumes a basic understanding of React and Create React App. If you don’t know how React or Create React App work, check out this tutorial on React, and this information on Create React App before proceeding.

To spin up a new app using Create React App, run the following command in the terminal.



$ npx create-react-app iban-react-validation-app

/pre>

And start the app



$ cd iban-react-validation-app
$ npm start

This will open a new browser window with the application running at http://localhost:3000.

Build an Input

Inside the src/ directory, create a new file called regex-iban-number-input.js. Create a new React Component called IBANInput and for now, just render some text inside a <p> tag.



import React from "react";

const IBANInput = () => {

return (

   

     This is where our IBAN input will go

       

);

};

export default IBANInput;

Next, open up App.js and delete all the boilerplate between the two <header>s. Import your new IBANInput component, and render that instead.



import './App.css';

import IBANInput from './iban-number-input';

 

function App() {

 return (

   

     

     

     

   

 );

}

export default App;

Check out your browser window at https://localhost:3000. You should now see something like this:

‍

That’s all we need to scaffold out our app. Now let’s build the input.

Add a Text Input

Inside the IBANInput, import a basic React Text Input component. Create a value in state for the IBAN number using the useState hook. Create an onChange handler that will update the value of the IBAN number when the user edits the input.



import React from "react";

import { useState } from "react";

 

const IBANInput = () => {
   const [iban, setIban] = useState('');

   const handleChangeIBAN = (text) => {
       setIban(text);
   }
   return (
       
          IBAN:

           

       
   );
};

export default IBANInput;

Create a handleSubmitPayment method that will be called by the onSubmit prop on the <form>. For now, we’ll just output our submitted data to the console. In reality, this method would send our payment transfer request to our backend or a remote server.



import React from "react";

import { useState } from "react";

const IBANInput = () => {

   const [iban, setIban] = useState('');
   const handleChangeIBAN = (event) => {
       setIban(event.target.value);
   }

   const handleSubmitPayment = () => {

       console.log(iban);

   }

   return (

       <form onSubmit={handleSubmitPayment}>

           <label>IBAN: </label>

           <input type='text' name='iban' onChange={handleChangeIBAN} value={iban} />

           <input type='submit'>Submit</input>

       </form>

   );

};

export default IBANInput;

Head back to https://localhost:3000 to see your new, basic IBAN input component rendered in the browser.

Time to add a validation step using AbstractAPI.

Add Validation Logic

The easiest way to add a validation step to a user form is to simply validate the input when the user hits submit. In the case of our app, we’ll take the string that the user entered into the input, send to the API for validation, and when we receive the response, we’ll then allow the payment request to go through only if the response from the API indicates that the number is valid.

Get Started With the API

The AbstractAPI endpoint is free to use to develop test applications. If you need to make more requests than the free tier will allow, there are several pricing options available. Let’s get started using the API.

Acquire an API Key

Navigate to the API’s Get Started page. Click “Get Started.”

If you’ve never used AbstractAPI before, you’ll be asked to create a free account with your email and a password. If you have used Abstract before, you may need to log in.

Once you’ve logged in, you’ll land on the API’s homepage. You’ll see options for documentation, pricing, and support, and you’ll see your API key. All Abstract APIs have unique keys, so even if you’ve used the API before, this key will be new. Copy the key and the API’s endpoint URL, we will add them to variables in our app.

Use Your Key to Send a Request to the API

We’ll use the fetch global HTTP client to send a GET request to the AbstractAPI endpoint. Fetch is included in React by default

Create a method called validateIBAN. This method will send the IBAN string that was input by the user to the AbstractAPI endpoint, and will evaluate the API’s response, returning a boolean value. We use the API key and the base URL to construct the URL to which we’ll send the request. Then, we’ll append the IBAN string as a query parameter to the URL.

The iban value we append to the end of the string is pulled directly from state. We do not need to pass it as an argument to this method.



const apiKey = 'YOUR_API_KEY';

const apiURL = 'https://ibanvalidation.abstractapi.com/v1/?api_key=' + apiKey

 

const validateIBAN = async () => {

  try {

       const response = await fetch(apiURL + '&iban=' + iban);

console.log(response.data)

  } catch (error) {

      throw error;

  }

}

The response data will look something like this:



{
    "iban": "BE71096123456769",
    "is_valid": true
}

This is a very easy-to-parse response. All we need to do it pull out the is_valid field and return it as the result of our function.



const apiKey = 'YOUR_API_KEY';

const apiURL = 'https://ibanvalidation.abstractapi.com/v1/?api_key' + apiKey

const validateIBAN = async () => {

  try {

       const response = await fetch(apiURL + '&iban=' + iban);

return response.data.is_valid;

  } catch (error) {

      throw error;
  }

}

Validate the IBAN Before Submitting Payment Request

Let’s add this step to our handleSubmitPayment function and use the result of the validation request to determine whether payment should be submitted.



   const handleSubmitPayment = async () => {

      const isValid = validateIBAN();

      if (isValid) {

          console.log("IBAN Valid. Submitting payment.")

      } else {

          console.log("IBAN not valid.")

      }

  }

Try entering a valid IBAN number into the input and hit “Submit.” You should see the expected output in the console. Same if you enter an invalid IBAN.

Put It All Together

Here’s the full code for our IBAN number input component.



import React from "react";

import { useState } from "react";

 

const apiKey = 'YOUR_API_KEY';

const apiURL = 'https://ibanvalidation.abstractapi.com/v1/?api_key=' + apiKey

 

const IBANInput = () => {

   const [iban, setIban] = useState('');

 

   const handleChangeIBAN = (event) => {

       setIban(event.target.value);

   }

 

   const validateIBAN = async () => {

   try {

       const response = await fetch(apiURL + '&iban=' + iban);

       return response.data.is_valid;

   } catch (error) {

       throw error;

   }

   }

 

  const handleSubmitPayment = async () => {

      const isValid = validateIBAN();

      if (isValid) {

          console.log("IBAN Valid. Submitting payment.")

      } else {

          console.log("IBAN not valid.")

      }

  }

 

   return (

       <form onSubmit={handleSubmitPayment}>

           <label>IBAN: </label>

           <input type='text' name='iban' onChange={handleChangeIBAN} value={iban} />

           <input type='submit'>Submit</input>

       </form>

   );

};

export default IBANInput;

Conclusion

Creating a simple IBAN input with validation with React is easy. In this tutorial, we looked at how to build an IBAN validator that sends an IBAN string to the AbstractAPI endpoint and only allows payment to be transferred if the IBAN is valid.

There are many ways in which this simple component could be improved. The most crucial thing we should do is add error handling to properly handle errors and display an error message to our user if something goes wrong while validating the IBAN.

Another step we could take would be adding a loading spinner while the request is being sent to the API to indicate to the user that something is happening and prevent the user from clicking the submit button multiple times or leaving the page.

In this tutorial, we also looked at the structure of an IBAN (international bank account number), which includes a basic bank account number, country code, and some two-digit checksums.

FAQs

How do I validate an IBAN?

An IBAN is validated by converting any non-numeric values into integers and performing the MOD97 operation. MOD97 involves diving the resulting number by 97 and taking the remainder of that number. If the remainder is 1, then the IBAN is considered valid. The easiest way to validate IBAN or convert IBAN is to use a Javascript library or dedicated endpoint.

How Many Characters is an IBAN?

An IBAN consists of up to 34 letters and numbers. It has a very specific format. The first two letters in the IBAN are the country code identifier. Next, a two-digit checksum follows. After that is the NIB, a string of numbers up to 30 characters long that identify the bank, bank branch, and basic bank account number.

What is MOD97 Algorithm?

The MOD97 algorithm is a process by which IBAN numbers are validated. It involves dividing a number by 97 and taking the remainder of that number. The modulus or modulo operation is usually denoted by the ‘%’ symbol and is the process of finding the remainder of a division operation.

React IBAN Validation

Table of Contents:

Heading

IBAN Codes vs SWIFT Codes

IBAN

SWIFT