Connecting Stripe & Slack via webhooks

A while back, my friends and I built a simple web service that costs 5$ to use but because of our full-time jobs, we gradually stopped working on it. Until recently, we got back together and decided to spend more time on it and release new features. To keep us motivated, I decided to connect Stripe (the payment gateway service we use for processing payments) with the team’s Slack workspace so that when a user makes a payment, we receive a notification. I’m excited to share how I did it so you can also keep your team motivated!

In this guide, I will show you how I wired up the integration — giving step by step instructions on how you can create a similar integration. After reading this guide, You’ll learn how to:

• Configure Stripe Webhooks
• Configure Slack Webhooks
• Connect Stripe & Slack to communicate via webhooks.

Getting Started

To connect Stripe and Slack, we need to configure Stripe webhooks to send out notifications when an event is triggered and configure Slack webhooks to post these notifications as a message to a Slack channel.

If you want to learn more about webhooks,here is a beginner friendly guide to webhooks I wrote

Configuring Stripe Webhooks

You can configure Stripe webhooks by using the dashboard or by making a HTTP request to the API.
To configure Stripe webhooks using the dashboard, log in to your Stripe account and head over to the dashboard. Once in the dashboard, select the developers option on the dashboard and click the webhooks option. On the webhooks page, click the add endpoint button, you will be prompted to fill out information related to the webhook you intend to configure. For the value of the endpoint field, you could leave it empty or put any random value for now — We will update this once we have configured the Slack webhook. For the events field, you can select any events you would like to receive notifications for, when they occur.

To configure Stripe webhooks using the API, simply make a POST request to the /v1/webhook_endpoints endpoint of the Stripe API. The request body should include JSON data about the webhook by following a similar format as the code snippet below.

    {
            "url": "https://example.com/my/webhook/endpoint",
            "enabled_events[]": [
                "charge.failed",
                "charge.succeeded"
            ]
        }

Now that we have the Stripe webhook setup, we can go ahead and configure the Slack webhooks.

Configuring Slack Webhooks

The first step in configuring Slack webhooks is creating a Slack app for your workspace. To create a slack app, click here and fill the pop up menu with the intended App name & select the Slack workspace you would like the webhook to be associated with. Head over to the features page of the newly created app and toggle the activate incoming webhooks button. Scroll to the bottom of the page and click the “Add New Webhook To Workspace” button to give your newly created Slack app access to your workspace. After a successful authorization you should receive a webhook URL from Slack. The webhook URL will look similar to this “https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXX/3XXXXX”.

Connecting Stripe & Slack

Now that we have configured the webhooks of both platforms, we need to connect them such that when an event is triggered within the Stripe account, a message is sent to the Slack channel.

While you might be tempted to copy the URL provided by Slack and update the created Stripe endpoint with it, that will not work. Although when using the previously mentioned method, Stripe will post notifications to the Slack URL when an event is triggered but Slack will be unable to parse that data and send a message to the specified channel.
The correct way to approach this problem is to format the JSON data received from Stripe and make a POST request to the Slack webhook URL in a format that adheres to the pattern Slack expects. To format the Stripe webhook, we will create a web server that receives and responds to the Stripe webhook. The webserver will also parse the Stripe webhook data and POST it to the Slack webhook URL.

    const express = require("express");
    const app = express();
    const request = require("request");
    const bodyParser = require("body-parser");

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));

    app.post("/webhook", async (req, res) => {
    //Extract the Stripe Webhook data
      const Payload = req.body;
    //Respond to Stripe Webhook notification 
      res.sendStatus(200);
    //Make HTTP POST Request To Slack Provided URL
      const options = {
        method: "POST",
        url:
          "https://hooks.slack.com/services/T01XXXXXX/B01XXXXXX/XXXXXX",
        headers: {
          "Content-type": "application/json",
        },
    //Format Stripe Webhook Data To Adhere To Slack Standards
        body: JSON.stringify({
          text: `Hey! An ${Payload.object} of type ${Payload.type} with ID ${Payload.id} just occured on your Stripe Account`,
        }),
      };
      request(options, function (error, response) {
        if (error) throw new Error(error);
        console.log(response);
      });
    });
    //Start Web Server
    app.listen(3000, () => console.log("App is running on port 3000!"));

Now that everything is set up, you can go ahead and deploy the web server — In a development mode, you could use a local tunnel tool like Ngrok or the Stripe CLI to get an SSL secured, endpoint URL(Here’s a guide we wrote that shows how to setup Ngrok).

Getting Ready For Production

In a Production environment you would want to deploy the web server we created up above to a hosting platform like Heroku(We wrote a guide on deploying servers to Heroku)
Next, We will create a new webhook connection using Hookdeck to manage the ingestion and error handling of the webhook connection to ensure we do not miss any webhook notifications(Check out this guide to get started with creating webhook connections on Hookdeck).
Finally, head back to the Stripe dashboard, select the specific endpoint and update the URL, replacing it with that provided by Hookdeck when a new connection was created. At this point, we are all set. You can test if the integration is working by clicking the send test webhook button. Once the button is clicked, you should notice a new message from the Slack app is sent to the Slack workspace.

Conclusion

Congratulations you have connected Stripe & Slack via webhooks to receive notifications when a payment is processed. I hope this can help keep motivation high!

Interested to learn more? Follow Hookdeck where I'll be sharing tutorials and guide about webhooks!
Try Hookdeck For Free. Receive, monitor and manage all your webhooks from a single place. We handle the complexity so you can focus on building your product.