Skip to content

Webhook Endpoint Configuration UI #516

Description

@Kingsman-99

Description

Developers and integrators who want to receive payment event notifications have no way to configure webhook endpoints through the UI, requiring manual API calls or direct database edits. A webhook configuration page with endpoint registration, secret rotation, and delivery log should be added to the settings section.

Technical Context

src/app/settings/webhooks/page.tsx (new) renders a list of registered webhook endpoints fetched from src/app/api/settings/webhooks/route.ts (new). src/components/settings/WebhookForm.tsx (new) uses react-hook-form with URL validation for the endpoint field and checkboxes for subscribed event types (invoice.created, invoice.funded, invoice.released). A "Rotate secret" action calls POST /api/settings/webhooks/[id]/rotate and displays the new secret in a one-time reveal modal.

Acceptance Criteria

  • A webhooks page in settings lists all registered endpoints with URL, event subscriptions, and status
  • Adding a new webhook validates the URL format and requires selecting at least one event type
  • The newly created webhook secret is shown once in a modal and cannot be retrieved again from the UI
  • "Rotate secret" generates a new HMAC secret and displays it in the same one-time reveal modal
  • Deleting a webhook requires a confirmation dialog before the DELETE request is sent
  • All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions