{"_id":"@aeon-ai-pay/paywall","name":"@aeon-ai-pay/paywall","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"@aeon-ai-pay/paywall","version":"2.1.0","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/index.d.ts","type":"module","keywords":["x402","paywall","payment","http-402"],"license":"Apache-2.0","author":{"name":"Coinbase Inc."},"repository":{"type":"git","url":"git+https://github.com/coinbase/x402.git"},"description":"x402 Payment Protocol Paywall UI","devDependencies":{"@craftamap/esbuild-plugin-html":"^0.9.0","@eslint/js":"^9.24.0","@types/node":"^22.13.4","@types/react":"^19","@types/react-dom":"^19","@typescript-eslint/eslint-plugin":"^8.29.1","@typescript-eslint/parser":"^8.29.1","buffer":"^6.0.3","esbuild":"^0.25.4","eslint":"^9.24.0","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^50.6.9","eslint-plugin-prettier":"^5.2.6","prettier":"3.5.2","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.4.0","tsx":"^4.19.2","typescript":"^5.7.3","vite":"^6.2.6","vite-tsconfig-paths":"^5.1.4","vitest":"^3.0.5","@aeon-ai-pay/svm":"2.1.0","@aeon-ai-pay/evm":"2.1.0"},"dependencies":{"@scure/base":"^1.2.6","@solana-program/compute-budget":"^0.8.0","@solana-program/token":"^0.5.1","@solana-program/token-2022":"^0.4.2","@solana/kit":"^2.1.1","@solana/transaction-confirmation":"^2.1.1","@solana/wallet-standard-features":"^1.3.0","@tanstack/react-query":"^5.90.7","@wagmi/connectors":"^5.8.1","@wagmi/core":"^2.17.1","@wallet-standard/app":"^1.1.0","@wallet-standard/base":"^1.1.0","@wallet-standard/features":"^1.1.0","viem":"^2.39.3","wagmi":"^2.17.1","zod":"^3.24.2","@aeon-ai-pay/core":"2.1.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"exports":{".":{"import":{"types":"./dist/esm/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/cjs/index.d.cts","default":"./dist/cjs/index.cjs"}},"./evm":{"import":{"types":"./dist/esm/evm/index.d.ts","default":"./dist/esm/evm/index.js"},"require":{"types":"./dist/cjs/evm/index.d.cts","default":"./dist/cjs/evm/index.cjs"}},"./svm":{"import":{"types":"./dist/esm/svm/index.d.ts","default":"./dist/esm/svm/index.js"},"require":{"types":"./dist/cjs/svm/index.d.cts","default":"./dist/cjs/svm/index.cjs"}}},"publishConfig":{"access":"public"},"scripts":{"start":"tsx --env-file=.env index.ts","test":"vitest run","test:watch":"vitest","build":"tsup","build:paywall":"tsx src/evm/build.ts && tsx src/svm/build.ts","watch":"tsc --watch","format":"prettier -c .prettierrc --write \"**/*.{ts,js,cjs,json,md}\"","format:check":"prettier -c .prettierrc --check \"**/*.{ts,js,cjs,json,md}\"","lint":"eslint . --ext .ts --fix","lint:check":"eslint . --ext .ts"},"_id":"@aeon-ai-pay/paywall@2.1.0","bugs":{"url":"https://github.com/coinbase/x402/issues"},"homepage":"https://github.com/coinbase/x402#readme","_integrity":"sha512-noe1zVLXQ+x+V9WXTU51ljYAsCgGQyXcLJOhlmtq0RLl2XJWtR1JuV2/PUUTR1BkqAC5Q1+mehzePfvVpUrGOw==","_resolved":"/private/var/folders/rr/hyts0bs54zn73fgjjlld0tvm0000gn/T/1984c58db283f4a86ebc78563491a5b1/aeon-ai-pay-paywall-2.1.0.tgz","_from":"file:aeon-ai-pay-paywall-2.1.0.tgz","_nodeVersion":"25.8.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-noe1zVLXQ+x+V9WXTU51ljYAsCgGQyXcLJOhlmtq0RLl2XJWtR1JuV2/PUUTR1BkqAC5Q1+mehzePfvVpUrGOw==","shasum":"9c1353eb2bbfb38a5a4bb64f84087ceaa2bc87a9","tarball":"https://registry.npmjs.org/@aeon-ai-pay/paywall/-/paywall-2.1.0.tgz","fileCount":22,"unpackedSize":21945172,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHIWDVzCfhjV4DHxFKX67Z7roBfZZLjgDGrhIsl/36cIAiAqw8IcPgsgS+6ogQPHiEyYKmutraZGR9iL+fPuOggRHA=="}]},"_npmUser":{"name":"aeon_project","email":"code@alchemypay.org"},"directories":{},"maintainers":[{"name":"aeon_project","email":"code@alchemypay.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/paywall_2.1.0_1775096338459_0.09204761949060658"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-02T02:18:58.384Z","2.1.0":"2026-04-02T02:18:58.851Z","modified":"2026-04-02T02:18:59.036Z"},"maintainers":[{"name":"aeon_project","email":"code@alchemypay.org"}],"description":"x402 Payment Protocol Paywall UI","homepage":"https://github.com/coinbase/x402#readme","keywords":["x402","paywall","payment","http-402"],"repository":{"type":"git","url":"git+https://github.com/coinbase/x402.git"},"author":{"name":"Coinbase Inc."},"bugs":{"url":"https://github.com/coinbase/x402/issues"},"license":"Apache-2.0","readme":"# @x402/paywall\n\nModular paywall UI for the x402 payment protocol with support for EVM and Solana networks.\n\n## Features\n\n- Pre-built paywall UI out of the box\n- Wallet connection (MetaMask, Coinbase Wallet, Phantom, etc.)\n- USDC balance checking\n- Multi-network support (EVM + Solana)\n- Tree-shakeable - only bundle what you need\n- Fully customizable via builder pattern\n\n## Installation\n\n```bash\npnpm add @x402/paywall\n```\n\n## Bundle Sizes\n\nChoose the import that matches your needs:\n\n| Import | Size | Networks | Use Case |\n|--------|------|----------|----------|\n| `@x402/paywall` | 3.5MB | EVM + Solana | Multi-network apps |\n| `@x402/paywall/evm` | 3.4MB | EVM only | Base, Ethereum, Polygon, etc. |\n| `@x402/paywall/svm` | 1.0MB | Solana only | Solana apps |\n\n## Usage\n\n### Option 1: EVM Only\n\n```typescript\nimport { createPaywall } from '@x402/paywall';\nimport { evmPaywall } from '@x402/paywall/evm';\n\nconst paywall = createPaywall()\n  .withNetwork(evmPaywall)\n  .withConfig({\n    appName: 'My App',\n    testnet: true\n  })\n  .build();\n\n// Use with Express\napp.use(paymentMiddleware(routes, facilitators, schemes, undefined, paywall));\n```\n\n### Option 2: Solana Only\n\n```typescript\nimport { createPaywall } from '@x402/paywall';\nimport { svmPaywall } from '@x402/paywall/svm';\n\nconst paywall = createPaywall()\n  .withNetwork(svmPaywall)\n  .withConfig({\n    appName: 'My Solana App',\n    testnet: true\n  })\n  .build();\n```\n\n### Option 3: Multi-Network\n\n```typescript\nimport { createPaywall } from '@x402/paywall';\nimport { evmPaywall } from '@x402/paywall/evm';\nimport { svmPaywall } from '@x402/paywall/svm';\n\nconst paywall = createPaywall()\n  .withNetwork(evmPaywall)   // First-match priority\n  .withNetwork(svmPaywall)   // Fallback option\n  .withConfig({\n    appName: 'Multi-chain App',\n    testnet: true\n  })\n  .build();\n```\n\n## Configuration\n\n### PaywallConfig Options\n\n```typescript\ninterface PaywallConfig {\n  appName?: string;              // App name shown in wallet connection\n  appLogo?: string;              // App logo URL\n  currentUrl?: string;           // URL of protected resource\n  testnet?: boolean;             // Use testnet (default: true)\n}\n```\n\n## How It Works\n\n### First-Match Selection\n\nWhen multiple networks are registered, the paywall uses **first-match selection**:\n\n1. Iterates through `paymentRequired.accepts` array\n2. Finds the first payment requirement that has a registered handler\n3. Uses that handler to generate the HTML\n\n**Example:**\n```typescript\n// Server returns multiple options\n{\n  \"accepts\": [\n    { \"network\": \"solana:5eykt...\", ... },  // First\n    { \"network\": \"eip155:8453\", ... }       // Second\n  ]\n}\n\n// If both handlers registered, Solana is selected (it's first in accepts)\nconst paywall = createPaywall()\n  .withNetwork(evmPaywall)\n  .withNetwork(svmPaywall)\n  .build();\n```\n\n### Supported Networks\n\n**EVM Networks** (via `evmPaywall`):\n- CAIP-2: `eip155:*` (e.g., `eip155:8453` for Base, `eip155:84532` for Base Sepolia)\n\n**Solana Networks** (via `svmPaywall`):\n- CAIP-2: `solana:*` (e.g., `solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp` for mainnet)\n\n## With HTTP Middleware\n\n### Express\n\n```typescript\nimport express from 'express';\nimport { paymentMiddleware } from '@x402/express';\nimport { createPaywall } from '@x402/paywall';\nimport { evmPaywall } from '@x402/paywall/evm';\n\nconst app = express();\n\nconst paywall = createPaywall()\n  .withNetwork(evmPaywall)\n  .withConfig({ appName: 'My API' })\n  .build();\n\napp.use(paymentMiddleware(\n  { \"/api/premium\": { price: \"$0.10\", network: \"eip155:84532\", payTo: \"0x...\" } },\n  facilitators,\n  schemes,\n  undefined,\n  paywall\n));\n```\n\n### Automatic Detection\n\nIf you provide `paywallConfig` without a custom paywall, `@x402/core` automatically:\n1. Tries to load `@x402/paywall` if installed\n2. Falls back to basic HTML if not installed\n\n```typescript\n// Simple usage - auto-detects @x402/paywall\napp.use(paymentMiddleware(routes, facilitators, schemes, {\n  appName: 'My App',\n  testnet: true\n}));\n```\n\n## Custom Network Handlers\n\nYou can create custom handlers for new networks:\n\n```typescript\nimport { createPaywall, type PaywallNetworkHandler } from '@x402/paywall';\n\nconst suiPaywall: PaywallNetworkHandler = {\n  supports: (req) => req.network.startsWith('sui:'),\n  generateHtml: (req, paymentRequired, config) => {\n    return `<!DOCTYPE html>...`;  // Your custom Sui paywall\n  }\n};\n\nconst paywall = createPaywall()\n  .withNetwork(evmPaywall)\n  .withNetwork(svmPaywall)\n  .withNetwork(suiPaywall)  // Custom handler\n  .build();\n```\n\n## Development\n\n### Build\n\n```bash\npnpm build:paywall  # Generate HTML templates\npnpm build          # Build TypeScript\n```\n\n### Test\n\n```bash\npnpm test           # Run unit tests\n```","readmeFilename":"README.md","_rev":"1-64729760c03041a1fc97ade4cc10365c"}