Step by step

This is a step-by-step guide on how to create a webhook endpoint, create a webhook request, get webhook requests, validate webhook request payload.

Base URL

const BASE_URL = "https://api.wt.dev";

Create new valid webhook endpoint

1. Define an interface named Webhook with two properties: id and endpoint, both of type string. This interface will structure the data received from the webhook creation process.
2. Send a POST request to the ${BASE_URL} endpoint using the fetch API. Append /webhooks/create to the base URL. Await the response from the server.

interface Webhook {
  id: string;
  endpoint: string;
}

const webhook: Webhook = await fetch(${BASE_URL}/webhooks/create, {
  method: "POST",
}).then((res) => res.json());

console.log("Webhook", webhook);
console.assert("id" in webhook && "endpoint" in webhook, "Invalid Webhook");

Create new webhook request

1. Define a payload object containing data to be sent in the webhook request. In this case, the payload includes a timestamp, captured using the Date.now() method.
2. Send a POST request to the ${BASE_URL} endpoint using the fetch API. Append /webhooks/create to the base URL. Await the response from the server.

const payload = {
  timestamp: Date.now(),
};

type WebhookResponse = { message: "success" } | { error: unknown };

const response: WebhookResponse = await fetch(webhook.endpoint, {
  method: "POST",
  body: JSON.stringify(payload),
}).then((res) => res.json());

console.log("WebhookResponse", response);
console.assert("message" in response, "Invalid WebhookResponse");

Get webhook requests

1. Define an interface named WebhookResponse to structure the data received from the server. This interface includes properties such as accessType, resourceJwt, and receivedRequests, which is an array of objects containing request details.
2. Send a POST request to the ${BASE_URL} endpoint using the fetch API. Append /webhooks/create to the base URL. Await the response from the server.

interface WebhookResponse {
  accessType: "private" | "public";
  resourceJwt: string;
  receivedRequests: [
    {
      date: string;
      path: string;
      id: string;
      method: string;
    }
  ];
}

const webhookResponse: WebhookResponse = await fetch(`${BASE_URL}/webhooks/${webhook.id}/received`).then((res) =>
  res.json()
);
const receivedRequests = webhookResponse.receivedRequests;

console.log("WebhookRequests", receivedRequests);
console.assert(Array.isArray(requests) && receivedRequests.length, "Invalid WebhookRequests");

Validate webhook request payload

1. Define an interface named PupulatedWebhookRequest to represent the structure of the incoming webhook request. This interface includes properties request and response for the incoming request and the corresponding response.
2. Send a POST request to the ${BASE_URL} endpoint using the fetch API. Append /webhooks/create to the base URL. Await the response from the server.

interface PupulatedWebhookRequest {
  request: {
    resource: string;
    path: string;
    httpMethod: string;
    headers: Record<string, string>;
    multiValueHeaders: Record<string, string>;
    queryStringParameters: any;
    multiValueQueryStringParameters: any;
    pathParameters: { id: string };
    stageVariables: any;
    requestContext: Record<string, unknown>;
    body: string;
    isBase64Encoded: boolean;
  };
  response: {
    statusCode: number;
    body: string;
    headers: Record<string, string>;
  };
}

const webhookRequest: PupulatedWebhookRequest = await fetch(
  `${BASE_URL}/webhooks/${webhook.id}/${requests[0].id}`
).then((res) => res.json());

const request = webhookRequest.request;

console.log("PupulatedWebhookRequest", request);
console.assert("body" in request, "Invalid PupulatedWebhookRequest.");

const body: typeof payload = JSON.parse(request.body);
console.assert(
  body.timestamp === payload.timestamp,
  `Invalid request body. Expected "timestamp" to be "${payload.timestamp}"`
);