184 Components

Webhook Payload Simulator

Cards

Stripe and GitHub inspired webhook inspection card with HMAC-SHA256 signature auto-signing, event topic selectors, formatted JSON payload viewer, and live test delivery dispatcher.

Webhook Payload Simulator

Dispatch signed test webhooks and inspect delivery response headers.

whsec_94b8••••

Event Topic

Destination Endpoint

Stripe-Signature: t=1728734200,v1=9c4a8f2e0... (HMAC-SHA256)

Auto-Signed

HTTP POST Payload (JSON)

{
  "id": "evt_1P8xK0Lkd8",
  "type": "payment_intent.succeeded",
  "created": 1728734200,
  "data": {
    "amount": 14900,
    "currency": "usd",
    "customer": "cus_N0Qz82K19",
    "payment_method_types": [
      "card",
      "apple_pay"
    ],
    "status": "succeeded",
    "receipt_email": "alex@acme.inc"
  }
}

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/webhook-payload-simulator.json"

Props

TypeScript props supported by <WebhookPayloadSimulator />.

3 props

Prop	Type	Default	Description
defaultTargetUrl	`string`	`"https://app.acme.com/api/webhooks/stripe"`	Default receiving endpoint URL.
defaultEventType	`string`	`"payment_intent.succeeded"`	Initial webhook event topic selected.
hmacSecret	`string`	`"whsec_94b8109d72c1a8e"`	Mock HMAC signing secret key.

Key Features

Pre-configured standard events (payment_intent, subscription, invoice).
Simulated HMAC header generation with auto-signed hash indicator.
Interactive Dispatch trigger with simulated round-trip HTTP latency.
One-click copy for the formatted JSON event body.

Keyboard & Accessibility

Accessible select menus with keyboard selection.
High-contrast delivery response indicators with dual color and icon cues.

Waterfall

Wormhole Tunnel