Introduction
This application demonstrates how to implement a paywall for video content using the x402 payment protocol. The web app allows users to pay a small amount of cryptocurrency (USDC) to access paywalled video content, showcasing how micropayments can be integrated into content delivery systems.
This sample app is based on our comprehensive guide which provides detailed instructions on implementing x402 payment protocols for content monetization.
Tech Stack
- Backend Framework: Express.js
- Language: JavaScript
- Runtime Environment: Node.js
- Payment Protocol: x402
- Blockchain Network: Base Sepolia
功能
- x402 Payment Integration: Implements the x402 payment protocol for seamless micropayments.
- Video Content Paywall: Protects premium video content behind a payment barrier.
- USDC Payments: Accepts USDC payments on Base Sepolia testnet for easy testing.
- Automatic Authentication: Handles payment verification and content access automatically.
- Express.js Middleware: Uses x402-express middleware for easy integration.
- Wallet Integration: Compatible with EVM-compatible wallets.
- Testnet Support: Built for Base Sepolia testnet with easy mainnet migration.
入门指南
先决条件
To run this app, you'll need:
- Node.js (v22 or higher) installed on your system.
- An EVM-compatible wallet with Base Sepolia USDC for testing.
- A code editor or an IDE (e.g., VS Code)
Installation Dependencies
- Clone the repository to your local machine:
git clone https://github.com/quiknode-labs/qn-guide-examples.git
- Navigate to the project directory:
cd sample-dapps/coinbase-x402
- Install the necessary dependencies:
npm 安装
Setting Environment Variables
重命名 .env.local 到 .env and replace the placeholder values with your actual configuration:
WALLET_ADDRESS=your_ethereum_wallet_address
NODE_ENV=development
PORT=4021
注: Replace
WALLET_ADDRESSwith your actual wallet address where you want to receive payments.
Getting Test Tokens
To test the application, you'll need Base Sepolia USDC:
- Visit the Circle Faucet
- Select Base Sepolia in the network dropdown
- Request test USDC tokens
Running the Application
Run the development server:
npm run dev
Open http://localhost:4021/ in your browser to see the application.
Using the App
- Navigate to the application in your browser.
- Attempt to access the premium video content.
- Complete the payment process using your wallet.
- Access the unlocked video content after successful payment.
The application uses the x402-express middleware to protect the /authenticate endpoint, requiring payment before granting access to premium content.
工作原理
The application flow operates as follows:
Payment Protection: The server uses the x402-express middleware to protect the /authenticate endpoint, ensuring only paid users can access premium content.
Payment Process: When a user tries to access the protected endpoint, they are required to make a cryptocurrency payment through their connected wallet.
Content Access: After successful payment verification, the user is redirected to /video-content, where the premium video content is served.
Automatic Verification: The x402 protocol handles payment verification automatically, streamlining the user experience.
Customizing
The application can be easily customized for different use cases:
Price Configuration: To change the price of the video, modify the 价格 parameter in api/index.js.
Content Updates: To use a different video, update the video source in public/video-content.html.
Network Migration: To deploy on Base mainnet, update the network configuration in api/index.js. Note that you will need CDP API Keys and a different Facilitator for mainnet deployment.
Payment Tokens: The application can be modified to accept different ERC-20 tokens by updating the payment configuration.
预览
结论
The x402 payment protocol enables seamless integration of micropayments into web applications, making it ideal for content monetization, digital goods, and subscription services. This demo showcases how simple it can be to implement cryptocurrency-based paywalls for premium content.
Whether you're building a content platform, implementing premium features, or exploring new monetization models, the x402 protocol provides a foundation for integrating blockchain payments into your applications.
To learn more about implementing x402 payments and other blockchain integration solutions, contact us - we're excited to help you build the future of decentralized applications!
- 分叉该仓库
- 创建一个功能分支：git checkout -b feature/amazing-feature
- 提交您的更改：git commit -m "添加超棒的功能"
- 推送您的分支：git push origin feature/amazing-feature
- 提交一个拉取请求。
