Creating Paywall UIs for x402-Protected Endpoints

Build server-side middleware that serves payment HTML pages to browsers and JSON 402 responses to API clients, with automatic wallet integration for Algorand (Pera, Defly, Lute).

Prerequisites

Before using this skill, ensure:

1. A backend framework (Express.js, Hono, or Next.js)
2. A facilitator service running and accessible via URL
3. An Algorand address to receive payments (payTo address)

Core Workflow: Server-Side Paywall Architecture

The paywall system has two sides. The server middleware detects missing payments and serves either a JSON 402 or an HTML paywall page. The HTML page handles wallet connection, signing, and retry: