Démonstration x402 « Paywall » de Coinbase x402
Ce projet montre comment mettre en place un système d'accès payant pour du contenu vidéo à l'aide du protocole x402 . L'application web permet aux utilisateurs de payer une petite somme en cryptomonnaie (USDC) pour accéder à du contenu vidéo soumis à un accès payant.
Introduction
Cette application montre comment mettre en place un système d'accès payant pour du contenu vidéo à l'aide du protocolex402 . L'application web permet aux utilisateurs de payer une petite somme en cryptomonnaie (USDC) pour accéder à du contenu vidéo protégé par un système d'accès payant, illustrant ainsi comment les micropaiements peuvent être intégrés dans les systèmes de diffusion de contenu.
Cette application d'exemple s'appuie sur notre guide complet, qui fournit des instructions détaillées sur la mise en œuvre des protocoles x402 pour la monétisation de contenu.
Pile technologique
- Framework backend : Express.js
- Langage : JavaScript
- Environnement d'exécution : Node.js
- Protocole de paiement : x402
- Réseau blockchain : Base
Caractéristiques
- Intégrationx402 : met en œuvre le protocole x402 pour permettre des micropaiements en toute fluidité.
- Accès payant aux contenus vidéo: protège les contenus vidéo premium en les rendant accessibles uniquement moyennant paiement.
- Paiements en USDC: prend en charge les paiements en USDC sur testnet Base testnet faciliter les tests.
- Authentification automatique: gère automatiquement la vérification des paiements et l'accès au contenu.
- Middleware Express.js: utilise le middleware x402 pour une intégration simplifiée.
- Intégration avec les portefeuilles: compatible avec les portefeuilles compatibles EVM.
- Testnet : Conçu pour testnet Base , testnet mainnet aisée mainnet .
Pour commencer
Conditions préalables
Pour utiliser cette application, vous aurez besoin de :
- Node.js (v22 ou version ultérieure) doit être installé sur votre système.
- Un portefeuille compatible EVM avec des USDC Base à des fins de test.
- Un éditeur de code ou un IDE (par exemple, VS Code)
Prérequis d'installation
- Clonez le dépôt sur votre ordinateur local :
git clone https://github.com/quiknode-labs/qn-guide-examples.git
- Accédez au répertoire du projet :
cdx402
- Installez les dépendances nécessaires :
npm installer
Configuration des variables d'environnement
Renommer .env.local à .env et remplacez les valeurs par défaut par votre configuration réelle :
WALLET_ADDRESS=adresse_de_votre_portefeuille_Ethereum
NODE_ENV=développement
PORT=4021
Remarque: Remplacer
ADRESSE_DE_PORTEFEUILLEen indiquant l'adresse réelle de votre portefeuille sur laquelle vous souhaitez recevoir les paiements.
Obtenir des jetons de test
Pour tester l'application, vous aurez besoin de Base USDC :
- Découvrez le robinet Circle
- Sélectionnez « Base » dans le menu déroulant « Réseau »
- Demander des jetons USDC à des fins de test
Exécution de l'application
Lancez le serveur de développement :
npm exécuter en mode développement
Ouvrez la page http://localhost:4021/ dans votre navigateur pour accéder à l'application.
Utilisation de l'application
- Accédez à l'application dans votre navigateur.
- Essayez d'accéder au contenu vidéo premium.
- Finalisez le paiement à l'aide de votre portefeuille.
- Accédez au contenu vidéo débloqué une fois le paiement effectué.
L'application utilise le middleware x402 pour protéger le /authentifier endpoint, exigeant un paiement avant d'accorder l'accès au contenu premium.
Comment ça marche ?
flow de l'application flow comme suit :
Protection des paiements: Le serveur utilise le x402 un middleware destiné à protéger le /authentifier endpoint, garantissant ainsi que seuls les utilisateurs payants puissent accéder au contenu premium.
Processus de paiement: lorsqu'un utilisateur tente d'accéder au endpoint protégé, il doit effectuer un paiement en cryptomonnaie via son portefeuille connecté.
Accès au contenu: Une fois le paiement validé, l'utilisateur est redirigé vers /contenu-vidéo, où sont diffusés les contenus vidéo premium.
Vérification automatique: le x402 gère automatiquement la vérification des paiements, ce qui simplifie l'expérience utilisateur.
Personnalisation
L'application peut être facilement personnalisée en fonction de différents cas d'utilisation :
Configuration des prix: Pour modifier le prix de la vidéo, modifiez le prix paramètre dans api/index.js.
Mises à jour du contenu: Pour utiliser une autre vidéo, mettez à jour la source vidéo dans public/video-content.html.
Migration du réseau: Pour effectuer un déploiement surmainnet Base , mettez à jour la configuration réseau dans api/index.js. Notez que vous aurez besoin de clés API CDP et d'un autre facilitateur pour mainnet .
Jetons de paiement: l'application peut être modifiée pour accepter différents jetons ERC-20 en mettant à jour la configuration des paiements.
Aperçu
Conclusion
Le protocole x402 permet une intégration transparente des micropaiements dans les applications web, ce qui en fait la solution idéale pour la monétisation de contenus, les biens numériques et les services d'abonnement. Cette démonstration montre à quel point il peut être simple de mettre en place des systèmes d'accès payant basés sur les cryptomonnaies pour les contenus premium.
Que vous développiez une plateforme de contenu, mettiez en place des fonctionnalités premium ou exploriez de nouveaux modèles de monétisation, le x402 vous offre une base solide pour intégrer les paiements via la blockchain à vos applications.
Pour en savoir plus sur la mise en œuvre x402 et d'autres solutions d'intégration de la blockchain, contactez-nous: nous serons ravis de vous aider à construire l'avenir des applications décentralisées !
- Créer une branche du dépôt
- Créer une branche de fonctionnalité :git checkout -b feature/amazing-feature
- Validez vos modifications :git commit -m "Ajout d'une fonctionnalité géniale"
- Publiez votre branche :git push origin feature/amazing-feature
- Créez une demande de fusion.
