Webhook payload design in Rest API - Step-by-Step Execution

Concept Flow - Webhook payload design

Event Occurs

↓

Prepare Payload

↓

Include Essential Data

↓

Format Payload (JSON)

↓

Send Payload to Receiver

↓

Receiver Processes Payload

↓

Acknowledge Receipt

This flow shows how a webhook payload is created and sent when an event happens, then processed by the receiver.

Execution Sample

Rest API

{
  "event": "order_created",
  "data": {
    "order_id": 12345,
    "total": 99.99
  },
  "timestamp": "2024-06-01T12:00:00Z"
}

A simple webhook payload for an order creation event with order details and timestamp.

Execution Table

Step	Action	Payload Content	Reason
1	Event occurs	event: 'order_created'	Trigger webhook for new order
2	Prepare payload	Include event and data keys	Essential info for receiver
3	Add order details	order_id: 12345, total: 99.99	Provide order specifics
4	Add timestamp	timestamp: '2024-06-01T12:00:00Z'	Record when event happened
5	Format as JSON	Complete JSON object	Standard format for webhooks
6	Send payload	POST request with JSON body	Deliver data to receiver URL
7	Receiver processes	Parse JSON and act	Use data to update or notify
8	Acknowledge receipt	HTTP 200 OK	Confirm successful delivery

💡 Webhook payload sent and acknowledged, process complete

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
payload	{}	{"event": "order_created", "data": {}}	{"event": "order_created", "data": {"order_id": 12345, "total": 99.99}}	{"event": "order_created", "data": {"order_id": 12345, "total": 99.99}, "timestamp": "2024-06-01T12:00:00Z"}	JSON string ready to send

Key Moments - 3 Insights

Why do we include a timestamp in the webhook payload?

The timestamp shows exactly when the event happened, helping the receiver understand the timing and order of events, as seen in step 4 of the execution_table.

Why must the payload be formatted as JSON?

JSON is a standard, easy-to-read format that both sender and receiver understand, ensuring smooth data exchange, shown in step 5 of the execution_table.

What happens if the receiver does not acknowledge the webhook?

Without acknowledgment (step 8), the sender may retry sending the payload or log an error, because it cannot confirm the receiver processed the data.

Visual Quiz - 3 Questions

Look at the execution_table, what key is added to the payload at step 3?

A "data" with order details

B "event"

C "timestamp"

D "acknowledgment"

💡 Hint

Check the 'Payload Content' column at step 3 in the execution_table.

At which step does the webhook sender confirm the receiver got the payload?

A Step 7

B Step 8

C Step 6

D Step 5

💡 Hint

Look for 'Acknowledge receipt' in the 'Action' column of the execution_table.

If the event was 'user_signed_up', how would the payload change at step 2?

A event: 'order_created'

B data: {order_id: 12345}

C event: 'user_signed_up'

D timestamp removed

💡 Hint

Refer to the 'Action' and 'Payload Content' columns at step 2 in the execution_table.

Concept Snapshot

Webhook payload design:
- Trigger event starts process
- Prepare JSON payload with event, data, timestamp
- Send via POST to receiver URL
- Receiver parses and acknowledges
- Use clear, minimal, essential data
- Timestamp helps track event timing

Full Transcript

Webhook payload design starts when an event occurs, like an order creation. The system prepares a payload including the event name, relevant data such as order details, and a timestamp to record when the event happened. This payload is formatted as JSON, a common data format that is easy to read and parse. The payload is then sent via a POST request to the receiver's URL. The receiver processes the JSON data and sends back an acknowledgment, usually an HTTP 200 OK status, confirming successful receipt. Including a timestamp helps the receiver understand the timing of events. Formatting as JSON ensures compatibility. If the receiver does not acknowledge, the sender may retry or log an error. This process ensures reliable and clear communication between systems using webhooks.

Practice

1. What is the main purpose of a webhook payload in a REST API?

easy

A. To store user login credentials securely

B. To create a user interface for the API

C. To send event details from one app to another automatically

D. To encrypt data between client and server

Solution

1. Step 1: Understand webhook payload role

   A webhook payload is a message sent automatically when an event happens, sharing event details.

2. Step 2: Compare options with webhook purpose

   Only To send event details from one app to another automatically describes sending event details automatically, which matches webhook payload use.

3. Final Answer:

   To send event details from one app to another automatically -> Option C

4. Quick Check:

   Webhook payload = event details sent automatically [OK]

Hint: Webhook payloads always send event info automatically [OK]

Common Mistakes:

