Add customers as people to Drip on checkout

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.

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

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