メインコンテンツへスキップ
サンプルアプリに戻る

Coinbase x402 Video Paywall Demo

This project 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.

アイコンの展開
アプリをデプロイする
GitHubのアイコン
リポジトリを表示
フロントエンドフレームワーク／ライブラリ：
Express.js
言語：
JavaScript
ビルドツール／開発サーバー：
Node.js
サンプルアプリのプレビュー

はじめに

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.

技術スタック​


  • 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.

はじめに

前提条件​

このアプリを実行するには、以下のものが必要です：


  • Node.js (v22 or higher) installed on your system.
  • An EVM-compatible wallet with Base Sepolia USDC for testing.
  • コードエディタまたはIDE（例：VS Code）

インストールに必要な依存関係​


  1. リポジトリをローカルマシンにクローンします：
git https://github.com/quiknode-labs/qn-guide-examples.git をクローンする

  1. プロジェクトディレクトリに移動します：
cd sample-dapps/coinbase-x402

  1. 必要な依存関係をインストールします：
npm install

環境変数の設定​

名前を変更する .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_ADDRESS with your actual wallet address where you want to receive payments.

Getting Test Tokens​

To test the application, you'll need Base Sepolia USDC:


  1. Visit the Circle Faucet
  2. Select Base Sepolia in the network dropdown
  3. Request test USDC tokens

アプリケーションの実行​

開発サーバーを実行します：

npm run dev

Open http://localhost:4021/ in your browser to see the application.

アプリの使用方法


  1. Navigate to the application in your browser.
  2. Attempt to access the premium video content.
  3. Complete the payment process using your wallet.
  4. 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 price 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!

投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックの共有を行うには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  1. リポジトリをフォークする
  2. フィーチャーブランチを作成する：
    git checkout -b feature/amazing-feature
  3. 変更をコミットします：
    git commit -m "素晴らしい機能を追加"
  4. ブランチをプッシュしてください：
    git push origin feature/amazing-feature
  5. プルリクエストを作成してください。
その他のサンプルアプリを見る
AML and CFT Compliant dApp
This application enables secure ETH staking with integrated compliance features. Built on Base and compatible with any Ethereum-based network, it leverages Chainlink Functions and Quicknode’s Risk Assessment API to ensure only low-risk wallets can participate in the staking pool.
AML and CFT Compliant dApp
Coinbase x402 Paywall
This crypto paywall demo shows how to monetize video content using blockchain payments via the x402 payment protocol. Built with Express.js, it requires users to pay USDC cryptocurrency to access premium videos on Base Sepolia testnet.
Coinbase x402 Paywall
AI Powered DeFi Yield Optimizer
This app teaches you how to integrate the Aerodrome Swap API with an AI model to create a personalized DeFi yield optimizer and analytics dashboard for Aerodrome.
AI Powered DeFi Yield Optimizer