x402 Video Paywall Demo

A minimal, production-ready demonstration of a cryptocurrency-powered video paywall using the x402 payment protocol (USDC). Users complete an on-chain micropayment to unlock premium video content. The app is built with Express.js and targets the Base Sepolia test network for easy evaluation.

Contact

Platform	Link
📱 Telegram	t.me/novustch
📲 WhatsApp	wa.me/14105015750
💬 Discord	discordapp.com/users/985432160498491473

Feel free to reach out for implementation assistance or integration support.

Features

• ⚙️ Express.js backend with x402-express middleware
• 🔒 Paywalled route protecting premium video content
• 💳 Seamless client flow: pay → authenticate → view content
• 🧪 Base Sepolia testnet support for safe testing
• 🚀 Vercel-compatible deployment

Tech Stack

• Runtime: Node.js (ES Modules)
• Server: Express
• Payments: @coinbase/x402, x402-express, x402-fetch
• Frontend: Static assets in public/

Prerequisites

• Node.js v18+ (v22 recommended)
• An EVM-compatible wallet funded with Base Sepolia USDC (testnet)

Quick Start

1. Clone and install

git clone <your-repo-url>
cd <project-folder>
npm install

2. Configure environment

Create a .env file in the project root:

WALLET_ADDRESS=your_receiving_ethereum_address
NODE_ENV=development
PORT=4021

Notes:

• WALLET_ADDRESS is where payments are received.
• The demo uses the Base Sepolia test network by default.

3. Fund test USDC

• Request Base Sepolia USDC from the Circle faucet: https://faucet.circle.com/
• Select "Base Sepolia" in the network dropdown.

4. Run locally

npm run dev

Visit: http://localhost:4021

How It Works

1. The server applies paymentMiddleware to protect GET /authenticate with a price (default $0.10).
2. When a user initiates access, the middleware requests and verifies payment on Base Sepolia.
3. After a successful payment, the request is allowed and the user is redirected to /video-content to view the premium video.

Key endpoints:

• Public home: GET / → serves public/index.html
• Paywall entry: GET /authenticate → payment-gated, then redirects
• Premium content: GET /video-content

Configuration lives in api/index.js:

• price: adjust the payment amount
• network: currently base-sepolia for testnet
• facilitator: x402 facilitator URL

Scripts

npm run dev       # Start with nodemon for local development
npm start         # Start the server (production)
npm test          # Run the simple access test (if provided)

Customization

• Change price: update the price in api/index.js under paymentMiddleware.
• Change the video: edit public/video-content.html to swap the video source.
• Change the landing page: update public/index.html and public/style.css.
• Mainnet deployment: switch to Base mainnet and use the appropriate facilitator and API keys (ensure you understand the operational and security implications before accepting real funds).

Deployment (Vercel)

This project includes vercel.json for rewrites and exports the Express app for serverless deployment.

Basic flow:

1. Ensure environment variables (WALLET_ADDRESS, etc.) are set in Vercel.
2. Deploy via the Vercel CLI or dashboard.
3. Confirm the app loads and the paywall flow completes on your chosen network.

Troubleshooting

• Payment not detected:
  • Confirm you are on Base Sepolia and have test USDC.
  • Verify WALLET_ADDRESS in .env and restart the server after changes.
• 404 after payment:
  • Ensure the /authenticate route is still protected by the middleware and redirects to /video-content.
• Static assets not loading:
  • The server serves public/ statics; verify files exist and paths are correct.

Security Notes

• Treat .env values as secrets; do not commit them.
• For mainnet usage, implement robust logging, monitoring, and input validation.
• Validate facilitator configurations and trust boundaries before going to production.

License

MIT

Acknowledgements

• Built with the Coinbase x402 ecosystem: @coinbase/x402, x402-express, x402-fetch.