How to validate VAT IDs with JavaScript

Validate Vat Id Javascript

If you own or operate a company, you’ve probably had to deal with the hassle of validating value-added tax (VAT) identification numbers (IDs) for your international customers. It’s a necessary step to ensure you’re correctly charging customers from different countries, but it’s a manual process that can waste valuable resources. 

Fortunately, there is a way to automate the VAT validation process, which can save you valuable time and resources. In this article, we will show you how to create a VAT verification web app using JavaScript.

What is a VAT validation API?

A VAT validation API enables businesses to automate the verification process of VAT numbers. This is important for businesses that deal with multiple VAT-registered companies in different countries, as it can save time and avoid mistakes in the verification process. The API checks the number against government databases in the EU, Australia, Norway, Switzerland, and the UK to see if it’s real and up-to-date and if the correct tax treatment has been applied. 

This process is important for businesses because it helps them ensure they comply with regulations and limits the risk of fines or penalties. It’s also useful for customers, as it gives them confidence that the company they’re doing business with is legitimate. 

A Step-by-step on how to create a vat validation web app using JavaScript

In this tutorial, we are going to build a Vat Validation web app using JavaScript, Tailwind CSS, and Vite.

Before we begin, make sure your development stack consists of the following:

Vat Validator
A preview of the final vat validator

Step 1: Initializing a Vite Project

Our first step is to initialize a Vite project in our development workspace. Vite is a build tool that helps developers create high-quality web applications. It offers a fantastic developer experience and can help to improve the performance of your web app.

We enter: yarn create vite

Once your project is initialized, will now ask us for a project name. After choosing whatever name we want, we need to select a framework. Since we want to use plain JavaScript, we select vanilla (twice).

Next, we switch into the newly created directory, as suggested by the console, but we don’t start the yarn build just yet.

Step 2: Styling setup (optional)

This step is optional, however, if you do decide to follow it, we recommend using Tailwind CSS. Tailwind is a great tool for rapidly prototyping and building out custom designs. It’s also easy to use and get started with. We use it combined with autoprefixer & postcss for a smooth development experience.

To style our validator, we need to install the following packages first:

yarn add -D tailwindcss postcss autoprefixer

Next, we initialize Tailwind. A config file (tailwind.config.cjs) will be created:

npx tailwindcss init

Now, we need to adapt this newly created config to work with our Vite project setup:

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
   './main.js',
   './index.html',
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

At the top of our style.css, we need to add the following to include Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

For postcss, we need to create a config file named postcss.config.cjs in our root directory and add the following lines:

module.exports = {
	plugins: [
    	require('tailwindcss'),
    	require('autoprefixer')
	]
}

Step 3: Start vite in dev mode

We’re now ready to start vite to serve our files with hot reloading. To do this, we’ll run the following command:

yarn dev

This command will open a new tab in your browser automatically. If not, open http://localhost:5173/ in a browser of your choice.

You should now see the default Vite index page reading Hello Vite!

Step 4: Prepare your HTML

The next step is to prepare our HTML and adapt the default landing page. We create an index.html file and build a form for the VAT validator. We will need the following:

  • A wrapper form id=”vat_id_validator” to hold our input
  • An input id=”vat_id” for the actual phone number
  • A submit button type=”submit”
  • A container div id=”result” where we display our response from the API

Here is what our implementation of the index.html looks like:




	
	
	VAT Validator


VAT Validator

Note: You can use any HTML or CSS framework you like, however in this tutorial all CSS classes are tailwind specific, so if you want to use another CSS framework or style it yourself, remove them completely.

The id attributes in JavaScript are used as selectors. If you adapt them in HTML, also adapt them in your JavaScript accordingly.

Step 5: Handle form submission in JavaScript

In our main.js, we read the data from the input and send it to the vatcheckapi. For this to work, we need an API key. In this tutorial, we will be using Vatcheckapi.com, which provides a free API key and a great developer experience. 

The main.js could look something like this:

import './style.css'

const vatValidator = document.getElementById('vat_id_validator');
const vatInput = document.getElementById('vat_id');
const resultContainer = document.getElementById('result');

vatValidator.addEventListener('submit', (e) => {
	e.preventDefault();

	fetch(`https://api.vatcheckapi.com/v2/check/?vat_number=${vatInput.value}`, {
    	headers: {
        	apikey: 'YOUR-APIKEY'
    	}
	})
    	.then(response => response.json())
    	.then(data => {
        	if (data.message) {
            	resultContainer.innerHTML = `
${data.message}
` } else { const borderClasses = data.checksum_valid && data.format_valid ? 'border-green-500' : 'border-red-500'; resultContainer.innerHTML = `
Checksum valid:${data.checksum_valid}
Format valid:${data.format_valid}
Country Code:${data.country_code}
VAT Number:${data.vat_number}
Is registered:${data.registration_info.is_registered}
Company name:${data.registration_info.name ?? 'N/A' }
Company address:${data.registration_info.address ?? 'N/A' }
`; } }); });

Make sure to replace YOUR-API-KEY with your actual key! 

And that’s it! Now we have successfully built a VAT validator in JavaScript!

Never worry about VAT IDs again

VAT validation is a necessary step to collect and submit the correct tax treatment but it can be a hassle to keep track of. However, by automating the VAT validation process, you can save yourself a lot of time and resources. 

By building a vat validator with Javascript, you can ensure that your organization is always compliant with the latest VAT regulations. This will save you time and money in the long run, and it will make life much easier for you and your customers.