How to send emails with Commerce Layer webhooks, Zapier, and SendGrid.

Prerequisites

• A general understanding of how APIs and the command-line work.
• You have read the first part of the Webhook series.
• You should have a Commerce Layer account, have set up your organization, and created the required commerce data resources for your market. You can follow the onboarding tutorial or manual configuration guide to achieve this.
• Create an integration application and save your credentials (Client ID, Client secret, and Base endpoint) by following this guide in our documentation.

Getting started with SendGrid

Twilio Sendgrid is a service that provides you with an Email API you can use to send emails to customers. To get started, follow the steps below to create a Sendgrid account:

1. Create a Sendgrid account if you don't have one already.
2. Verify your account and set up 2FA.
3. Finally, create a Single Sender identity account (PS: this is for testing purposes; for production use, it's recommended to use the Domain Authentication identity).
4. That's all :)

Getting started with Zapier

Now, let's show you how you can complete the integration with our webhooks and Sendgrid. To achieve this, we will utilize our private Zapier app (which we will make public in the future) that will allow you to easily integrate 3000+ third-party services with Commerce Layer and build any automation workflow in minutes. So, kindly follow the steps below to get started:

1. Create a Zapier account if you don't have one yet.
2. Use this invite link to install our private Commerce Layer Zapier app.
3. We will now create a Zap, an automated workflow that connects apps and services (like Commerce Layer and Sendgrid in our case).

A zap consists of a trigger step and one or more action steps. When you turn your Zap on, it will run the action steps every time the trigger event occurs, which is basically what we want to do (this is similar to how the local server we built in the previous article worked). The Commerce Layer webhook will be the trigger event, and the corresponding action is to send some data to Sendgrid, which in turn delivers that data to a customer via email. Let's cover setting up the trigger event first, in the section below.

Trigger Event

1. Search for “Commerce Layer” and select the app in the App Event field. Then select the latest version (which is 1.1.2 at the point of writing this tutorial).
2. Select a New Order Event trigger event (you can explore the available options later and choose as you desire).
3. Click the button to sign in to your Commerce Layer account.
4. Enter your organization hostname, Client ID, and Client Secret. You should have this already from the prerequisite step where you created an integration application earlier.
5. Click “Yes continue,” and you should be authorized if you entered valid credentials.
6. Click continue and select the place order event. You can choose another option based on the type of trigger you want. But since we want to send a notification when an order is placed successfully (which would have a placed status), then place event works for us. You can learn more about the anatomy of an order in our data model documentation.
7. If you want, you can include extra resources and attributes to be returned by the webhook that are not returned by default. The following resources are included by default: customer, line_items, shipping_address, billing_address, shipments.shipping_method, payment_method, payment_source, market.
8. Click “Continue” and the test trigger button, and the app will find a recent order in your Commerce Layer organization to confirm that the correct account is connected and your trigger is set up correctly. This will return the last order we created.

Action (Zapier formatter)

If you observed from the screenshot above, you would see that the dates returned are in raw ISO format. Therefore, before sending the payload data to Sendgrid, we will use Zapier formatted as the first action to format the date to something more readable. Kindly follow the steps below to set the action up:

1. Search for “Formatter by Zapier” and select the app in the App Event field.
2. Select the Date/Time action event.
3. Click the “Continue” button.
4. In the Transform field, select “Format”.
5. Click the “Continue” button.
6. In the Values>Input field, search for “Placed At” and select it.
7. In the To Format field, select MMMM DD YYYY HH:mm:ss (January 22 2006 23:04:05).
8. In the To Timezone and From Timezone fields, select any timezone of your choosing or use the default UTC.
9. Click the “Continue” button and text the action.

Action (SendGrid)

Now the fun part 🙃. Let's send an email to the customer who placed the order with details of their order by creating another action. In this action, we can add variables to the email content, which will dynamically add data from the webhook payload coming from Commerce Layer. Kindly follow the steps below to set the action up:

1. Search for “Sendgrid” and select the app in the App Event field.
2. Select the Send Email action event.
3. Create a SendGrid API key with Full access “Main Send” permission by navigating to the SendGrid dashboard and opening Settings > API Keys.
4. Click “Continue” and sign in to Sendgrid using the created Mail API Key.
5. Click “Yes continue” and you should be authorized if you entered a valid credential.
6. Click “Continue” and begin filling in information about the email.
7. Kindly fill in the fields shown to configure your email:
   • To: this should be the customer email and can be fetched by searching “Customer Email”.
   • From: this is the verified email address of the sender associated with your SendGrid account.
   • From Name: this is the name added to the “From email field” and should represent your store name. You can do something like: “Headless Swag Store (Market Name)”–passing the market as a variable from Commerce Layer.
   • Reply To: this is the email address added to the ‘Reply-To field” of the email message.
   • Subject: this is the subject of the email.
   • Text: this is a plain-text body of the email message. This or the HTML version is required but we will use the HTML version for this demo.
   • HTML: this is the body of the email message that can include HTML tags.
8. In the HTML field, enter some text and fetch some variables from Commerce Layer and the formatted date as seen in the screenshot below:

And that's all! You can now test the action or turn the zap on. As discussed earlier, turning the zap on will make the entire automation run when the trigger occurs. You should also know that your test email might be delivered to the Spam folder. To avoid this, you need to authenticate your SendGrid sender identity, as mentioned earlier.

Conclusion

We hope you have learned more ways to utilize our webhooks feature! If you observed in your test email (if you sent this to yourself), the image was too large (we tweaked the screenshot above using inspect element 🙈), and the email doesn't look beautiful like other promotional emails you receive. If you were sending the email directly from SendGrid, you could easily use a styled template, but since we're working with a webhook, that can't work. To solve this, you need to write a lambda function to intercept the payload data and apply a template before sending the email using SendGrid API. In the next part of the Webhook series, we will show you how to achieve this. Can't wait for this one, right? Then join our Slack community if you haven’t yet to get notified when we publish :).