A demo app showing how to use the x402 protocol (HTTP 402 payments) to pay for a Browserbase browser session and take website screenshots — all powered by automatic USDC micropayments on Base.

Rendering mermaid diagram...

1. The user enters a URL and submits the screenshot form
2. The app calls x402.browserbase.com to create a paid browser session
3. The @x402/fetch SDK transparently handles the HTTP 402 flow — it parses the payment requirements, signs a USDC transfer on Base (EIP-3009), and retries the request with a PAYMENT-SIGNATURE header
4. Browserbase returns a WebSocket URL for a remote Chromium instance
5. The app connects via Playwright, navigates to the target URL, and returns a PNG screenshot
6. The transaction is recorded in SQLite for the history page

buyer.tsx              → HTTP entry point (Hono router)
routes/
  home.tsx             → Landing page with wallet info & navigation
  screenshot.tsx       → Screenshot form + POST handler
  transactions.tsx     → Transaction history table
lib/
  x402.ts              → x402 client setup (wallet signer + wrapFetchWithPayment)
  browserbase.ts       → Browserbase session creation via x402
  screenshot.ts        → Playwright CDP screenshot capture
  db.ts                → SQLite schema & queries for transaction log
  layout.tsx           → Shared HTML layout with Twind CSS