Coinbase x402 -demo van de betaalmuur

Dit project laat zien hoe je een betaalmuur voor videocontent kunt implementeren met behulp van het x402 . Met deze webapp kunnen gebruikers een klein bedrag in cryptovaluta (USDC) betalen om toegang te krijgen tot videocontent achter een betaalmuur.

Author

Ferhat Kochan

App implementeren

Repo bekijken

Frontend-framework/bibliotheek:

Express.js

Taal:

JavaScript

Bouwtool/ontwikkelingsserver:

Node.js

Inleiding

Deze applicatie laat zien hoe je een betaalmuur voor videocontent kunt implementeren met behulp van het x402 . Met deze webapp kunnen gebruikers een klein bedrag in cryptovaluta (USDC) betalen om toegang te krijgen tot videocontent achter een betaalmuur, waarmee wordt gedemonstreerd hoe microbetalingen kunnen worden geïntegreerd in systemen voor de levering van content.

Deze voorbeeldapp is gebaseerd op onze uitgebreide handleiding, die gedetailleerde instructies bevat voor het implementeren x402 voor het genereren van inkomsten uit content.

Technologiestack

Backend-framework: Express.js
Taal: JavaScript
Uitvoeringsomgeving: Node.js
Betalingsprotocol: x402
Blockchain-netwerk: Base

Kenmerken

x402 integratie: Implementeert het x402 voor naadloze microbetalingen.
Betaalmuur voor videocontent: beschermt premium videocontent achter een betaalmuur.
USDC-betalingen: Ondersteunt USDC-betalingen op testnet Base testnet je dit eenvoudig kunt testen.
Automatische authenticatie: zorgt automatisch voor betalingscontrole en toegang tot inhoud.
Express.js-middleware: Maakt gebruik van x402middleware voor eenvoudige integratie.
Integratie met wallets: Compatibel met EVM-compatibele wallets.
Testnet : Ontwikkeld voor testnet Base testnet eenvoudige mainnet .

Aan de slag

Vereisten

Om deze app te gebruiken, heb je het volgende nodig:

Node.js (v22 of hoger) moet op uw systeem zijn geïnstalleerd.
Een EVM-compatibele wallet met Base USDC om mee te testen.
Een code-editor of een IDE (bijvoorbeeld VS Code)

Installatievereisten

Kloon de repository naar je lokale computer:

git clone https://github.com/quiknode-labs/qn-guide-examples.git

Ga naar de projectmap:

cdx402

Installeer de benodigde afhankelijkheden:

npm installeren

Omgevingsvariabelen instellen

Naam wijzigen .env.local naar .env en vervang de tijdelijke waarden door uw daadwerkelijke configuratie:

WALLET_ADDRESS=het_adres_van_je_Ethereum-portemonnee
NODE_ENV=development
POORT=4021

Opmerking: Vervangen WALLET_ADDRESS met het daadwerkelijke adres van je wallet waar je betalingen wilt ontvangen.

Testtokens ophalen

Om de applicatie te testen, heb je Base USDC nodig:

Bezoek de Circle Faucet
Selecteer Base in het vervolgkeuzemenu ‘Netwerk’
USDC-testtokens aanvragen

De applicatie starten

Start de ontwikkelingsserver:

npm run dev

Open http://localhost:4021/ in je browser om de applicatie te bekijken.

De app gebruiken

Ga in je browser naar de applicatie.
Probeer toegang te krijgen tot de premium videocontent.
Rond het betalingsproces af via je wallet.
Na een succesvolle betaling krijg je toegang tot de ontgrendelde videocontent.

De applicatie maakt gebruik van de x402-middleware om de /authenticate endpoint, waarbij betaling vereist is voordat toegang tot premium-inhoud wordt verleend.

Hoe het werkt

flow van de applicatie flow als volgt:

Betalingsbescherming: De server maakt gebruik van de x402 middleware om de /authenticate endpoint, zodat alleen betalende gebruikers toegang hebben tot premium-inhoud.

Betalingsproces: Wanneer een gebruiker probeert toegang te krijgen tot het beveiligde endpoint, moet hij of zij een betaling in cryptovaluta verrichten via de gekoppelde wallet.

Toegang tot inhoud: Nadat de betaling is geverifieerd, wordt de gebruiker doorgestuurd naar /video-inhoud, waar de premium videocontent wordt aangeboden.

Automatische verificatie: Het x402 zorgt automatisch voor de verificatie van betalingen, waardoor de gebruikerservaring wordt gestroomlijnd.

Aanpassen

De applicatie kan eenvoudig worden aangepast aan verschillende gebruikssituaties:

Prijsconfiguratie: Om de prijs van de video aan te passen, wijzig je de prijs parameter in api/index.js.

Inhoudsupdates: Als je een andere video wilt gebruiken, pas dan de videobron aan in public/video-content.html.

Netwerkmigratie: Om opmainnet Base mainnet te implementeren, moet je de netwerkconfiguratie bijwerken in api/index.js. Let op: voor mainnet heb je CDP-API-sleutels en een andere facilitator nodig.

Betalingstokens: De applicatie kan worden aangepast om verschillende ERC-20-tokens te accepteren door de betalingsconfiguratie bij te werken.

Voorbeeld

Conclusie

Het x402 maakt een naadloze integratie van microbetalingen in webapplicaties mogelijk, waardoor het bij uitstek geschikt is voor het genereren van inkomsten uit content, digitale producten en abonnementsdiensten. Deze demo laat zien hoe eenvoudig het kan zijn om op cryptovaluta gebaseerde betaalmuurtjes voor premiumcontent te implementeren.

Of je nu een contentplatform bouwt, premiumfuncties implementeert of nieuwe verdienmodellen verkent: het x402 biedt een basis voor het integreren van blockchainbetalingen in je applicaties.

Neem contact met ons op voor meer informatie over het implementeren x402 en andere oplossingen voor blockchain-integratie. We helpen u graag bij het vormgeven van de toekomst van gedecentraliseerde applicaties!

Bijdragen en feedback

We horen graag wat je ervan vindt en staan open voor alle bijdragen aan deze voorbeeldapp!

Als je problemen wilt melden of feedback wilt geven, maak dan een GitHub-issue aan in de qn-handleiding-voorbeelden repository.

Volg deze stappen om een bijdrage te leveren: