DEV Community

Cover image for Understanding Webhooks: A Humble Guide for Developers
Athreya aka Maneshwar
Athreya aka Maneshwar

Posted on

Understanding Webhooks: A Humble Guide for Developers

Imagine this: you download the Walmart app, addded a $24 Lindt chocolate box and a $2.50 Feastables bar to your cart, head to checkout, and see an additional $0.50 in fees.

Image description

Your total comes to $27.

You add your billing details, whether it’s a credit card or PayPal, and hit the “Order” button.

Here’s what happens behind the scenes:

  1. The app tells the backend, “Hey, we’ve got an order for $27.”
  2. The backend forwards the information to the payment service (this could be Walmart’s internal system or an external provider like PayPal).
  3. The payment service processes the payment and responds to the backend with an order ID and confirmation.
  4. The backend relays this order ID back to the app.
  5. The app shows you the checkout screen, and you complete your payment.

Now, you as the user know the payment is done, and so does the frontend (the app).

But here’s the twist: the backend doesn’t know yet.

That’s where webhooks come in to save the day.


What Are Webhooks?

Webhooks, also known as Web Callbacks, HTTP Push APIs, or Reverse APIs, are a way for one application to send real-time data to another when a specific event happens.

Unlike traditional APIs, which require you to make a request to get data, webhooks automatically send the data to you as soon as it’s available.

They’re like having a friend who calls you as soon as they have news, instead of you needing to ask them constantly.


How Webhooks Work in Our Example

Let’s revisit our Walmart example.

Once the payment is completed, the payment provider (e.g., PayPal) uses a webhook to notify Walmart’s backend:

  1. The payment provider sends a POST request to Walmart’s backend, saying, “Hey, the payment for order ID #12345 was successful. Here’s the payment ID as proof.”
  2. Walmart’s backend receives this confirmation and updates its records.
  3. Now that the backend knows the payment is complete, it can trigger the next steps, like initiating delivery or sending you a confirmation email.

Without this webhook, there are only two alternatives:

  1. The backend could repeatedly poll the payment provider's API for the payment status, which is highly inefficient and resource-intensive.
  2. The frontend could send a signal to the backend with the payment ID to trigger a status check, but this approach is unreliable—especially if the user closes the app or loses connection.

Using a webhook eliminates these inefficiencies and ensures seamless communication.


Webhooks vs. APIs: What’s the Difference?

  • APIs: You (the client) request the data when you need it. Think of it as pulling data.
  • Webhooks: The server sends you the data automatically when an event happens. Think of it as pushing data.

Both have their use cases, but webhooks are particularly useful for real-time updates, like payment confirmations, shipment status changes, or notifications.


Why Webhooks Are Awesome

  • Real-Time Updates: You don’t have to wait or manually check for updates.
  • Efficiency: No need for repeated API calls to check the status of an event.
  • Automation: They enable seamless workflows between applications.

Speaking of APIs, I’ve been working on a super-convenient tool called LiveAPI.

It’s designed to make API documentation effortless for developers.

With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.

If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.

Here’s a quick video about how we got started with LiveAPI: Watch on YouTube.


Wrapping Up

Webhooks are a simple yet powerful concept that can transform how applications communicate.

Whether you’re dealing with payments, notifications, or real-time updates, webhooks can help you build efficient, automated workflows.

If you’ve been hesitant to dive into webhooks, start small.

Experiment with a payment gateway’s webhook or set up a simple webhook for a project.

The more you use them, the more you’ll appreciate their utility.

Top comments (1)

Collapse
 
jackson-david profile image
pasindu prabath

🚀 Get Free Programming Codes to Sell! 🌎
Grab high-quality, sellable codes from around the world—FREE! Perfect for developers & resellers.

👉 (bit.ly/freemastercodeprogramming)
Don’t miss out—join now! 🛠️✨