Add customers as people to Drip on checkout
Tags: ecommerce, checkout, drip, marketing
Published: 2020-05-29 05:34:10

---
title: Add customers as people to Drip on checkout
published: true
description: Watch for new orders via webhooks and send subscribe customers to Drip if they accept marketing.
tags: ecommerce, checkout, drip, marketing
---

[Drip](https://www.drip.com) 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](https://commercejs.com/merchants), and JS SDKs like [Commerce.js](https://commercejs.com) 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](https://vercel.com/download) 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.

```bash
mkdir chec-add-customer-to-drip
cd chec-add-customer-to-drip
```

It's also worth at this point linking the directory to Vercel.

```bash
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:

```bash
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:

```js
// 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`](http://localhost:3000)!

> Ready! Available at [`http://localhost:3000`](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`](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`](https://dashboard.chec.io/setup/collected_data) and click **+ Add Data Field**.

Give the field a name of `Accepts Marketing`, make it optional and select `Checkbox` from the dropdown.

![Custom Data Field form](https://dev-to-uploads.s3.amazonaws.com/i/yrsffyismub7edpv0tfp.png)

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](https://ngrok.com) 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.

```bash
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**.

![ngrok CLI](https://dev-to-uploads.s3.amazonaws.com/i/1vccvqgtxp3fj4dtbf8q.png)

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**.

1. Select `orders.create` from the **Event(s)** dropdown.
2. Paste your forwarding address into the **URL** input, **and** append `/api/subscribe`.
3. Click **add webhook**

![Add Chec webhook](https://dev-to-uploads.s3.amazonaws.com/i/q4zfbkxp5bmj8cfit3bw.png)

## 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...

```js
// 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 😅

![Chec Checkout](https://dev-to-uploads.s3.amazonaws.com/i/o5ng2xdds5josntomzvk.png)

Once you click Pay, and the order is confirmed, you should see the order inside the Chec Dashboard.

![Chec Order view](https://dev-to-uploads.s3.amazonaws.com/i/iffv6m5nme4abx15b2qh.png)

And finally, you should see the email inside the Drip "people" tab.

![Drip people](https://dev-to-uploads.s3.amazonaws.com/i/p4exremzxeltivmypjeb.png)

## 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. ❤️