Drip is great at email marketing automation. One of the quickest ways to start using Drip is to add your customers to a list for marketing purposes.
API platforms like Chec, and JS SDKs like Commerce.js give you all you need to get started implementing commerce in your frontend.
When it comes to email automation and marketing, there are dozens of tools to deal with our subscriber lists. Drip stands out for its ability to manage cart abandonment and orders, but we'll explore those later!
In this post, we'll add a new custom field to Chec, and we'll use the Chec Spaces to create a test order, and Chec webhooks to send our data to Drip.
1. Sign up to Drip
You'll need an account with Drip, and your Account ID
and API Key
.
2. Sign up to Vercel
Vercel, (previously known as Zeit) are a serverless hosting platform, and we'll be using it to run our webhook locally and deploy.
You'll also need to install the Vercel CLI to follow along.
3. Create a new project
Now we're ready to rock, let's start by creating a new directory for our project.
mkdir chec-add-customer-to-drip
cd chec-add-customer-to-drip
It's also worth at this point linking the directory to Vercel.
now
The Now CLI will ask you which folder you want to link, to what account and any build instructions. All we need is to accept the defaults when asked.
Next, we'll install our dependencies:
yarn init -y # npm init -y
yarn add drip-nodejs -E # npm install drip-nodejs
Then create the following file api/subscribe.js
and save the following contents:
// api/subscribe.js
module.exports = async (req, res) => {
res.send('Hello world')
}
Now run now dev
and you should see that we're running on http://localhost:3000
!
Ready! Available at
http://localhost:3000
To see our response Hello world
, we'll need to append /api/subscribe
to http://localhost:3000
.
Open http://localhost:3000/api/subscribe
to see our response!
Before we continue writing any code, there's some configuration we need to do at Chec.
4. Setup Chec custom fields
Inside the Chec Dashboard, head to Setup > Data
and click + Add Data Field.
Give the field a name of Accepts Marketing
, make it optional and select Checkbox
from the dropdown.
Click Save Collected Data Settings when done.
5. Setup Chec webhooks
When a new order is created with Chec/Commerce.js, it will trigger a webhook. It's important we configure a webhook to listen to the event orders.create
and attach a URL
to send the payload
onto.
Since we don't have access to localhost from the outside world natively, we'll use a service called ngrok to do this for us.
Make sure to install ngrok, and run the now development server using now dev
.
Once the Now CLI has started the server and it's confirmed that it's active on localhost:3000, run the following command to create a tunnel to PORT 3000 with ngrok.
ngrok http 3000
Note: You will need to specify another PORT if Now is running on anything else but 3000.
You should see a response that looks a little something like the following. Copy your Forwarding address.
Now let's configure Chec to listen to orders.create
event and add the URL given to us by the ngrok CLI.
Inside the Chec Dashboard, head to Setup > Webhooks
and + Add webhook.
- Select
orders.create
from the Event(s) dropdown. - Paste your forwarding address into the URL input, and append
/api/subscribe
. - Click add webhook
6. Send to Drip
All that's left to do is write some code that gets the customer email
from our orders payload (sent via Chec webhooks) and add this to Drip, ONLY when extrafields
has a field for Accepts Marketing
.
Let's see what the code looks like...
// api/subscribe.js
const client = require("drip-nodejs")({
token: "YOUR_DRIP_API_TOKEN",
accountId: "YOUR_DRIP_ACCOUNT_ID",
});
module.exports = async ({ body }, res) => {
try {
const {
payload: {
customer: { email },
extrafields,
},
} = body;
if (!extrafields.find((field) => field.name === "Accepts Marketing"))
return res
.status(200)
.json({ statusCode: 200, message: "No action required" });
await client.createUpdateSubscriber({ email });
res.status(201).json({
statusCode: 201,
message: `Subscribed successfully`,
});
} catch (err) {
res.status(400).json(err);
}
};
In the above code we're checking the extrafields
array for any object that contains the name
Accepts Marketing
. If it doesn't, we simply return, as there's nothing for us to do!
7. Start your engines!
Now it's time to take our serverless function for a ride!
Providing you have at least one product in your Chec inventory, head to your Chec Space (link in your Dashboard sidebar), and add a product to the cart and checkout.
The Chec Spaces product will automatically show the custom field we created earlier, but you can also pass the custom field along when capturing an order via Commerce.js or the API directly.
Let's use the Spaces product for the sake of testing our function.
Thankfully we can use a test card 4242 4242 4242 4242
to complete the checkout without paying any money 😅
Once you click Pay, and the order is confirmed, you should see the order inside the Chec Dashboard.
And finally, you should see the email inside the Drip "people" tab.
8. Deploying
Before deploying it to Vercel by typing now
, you might want to consider the following before you do so;
- Configure Git repo with Vercel for continuous deployment
- Configure ENVs with Vercel instead of pushing your keys to source control
- Change the webhook URL in Chec to your Vercel deployment URL
- Check your Chec webhook
signature
and age to prevent unauthorized requests
That's it! 🤩
I hope to explore more of Drip in future guest posts.
PS. Thanks to the Commerce.js team for allowing me to post this content to their Dev.to org. I've been super impressed how responsive the team have been as I've been badgering them while exploring their product. ❤️
Top comments (0)