Use Serverless to work with MailChimp API

Kheoh Yee Wei
Sep 5, 2018 · 3 min read

Build a waiting-list feature that collects email addresses using MailChimp and Serverless

“white English bulldog peeing on white wall tires” by Terry Jaskiw on Unsplash

On a one fine day, I found out the following hard truth on MailChimp when I wanted to use its API to collect interested parties’ email address on my landing page.

Note

MailChimp does not support client-side implementation of our API using CORS requests due to the potential security risk of exposing account API keys. source

Dang it! 😿

So with my limited experience on back-end, I presumed that I would need some kind of a ‘server’, a server that simply exposes one API like addToBetaUserList for the front-end, an API which will then actually communicate with the MailChimp’s APIs and return response payload back to the front-end without CORS issues getting in the way.

And the Serverless framework fit the bill perfectly!

Before we start, make sure that you have set up your Serverless environment.

Alright. So first of all, simply follow this guide starting from the ‘Creating and deploying a single endpoint’ section and stop at the ‘Adding a DynamoDB table with REST-like endpoints’.

Done? Alright now let’s define our addToBetaUserList endpoint in our serverless.yml file:

.
.
.
functions:
app:
handler: index.handler
events:
- http: ANY /
- http: 'ANY {proxy+}'
addToBetaUserList:
handler: index.addToBetaUserList
events:
- http:
path: addToBetaUserList
method: POST
cors: true
// the key to enable CORS!

Next, as learned from this guide, we will store our MailChimp’s API key in the ‘AWS Parameter Store’. If you had gone through this Serverless set-up guide, you would have installed aws-cli which you can now use it to store the key:

aws ssm put-parameter --name mailChimpApiKey --type String --value YOUR_MAILCHIMP_API_KEY

Then let’s update our serverless.yml file to account the key as an environment variable which you will later be able to access from the process.env object:

.
.
.
functions:
app:
handler: index.handler
events:
- http: ANY /
- http: 'ANY {proxy+}'
addToBetaUserList:
handler: index.addToBetaUserList
events:
- http:
path: addToBetaUserList
method: POST
cors: true // the key to enable CORS!
environment:
MAILCHIMP_API_KEY: ${ssm:mailChimpApiKey}

OK sweet. Now we are going to the second part of this task which is the implementation details of the addToBetaUserList function! 🚀

First, let’s install the axios http library: npm install --save axios . We are going to use it to call the MailChimp’s API itself.

Now, let’s go to the index.js file and add the following changes:

And…DEPLOY!! sls deploy

Once successfully deployed, you will see a bunch of information shown on your terminal along with your endpoints as such:

. 
.
endpoints:
ANY - https://3r34339.execute-api.ap-southeast-1.amazonaws.com/dev
ANY - https://3r34339.execute-api.ap-southeast-1.amazonaws.com/dev/{proxy+}
POST - https://3r34339.execute-api.ap-southeast-1.amazonaws.com/dev/addToBetaUserList
.
.

Now finally, all you have to do at front-end is to call this POST endpoint along with the body that in this case will contain the emailAddress value:

POST https://3r34339.execute-api.ap-southeast-1.amazonaws.com/dev/addToBetaUserList HTTP/1.1{
"emailAddress": "helloWorld@gmail.com"
}

And I think that’s it! 😊 🎈

“Crowd” by Kheoh Yee Wei

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade