Build a Webhook Receiver

Problem/Feature Description

Build a Next.js App Router endpoint that receives webhooks from a payment provider (like Stripe). The endpoint should:

• Accept POST requests at /api/webhooks/payments
• Parse the JSON body from the payment provider
• Handle different event types: payment.completed, payment.failed, payment.refunded
• Log the event to an in-memory store
• Return appropriate responses to the payment provider

The payment provider sends payloads like:

{
  "event": "payment.completed",
  "data": {
    "paymentId": "pay_123",
    "amount": 4999,
    "currency": "usd",
    "customerId": "cust_456"
  },
  "timestamp": "2024-01-15T10:30:00Z"
}

The provider also sends a x-webhook-signature header for verification (simulate this -- just check the header exists).

Also add a GET endpoint at /api/webhooks/payments/events to list received events, and add middleware to protect the /api/webhooks/* routes.

Output Specification

Produce:

• app/api/webhooks/payments/route.ts -- POST handler for receiving webhooks
• app/api/webhooks/payments/events/route.ts -- GET handler for listing events
• middleware.ts -- middleware for the webhook routes
• package.json with dependencies

You may create additional files as needed.