> playground
x402 Playground
Edit the config below. Hit "Try it" to simulate the full 402 payment flow.
app/api/premium/route.ts
How x402 Works
The HTTP 402 payment protocol in 6 steps
1Client requests resource
Normal GET/POST to your API endpoint
2Server returns 402
Response includes price, wallet, network info
3Client sends USDC
On-chain payment via Base L2 (~2 seconds)
4Client retries with receipt
X-PAYMENT header contains tx proof
5Server verifies on-chain
Facilitator confirms the payment
6Content delivered
200 OK with the premium response
Client-side integration example
// Making a paid API request with x402
async function fetchPremiumData() {
// Step 1: Try the request
const res = await fetch('/api/premium')
if (res.status === 402) {
// Step 2: Parse payment requirements
const { accepts } = await res.json()
// Step 3: Send USDC payment
const tx = await sendUSDC({
to: accepts.payTo,
amount: accepts.maxAmountRequired,
network: accepts.network,
})
// Step 4: Retry with payment proof
const paid = await fetch('/api/premium', {
headers: { 'X-PAYMENT': tx.receipt },
})
// Step 5: Receive content
return paid.json()
}
return res.json()
}This is a simulation. No real payments are made. Get the full kit to implement real x402 payments.
> Get full kit for $49 ->