Strattic Developers by Elementor

How to Validate Emails Using the Kickbox API

If a user is submitting a form, you might want to check their email is valid and likely to be delivered. Kickbox.com provides just such an API. Here is how you can set up a service to use it with your form submission.

In order to use their API, Kickbox does not allow CORS, so a request needs to come from a server. Since your site on Strattic can only use JavaScript to make these requests, we need to set up this service to ping Kickbox.

This also has the added benefit of not exposing your API key in the browser 😎.

Where in the flow of a form submission might you integrate this service? An example could be:

  1. A user fills out a contact form on your site.
  2. When they enter their email and leave the email input box (onblur), you could ping this service.
  3. If the Kickbox API sends a response that the email is undeliverable, then you can notify the user immediately with an error notice and not allow the form to be submitted.
  4. If it comes back as deliverable, you don’t need to do anything, and they can submit the form, none the wiser of your awesome validation check 🤓.

Here is an example of what the service will return:

Kickbox API request result.

The following example sets up a Netlify function to handle the request, storing and injecting the API key for Kickbox when needed.

Set up the service

You can use this repo as a template starter, and add the following code in the noted files.

You’ll want to run npm-install to make sure the node modules you need are available. You’ll want to do two additional steps:

  1. Run npm install node-fetch --save-dev to install the node-fetch module.
  2. Add the following to your package.json file:
{
  ...
  "type": "module"
  ...
}

If you’re using the above starter, you really only need to add the below function. This will be your main function file, you could call it kickbox-email-checker.js, and it would go in your netlify/functions folder (and will be created and deployed automatically when you deploy to Netlify):

import fetch from 'node-fetch';

exports.handler = async function (event) {
    // Setup variables.
    const body = JSON.parse(event.body)
    const email = encodeURI(body.email)
    const apiKey = process.env.KICKBOXKEY

    // Make the request to Kickbox:
    const response = await fetch(`https://api.kickbox.com/v2/verify?email=${email}&apikey=${apiKey}`)
    const data = await response.json();

    // Return what we get.
    return {
        statusCode: 200,
        body: JSON.stringify({
            email: body.email,
            request: JSON.stringify(data)
        })
    }
}

References