Webhook payload design in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a webhook payload with an event type.

Rest API

{
  "event": "[1]"
}

Drag options to blanks, or click blank then click option'

Auser.created

Buser_deleted

CupdateUser

Dcreate-user

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores or camelCase instead of dot notation.

Using vague or unclear event names.

The event type should be a clear, dot-separated string like user.created to indicate the event.

2fill in blank

medium

Complete the code to include a timestamp in ISO 8601 format in the webhook payload.

Rest API

{
  "timestamp": "[1]"
}

Drag options to blanks, or click blank then click option'

A2023-04-01T12:00:00Z

B04/01/2023 12:00

C2023.04.01 12:00:00

D12:00:00 01-04-2023

Attempts:

3 left

💡 Hint

Common Mistakes

Using local date formats instead of ISO 8601.

Omitting the 'T' or 'Z' characters.

The timestamp should be in ISO 8601 format, like 2023-04-01T12:00:00Z, which is standard for webhooks.

3fill in blank

hard

Fix the error in the webhook payload by completing the missing key for user data.

Rest API

{
  "user": [1]
}

Drag options to blanks, or click blank then click option'

A["id", "name"]

B123, "Alice"

C"id:123, name:Alice"

D{"id": 123, "name": "Alice"}

Attempts:

3 left

💡 Hint

Common Mistakes

Using a list instead of an object for user data.

Using a string instead of an object.

The user data should be a JSON object with keys and values, like {"id": 123, "name": "Alice"}.

4fill in blank

hard

Fill both blanks to add a nested address object with city and zip code.

Rest API

{
  "address": {
    "city": "[1]",
    "zip": "[2]"
  }
}

Drag options to blanks, or click blank then click option'

ANew York

B10001

CLos Angeles

D90001

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without quotes for zip code.

Mixing city and zip code values.

The city should be a string like New York and the zip code a string like 10001.

5fill in blank

hard

Fill all three blanks to create a payload with event, user id, and active status.

Rest API

{
  "event": "[1]",
  "user": {
    "id": [2],
    "active": [3]
  }
}

Drag options to blanks, or click blank then click option'

Auser.updated

B42

Ctrue

D"user.created"

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes inside the blank for event string.

Using string 'true' instead of boolean true.

The event is a string without quotes in the blank because quotes are in code, user id is a number, and active is a boolean true.

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