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:
- A user fills out a contact form on your site.
- When they enter their email and leave the email input box (
onblur
), you could ping this service. - 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. - 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:
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:
- Run
npm install node-fetch --save-dev
to install the node-fetch module. - 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)
})
}
}