Ax402Docs
GETTING STARTED

React paywall

In-app paywall overlay for SPAs

@ax402/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).

Source: github.com/AxLabs/ax402-sdks (packages/react-paywall/).

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; optional privateKey on PaywallProvider for headless signing in the same app
    • You already expose a paid URL on your gateway — the gate uses that same URL

vs hosted gateway page

Ax402 gateways return a short educational HTML page when someone opens a protected URL in a browser (Accept: text/html). It explains x402 and links to docs — it does not pay on its own.

Use this React package for wallet payment inside your SPA (teaser, theming, agent discovery). Use buyer SDKs for scripts and agents.

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.ExamplesGateway URLs, publisher brand, headless.AI agentsJSON manifest and meta tags for automation.

Install

npm install @ax402/react-paywall @x402/fetch @x402/evm viem

SDK integration

Control plane and buyer clients in your codebase

Buyer clients

Next Page

On this page

When to usevs hosted gateway pagevs server paywallGuidesInstall