x402 Random Number Seller

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_303":304,"_305":306},"routes/_app.x.$handle.$name",{"_97":96,"_32":43,"_105":87,"_27":53,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_32":43,"_36":44,"_45":-5,"_46":25,"_47":48,"_49":48,"_50":51,"_52":53,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",95,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","00651e3a-1a67-11f1-9900-42dde27851f2","name","fileType","content","# x402 Playground\n\n### [📺 Explainer video + demo walkthrough](https://www.youtube.com/watch?v=lqr4FIZdR9s)\n\nA demo app showing both sides of the [x402 protocol](https://www.x402.org/)\n(HTTP 402 payments) — a **buyer** that pays for APIs with USDC, and a **seller**\nthat charges for an API endpoint. All powered by automatic micropayments on\nBase.\n\n## Two Apps, One Wallet\n\nThis project contains two HTTP endpoints that share the same wallet\n(`X402_PRIVATE_KEY`):\n\n| App | File | Role | Description |\n| ---------- | ------------ | ------------------ | ------------------------------------------------------------------ |\n| **Buyer** | `buyer.tsx` | Pays for APIs | Web UI that calls paid x402 endpoints using `@x402/fetch` |\n| **Seller** | `seller.tsx` | Charges for an API | Hono app with `@x402/hono` middleware protecting `GET /api/random` |\n\nSince both use the same wallet, calling the seller from the buyer sends $0.001\nUSDC from yourself to yourself — a perfect zero-cost demo loop. Gas is sponsored\nby the [xpay](https://xpay.sh) facilitator (Base L2 gas costs fractions of a\npenny, so facilitators subsidize it to drive adoption of x402).\n\n## How it Works\n\n### Buyer → Seller Flow (Random Number)\n\n```mermaid\nsequenceDiagram\n participant User\n participant Buyer as buyer.tsx
(Val Town)\n participant SDK as @x402/fetch SDK\n participant Seller as seller.tsx
(Val Town)\n participant Facilitator as xpay Facilitator\n participant Base as Base L2
(USDC)\n\n User->>Buyer: Click \"Get Random Number\"\n Buyer->>SDK: paidFetch(seller/api/random)\n SDK->>Seller: GET /api/random\n Seller-->>SDK: 402 Payment Required\n SDK->>Base: Sign USDC payment (EIP-3009)\n SDK->>Seller: Retry with X-PAYMENT header\n Seller->>Facilitator: Verify & settle payment\n Facilitator->>Base: Submit transferWithAuthorization\n Facilitator-->>Seller: Payment confirmed\n Seller-->>SDK: 200 OK { random: 0.42... }\n SDK-->>Buyer: Response\n Buyer-->>User: Display random number\n```\n\n### Buyer → Browserbase Flow (Screenshot)\n\n```mermaid\nsequenceDiagram\n participant User\n participant Buyer as buyer.tsx
(Val Town)\n participant SDK as @x402/fetch SDK\n participant BB as x402.browserbase.com\n participant Base as Base L2
(USDC)\n participant Browser as Remote Chromium
(Browserbase)\n\n User->>Buyer: POST /screenshot {url}\n Buyer->>SDK: fetch(browserbase/session/create)\n SDK->>BB: POST /browser/session/create\n BB-->>SDK: 402 Payment Required\n SDK->>Base: Sign USDC payment (EIP-3009)\n SDK->>BB: Retry with PAYMENT-SIGNATURE header\n BB-->>SDK: 200 OK {wsUrl, txHash}\n SDK-->>Buyer: Session response\n Buyer->>Buyer: Record transaction in SQLite\n Buyer->>Browser: Connect via CDP WebSocket\n Buyer->>Browser: Navigate to user's URL\n Browser-->>Buyer: PNG screenshot\n Buyer-->>User: Return screenshot image\n```\n\n## Project Structure\n\n```\nbuyer.tsx → HTTP entry point for buyer app (Hono router)\nseller.tsx → HTTP entry point for seller app (Hono + x402 middleware)\nroutes/\n home.tsx → Buyer landing page with screenshot & random number forms\n screenshot.tsx → Screenshot form + POST handler (pays Browserbase)\n random.tsx → Random number handler (pays our own seller.tsx)\n transactions.tsx → Transaction history table\nlib/\n x402.ts → x402 client setup (wallet signer + wrapFetchWithPayment)\n browserbase.ts → Browserbase session creation via x402\n screenshot.ts → Playwright CDP screenshot capture\n db.ts → SQLite schema & queries for transaction log\n layout.tsx → Shared HTML layout with Twind CSS\n```\n\n## Environment Variables\n\n| Key | Description |\n| ------------------ | -------------------------------------------------------------------------- |\n| `X402_PRIVATE_KEY` | Private key for a Base wallet holding USDC (used by both buyer and seller) |\n\n## Pages\n\n### Buyer (`buyer.tsx`)\n\n| Route | Description |\n| --------------- | --------------------------------------------------------- |\n| `/` | Home — screenshot form, random number button, wallet info |\n| `/screenshot` | Capture a website screenshot ($0.01 USDC via Browserbase) |\n| `/random` | Get a random number ($0.001 USDC via our seller) |\n| `/transactions` | Table of past payments with totals and tx hashes |\n\n### Seller (`seller.tsx`)\n\n| Route | Description |\n| ------------- | ------------------------------------------------------------------- |\n| `/` | Homepage explaining the API and pricing |\n| `/api/random` | Paid endpoint — returns `{ random: Math.random() }` for $0.001 USDC |\n\n## Key Details\n\n- **Network:** Base mainnet (`eip155:8453`)\n- **Currency:** USDC\n- **Facilitator:** [xpay.sh](https://facilitator.xpay.sh) (zero fees, gas\n sponsored)\n- **Seller price:** $0.001 per random number\n- **Screenshot price:** $0.01 per session (paid to Browserbase)\n\n## Wallet Setup\n\nTo run this yourself, you need a Base wallet with USDC and its private key.\nHere's how to set one up:\n\n1. Install the\n [Coinbase Wallet Chrome extension](https://chromewebstore.google.com/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad)\n (the iOS/Android app works too, but exporting the private key is easier from\n the extension)\n2. Create a new wallet\n3. Click **Buy** → **Add with Coinbase Onramp**\n4. **Important:** If you have a personal Coinbase account, fully log out of it\n first — otherwise the onramp may try to use your existing account and get\n confused\n5. Buy USDC on Base with a debit card (Apple Pay also works)\n6. Export the private key: Settings → Developer Settings → Show private key\n7. Add it as `X402_PRIVATE_KEY` in your val's environment variables\n8. **Note:** You may need to prefix the key with `0x` — the key exported from\n Coinbase Wallet doesn't include it, but viem expects it","createdAt",["D",1772927607231],"branchVersion","branchId","df2e7966-1a41-11f1-b341-42dde27851f2","id","df2e18a4-1a41-11f1-b341-42dde27851f2","x402-playground",["D",1772900564463],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Playing with internet-native payment protocols","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","df2e18a41a4111f1b34142dde27851f2","tursoHostname","df2e18a41a4111f1b34142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518064818],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_41":40,"_88":42,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":43,"_95":96},"isOwned",110,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_32":43,"_36":298,"_45":-5,"_46":25,"_47":48,"_49":48,"_50":51,"_52":53,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":299,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":300,"_81":301,"_83":302,"_85":25},"tree",[190,196,201,202,203,204],"files",[190,191,192,193,194,195,196,197,198,199,200,201,202,203,204],"counts",{"_178":60,"_179":180,"_181":60,"_182":183,"_184":185},"contents",[127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_41":172,"_32":173,"_30":174,"_136":-5,"_39":40,"_38":175,"_138":122,"_36":176,"_13":60,"_33":170,"_34":-5,"_24":25,"_143":-5,"_27":177},{"_41":165,"_32":166,"_30":167,"_136":-5,"_39":40,"_38":168,"_138":122,"_36":169,"_13":60,"_33":170,"_34":-5,"_24":25,"_143":-5,"_27":171},{"_41":161,"_32":28,"_30":31,"_136":-5,"_39":40,"_38":14,"_138":25,"_36":162,"_13":163,"_33":20,"_34":35,"_24":25,"_143":-5,"_27":164},{"_41":153,"_32":154,"_30":155,"_136":-5,"_39":40,"_38":156,"_138":122,"_36":157,"_13":158,"_33":20,"_34":159,"_24":25,"_143":-5,"_27":160},{"_41":145,"_32":146,"_30":147,"_136":-5,"_39":40,"_38":148,"_138":122,"_36":149,"_13":150,"_33":141,"_34":151,"_24":25,"_143":-5,"_27":152},{"_41":133,"_32":134,"_30":135,"_136":-5,"_39":40,"_38":137,"_138":122,"_36":139,"_13":140,"_33":141,"_34":142,"_24":25,"_143":-5,"_27":144},"2b05b35c-1a76-11f1-99da-42dde27851f2","seller.tsx","183f7a7c-1a68-11f1-a605-42dde27851f2","parentId",86,"latest",["D",1772923025534],7,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { paymentMiddleware, x402ResourceServer } from \"npm:@x402/hono\";\nimport { ExactEvmScheme } from \"npm:@x402/evm/exact/server\";\nimport { HTTPFacilitatorClient } from \"npm:@x402/core/server\";\nimport { getAddress } from \"./lib/x402.ts\";\n\n// --- Config ---\nconst network = \"eip155:8453\"; // Base mainnet\n\n// --- x402 seller middleware ---\nconst facilitator = new HTTPFacilitatorClient({\n url: \"https://facilitator.xpay.sh\",\n});\nconst resourceServer = new x402ResourceServer(facilitator)\n .register(network, new ExactEvmScheme());\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// Receiving wallet (always wallet 1)\nconst payTo = getAddress(\"1\");\n\napp.use(\n paymentMiddleware(\n {\n \"GET /api/random\": {\n accepts: {\n scheme: \"exact\",\n price: \"$0.001\",\n network,\n payTo,\n },\n description: \"A premium random number\",\n mimeType: \"application/json\",\n },\n },\n resourceServer,\n ),\n);\n\n// --- Homepage ---\napp.get(\"/\", (c) => {\n const endpoint = new URL(\"/api/random\", c.req.url).href;\n\n return c.html(\n \n \n x402 Random Number Seller\n

Diff · v95