React paywall — Examples

Copy-paste patterns for common setups with Ax402 gateway URLs.

Staging echo (monorepo demo)

<PaywallGate resourceUrl="/echo/get?test=1" title="Unlock response" />

Run cd ax402-paywall-demo && make demo. Vite proxies /echo → https://echo.staging.ax402.io.

Gateway URL from dashboard

<PaywallGate
  resourceUrl="https://myapi.your-gateway-host.com/v1/premium"
  title="Subscriber content"
/>

Use the hostname and path from your published API domain, not the control-plane URL.

Branded publisher

<PaywallProvider
  appearance={{
    theme: { accent: "#b45309", cardBg: "#fffbeb", border: "#fde68a" },
    brand: <span style={{ fontWeight: 700 }}>The Herald</span>,
    labels: { payToRead: "Read for $0.01", connectWallet: "Sign in with wallet" },
  }}
  policy={{ preferredNetworks: "eip155:84532" }}
  rpc={{ defaultUrl: "https://sepolia.base.org" }}
>
  <PaywallGate resourceUrl="https://gateway.example.com/articles/42" … />
</PaywallProvider>

Dark theme

theme: {
  accent: "#38bdf8",
  title: "#f4f4f5",
  muted: "#a1a1aa",
  cardBg: "#18181b",
  secondaryBg: "#27272a",
  border: "#3f3f46",
  overlayStart: "rgba(0,0,0,0.35)",
  overlayEnd: "rgba(9,9,11,0.92)",
}

Programmatic unlock

const { inspect, unlock } = usePaywall();
const preview = await inspect(url);
const result = await unlock(url);

Hide agent block

<PaywallGate resourceUrl={url} agentDiscovery={false} />

Multiple gates, one brand

Set appearance on PaywallProvider; override labels per PaywallGate.