Use Serverless to work with MailChimp API
Build a waiting-list feature that collects email addresses using MailChimp and Serverless
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_KEYThen 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! 😊 🎈

