Community

How to Integrate Discord with Medusa for Order Notifications

Oct 20, 2022 by

Suraj Vishwakarma

Learn how to use Medusa’s customization capabilities to setup up Discord as the notification provider.

Medusa is an open source headless commerce platform. It is an alternative to Shopify, especially for developers who want more customization and control over their ecommerce websites.

Medusa has organized a hackathon to run through October 2022. You can win awesome prizes by building ecommerce projects using Medusa. You can learn more about it by visiting this page: Medusa Hackathon sign-up: Win Merch and Prizes up to $1,500 During Hacktoberfest.

In this tutorial, you’ll see a submission example for the hackathon. You’ll learn how to use Medusa’s customization capabilities to set up Discord as the notification provider. A message will be sent to the Discord server when a new order is placed.

You can find the code for this tutorial in this GitHub repository.

Prerequisites

Ensure these tools are installed on your machine:

NodeJS: It is a JavaScript runtime build. You need to have at least v14 of NodeJS to run commands for installing packages and the Medusa server.
Git: It is an open source version control system. Medusa uses Git behind the scenes while creating a Medusa project.
Medusa CLI: It will be used while running the Medusa server on a local machine. Install the CLI by running the command below after installing NodeJS:

npm install @medusajs/medusa-cli -g

Redis: It is an in-memory data structure store and message broker. Medusa uses Redis as the event queue in the server.

Install Medusa

The process of installing Medusa is quite simple; you just need to run a single command on the terminal. Run the below command to start installing Medusa:

npx create-medusa-app

After running the command, you need to enter the name of the project. By default, it’s

Copy to clipboard
my-medusa-store

. Hit enter once you choose the name for your project.

Now, you need to choose the Medusa starter. Choose the

Copy to clipboard
medusa-starter-default

After this, you need to choose the storefront server. You have options such as Next.js starter, Gatsby starter, and others. Choose a starter that you are comfortable with; I chose the

Copy to clipboard
Next.js starter

After choosing all this, the installation process will move forward. All the necessary dependencies for your project will be installed. After completion of the installation, you will have these three directories inside the

Copy to clipboard
my-medusa-store

storefront: This is the frontend of your store, which is created with the framework you chose during the installation process.
backend: This is where all the magic happens; it has the code for your Medusa server.
admin: It is the place for the seller. It helps in managing the products, offers, payments, and other seller-related features. It is made in Gatsby. You need not change anything in the admin codebase.

Configure Redis

Redis runs locally and we need to add the URL of the server to the project. Go to

Copy to clipboard
backend/medusa-config.js

and add

Copy to clipboard
redis_url: REDIS_URL

into the

Copy to clipboard
projectConfig

. By default,

Copy to clipboard
REDIS_URL

is set to

Copy to clipboard
redis://localhost:6379

module.exports = {
  projectConfig: {
    //...
    redis_url: REDIS_URL // Redis URL 
  },
  plugins,
};

After all this, the setup is now done. Now, it's time to set up the webhooks in our Discord server.

Create Discord Webhook

Discord webhook is a way of sending messages from a third-party integration or application to the Discord server. A webhook is like a member of the server with a name and profile picture. This webhook will post messages coming from the other application.

Let’s set up the Webhook on our server.

Click on your server name at the top-left corner, then choose server settings. In the server settings, click on the

Copy to clipboard
Integration

tab from the left panel. The integration panel lets you manage webhooks and bots of your server.

Click on Create Webhook to create a random webhook.

You can edit it to display the profile pic, name, and channel in which messages will be posted. After editing the webhook, click on Save Changes.

Here is the

Copy to clipboard
Order Notification

webhook that will post messages in the general channel.

At the bottom of the webhook, you can see the

Copy to clipboard
Copy Webhook URL

button. Click on it and copy the URL of the created webhook. Now go to

Copy to clipboard
backend/.env/

and add the URL as the environment variable:

DISCORD_WEBHOOK_URL="discord_webhook_url"

Implement Discord Notification Provider

Let’s first understand how the notification provider works in Medusa. Whenever an event occurs in the Medusa server, such as a product added to the cart or an order placed, the event is passed into the event bus and directed to the notification plugin.

First, let’s create the notification provider that will have the

Copy to clipboard
discord-notification

as an identifier and run when someone places an order.

Go to

Copy to clipboard
/backend/src/services

and create a file with the

Copy to clipboard
discord.js

name. Here, you’ll define the function to run when someone places the order.

Place the following code inside the file:

import axios from 'axios';
import {NotificationService} from 'medusa-interfaces'

class DiscordNotification extends NotificationService {
    static identifier = "discord-notification";
    constructor({ orderService }) {
      super();
      this.orderService_ = orderService;
    }
    async sendNotification(eventName, eventData) {
        if (eventName === 'order.placed') {
          //retrieve order
          const order = await this.orderService_.retrieve(eventData.id, {
            relations: ['items']
            }
          )

        const URL = process.env.DISCORD_WEBHOOK_URL

        let content = `New Order Placed⚡\nNumber of products: ${order.items.length}`
        const embeds = []
        
        
        order.items.map(item => {
          content += `\n\nProduct : ${item.title} \nQuantity : ${item.quantity} \nDescription:${item.description}`
          embeds.push({
            image: {
               url: item.thumbnail
            }
          });
        })

        await axios.post(URL, {
          content,
          embeds
        })

        return {
          to: URL,
          data: {
              content,
              embeds
          }
        };
        
    }}}

  export default DiscordNotification;

You name the class

Copy to clipboard
DiscordNotification

and it extends the

Copy to clipboard
NotificationService

. In the constructor, you can access different services in Medusa. In this case, you access

Copy to clipboard
orderServices

that contains data regarding the orders.

You add an asynchronous function with the name

Copy to clipboard
sendNotificaiton

. At the top of the function, there is the code to verify whether the event is

Copy to clipboard
order.placed

or not. If it is, then, you’ll proceed further.

After that, the order ID is retrieved from

Copy to clipboard
eventData

and the full details of the order are retrieved using the

Copy to clipboard
orderService

and stored in the

Copy to clipboard
order

variable.

In the next step, you’ll access the webhook’s URL from the environment and store it in the

Copy to clipboard
URL

variable. You then initialize two variables:

Copy to clipboard
content

is for the text that contains information about the order and

Copy to clipboard
embeds

for the image of the product.

You’ll use the map function to iterate over the order items. In the map function, you are concatenating the previous string of

Copy to clipboard
content

with the new item's data. In

Copy to clipboard
embeds

, you are pushing the URL of the image. After the loop, you use Axios to send a request to the Discord webhook to send the message to the server.

In the end, an object with two properties will return:

Copy to clipboard
to

and

Copy to clipboard
data

```
Copy to clipboard
to
```
contains the medium of notification, which is Discord in our case. Therefore, the URL of the webhook is given.
```
Copy to clipboard
data
```
contains the message that was sent to Discord.

This will create a notification record in Medusa’s database.

You then must subscribe to the

Copy to clipboard
order.placed

event with a subscriber. For this, create a subscriber that calls the

Copy to clipboard
notificationService.subscribe

function.

To create a subscriber, go to the

Copy to clipboard
/backend/src/subscribers

directory and create a file with the

Copy to clipboard
discord.js

name with the following content:

class DiscordNotification {
  constructor({ notificationService }) {
    // Subscribe to order.placed events
    notificationService.subscribe("order.placed", "discord-notification");
  }
}

export default DiscordNotification;

The subscriber calls

Copy to clipboard
notificationService.subscribe

in the constructor. It takes two arguments: the first is the name of the event and the second is the name of the identifier. The notification provider that has the

Copy to clipboard
discord-notification

identifier is subscribed to the

Copy to clipboard
order.placed

event.

Test the Integration

The project has been completed and it’s time to see it work live.

Run the Environment

First, run the Medusa server, storefront, and Redis server.

For Backend:

Go to

Copy to clipboard
backend/

and run the Medusa server with the below command:

npm run start

For Storefront:

Change to the

Copy to clipboard
storefront

directory and add the command below to run Medusa’s storefront at

Copy to clipboard
localhost:8000

by default:

npm run dev

Place an Order

If your storefront runs well, you will be able to see the storefront on the

Copy to clipboard
localhost:8000

. Select the product and click on checkout from the cart. Now, fill in the shipping details. The details need not be accurate as you are only testing. Select the fake delivery options and payment will be already completed for testing.

After filling in the details, click on the

Copy to clipboard
Checkout

button on the right-side panel. If everything goes well, your order will be placed.

The notification regarding the order will be sent to your Discord server.

Conclusion

Using Medusa’s plugin system, you can integrate any third-party service and tool for different purposes such as Notifications, Payment, or CMS. You can also publish your plugins for the community to use and benefit from.

If you’re interested in seeing more Medusa plugins, check out the Integrations page. You can also learn more about plugins in the Medusa documentation.