GETTING STARTED
React paywall
In-app paywall overlay for SPAs
@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 startedInstall, provider, gate, CORS, demo.Theming & brandingCSS variables, labels, logo, dark mode.Components & APIPaywallProvider, PaywallGate, hooks.Custom UITailwind, unstyled, renderLockedOverlay.ExamplesStaging echo, publisher brand, headless.AI agentsJSON 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.