• Confusing payload with user authentication
• Thinking payload creates UI
• Assuming payload encrypts data

2. Which of the following is the correct JSON structure for a webhook payload that includes event name and timestamp?

easy

A. [ "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" ]

B. { "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" }

C. { event = "user_signup", timestamp = "2024-06-01T12:00:00Z" }

D. "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z"

Solution

1. Step 1: Identify valid JSON syntax

   JSON objects use curly braces {}, keys and values separated by colon :, keys in double quotes, and comma between pairs.

2. Step 2: Check each option's syntax

   { "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" } uses correct JSON object syntax. [ "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" ] uses square brackets which denote arrays, not key-value pairs. { event = "user_signup", timestamp = "2024-06-01T12:00:00Z" } uses equals sign instead of colon. "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" is missing braces.

3. Final Answer:

   { "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" } -> Option B

4. Quick Check:

   Valid JSON object = { "event": "user_signup", "timestamp": "2024-06-01T12:00:00Z" } [OK]

Hint: JSON objects use braces and colons, not brackets or equals [OK]

Common Mistakes:

• Using square brackets instead of braces for objects
• Using equals sign instead of colon
• Omitting braces around JSON

3. Given this webhook payload JSON:

{"event": "order_created", "timestamp": "2024-06-01T15:30:00Z", "data": {"order_id": 123, "amount": 49.99}}

What value will the receiving app find for data.amount?

medium

A. 49.99

B. order_created

C. "amount"

D. 123

Solution

1. Step 1: Locate the data.amount field in JSON

   Inside the "data" object, the key "amount" has the value 49.99 (a number).

2. Step 2: Match the value to options

   49.99 matches the numeric value 49.99. Other options are either keys or unrelated values.

3. Final Answer:

   49.99 -> Option A

4. Quick Check:

   data.amount = 49.99 [OK]

Hint: Look inside nested 'data' object for 'amount' key [OK]

Common Mistakes:

• Confusing order_id with amount
• Selecting string key instead of value
• Choosing event name instead of data field

4. You receive this webhook payload:

{"event": "payment_failed", "timestamp": "2024-06-01T16:00:00Z", "data": {"payment_id": 789}}

What is wrong with this payload?

medium

A. Payment ID should be a string, not a number

B. Timestamp format is incorrect

C. Event name should be inside data object

D. Missing closing brace for the JSON object

Solution

1. Step 1: Check JSON completeness

   The payload ends without a closing brace '}' for the outermost JSON object, making it invalid JSON.

2. Step 2: Verify other parts

   Timestamp format is ISO 8601 and correct. Event name is correctly outside data. Payment ID can be number or string depending on design.

3. Final Answer:

   Missing closing brace for the JSON object -> Option D

4. Quick Check:

   JSON must have matching braces [OK]

Hint: Always check for matching braces in JSON payloads [OK]

Common Mistakes:

• Ignoring missing braces
• Assuming timestamp format is wrong
• Thinking event must be inside data

5. You want to design a webhook payload for a "user_deleted" event that includes the user ID and deletion reason. Which JSON payload design is best for clarity and easy parsing?

hard

A. { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "data": { "user_id": 456, "reason": "requested by user" } }

B. { "user_deleted": true, "user": 456, "reason": "requested by user" }

C. { "event": "user_deleted", "user_id": 456, "reason": "requested by user" }

D. { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "user": { "id": 456, "reason": "requested by user" } }

Solution

1. Step 1: Check for standard webhook fields

   { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "data": { "user_id": 456, "reason": "requested by user" } } includes event name, timestamp, and a nested data object holding user_id and reason, which is clear and standard.

2. Step 2: Compare other options for clarity and parsing

   { "user_deleted": true, "user": 456, "reason": "requested by user" } lacks event and timestamp keys properly named. { "event": "user_deleted", "user_id": 456, "reason": "requested by user" } mixes data fields at root level, less organized. { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "user": { "id": 456, "reason": "requested by user" } } nests reason inside user object, which is less intuitive.

3. Final Answer:

   { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "data": { "user_id": 456, "reason": "requested by user" } } -> Option A

4. Quick Check:

   Standard event + timestamp + data object = { "event": "user_deleted", "timestamp": "2024-06-01T17:00:00Z", "data": { "user_id": 456, "reason": "requested by user" } } [OK]

Hint: Use event, timestamp, and data object for clear payloads [OK]

Common Mistakes:

• Omitting timestamp
• Mixing data fields at root level
• Nesting unrelated fields inside user