React paywall
@axlabs/x402-react-paywall is an embeddable buyer-side overlay for React SPAs: blurred teaser, wallet picker, x402 payment via @x402/fetch, then unlocked content. Pair it with an Ax402 gateway endpoint (see Gateway wrap).
When to use
- News sites, newsletters, or dashboards that need an in-app “pay to read” experience
- People pay with browser wallet extensions (MetaMask, etc.) via the overlay picker and “Pay to read”
- Agents and automation pay the same gateway URL with buyer SDKs or CLI (
AX402_EVM_PRIVATE_KEY) — not the wallet UI. Agent discovery on the page tells them how; optionalprivateKeyonPaywallProviderfor headless signing in the same app - You already expose a paid URL on your gateway — the gate uses that same URL
vs server paywall
Official @x402/paywall middleware returns a full HTML 402 page. This package keeps users inside your React app. For Next.js route protection without a custom UI, use server paywall; for branded overlays, use this library.
Guides
Getting started
Install, provider, gate, CORS, demo.
Theming & branding
CSS variables, labels, logo, dark mode.
Components & API
PaywallProvider, PaywallGate, hooks.
Custom UI
Tailwind, unstyled, renderLockedOverlay.
Examples
Staging echo, publisher brand, headless.
AI agents
JSON manifest and meta tags for automation.
Local demo
Runnable demo in the x402 monorepo: ax402-paywall-demo (proxies staging echo.staging.ax402.io). Package source: ax402-sdk/packages/react-paywall.