手把手教你用 x402 协议实现加密内容付费墙

10 分钟在 Base Sepolia 测试网跑通整个加密货币付费墙：本地服务端 + 前端 + 钱包集成，一文掌握 HTTP 402 与区块链支付的核心细节。

文章导航

x402 是什么
核心组成与支付流程
动手实践：从代码到钱包
常见问题（FAQ）
可落地的商业场景与下一步扩展思路

x402 协议速读

x402 是一个基于 HTTP 402 Payment Required 状态码设计的 互联网原生支付协议。
它把“付费——获得资源”这一传统场景搬到区块链世界：

让服务器通过 402 响应主动向客户端发出“请先付款”
客户端用钱包签名并提交加密支付（通常 0.1 USDC 起步）
支付成功后，服务器即时返回受保护资源

➜ 整个过程 无需注册、不留邮箱、不记卡号，天然支持 微支付、小额 API 调用、AI 自动化购买 等新兴场景。
👉 想亲手跑一遍？从 Base 测试网 Trace 地址看看真实支付数据！

x402 的核心关键词

x402 协议
HTTP 402
付费墙 / 内容付费墙
加密支付 / 加密货币支付 / USDC 微支付
Base Sepolia / Base 主网
无 Gas 转账（ERC-3009 TransferWithAuthorization）

当你在谈 x402，你其实在谈两群人

角色（超简导图）	你用到的关键词
卖家（收费服务端）	API、网页、IaaS、页面级加密、即时到账
买家 / AI Agent（付费客户端）	钱包互操作、USDC 支付、无账号体验、秒级验证

x402 收入模型的四大出行场景

内容货币化：单篇深度报告、短视频、播客上传一次即可 “按次付费”。
API 用量付费：“调一调用一次”——比套餐更精准。
零信任 SaaS：客户只需捐款 0.05 USDC 即可体验命令行工具 5 分钟。
自动化 AI 机器人：脚本程序自己刷钱包完成数据采集、训练资源买入。

动手实践：10 分钟跑通完整流程

下面所有命令均可 复制粘贴 直接跑，配合 Chrome 钱包插件 就完成了。

✅ 1. 前置条件

Node.js ≥ v22
EVM 钱包（重点预埋：私钥里要有 USDC on Base Sepolia）
免费领测试网的 USDC → 前往 Circle 测试网水龙头
一条稳定的 Base RPC（公共节点或自建）

补充包
👉 锁定区块链之眼：探索实时链上数据更是一把密钥

✅ 2. 项目初始化

# 克隆仓库
git clone [email protected]:quiknode-labs/qn-guide-examples.git
cd sample-apps/coinbase-x402

# 安装依赖
npm i

# 配置收款地址
cp .env.local .env
# 编辑 .env 填写 WALLET_ADDRESS

✅ 3. 服务端（Express）版 5 行搞定付费墙

文件 server.js 重点：paymentMiddleware 一行即可把 /authenticate 升级成 “付费口”。

import { paymentMiddleware } from "x402-express";

app.use(
  paymentMiddleware(
    process.env.WALLET_ADDRESS,  // 你的收款地址
    {
      "GET /authenticate": {
        price: "$0.10",           // 触发支付金额
        network: "base-sepolia",
      },
    },
    { url: "https://x402.org/facilitator" }
  )
);

只要客户端首次访问 /authenticate 不带有效 X-PAYMENT 头，服务器就自动返回：

HTTP/1.1 402 Payment Required
{
  "maxAmountRequired": "0.10",
  "resource": "/authenticate",
  "description": "Access requires payment",
  "payTo": "0x...",
  "asset": "0x...USDC...",
  "network": "base-sepolia"
}

✅ 4. 客户端一键签名支付

打开首页后，点击 “Pay $0.10” 会跳到 authenticate.html。
浏览器通过 window.ethereum.enable() → 发送 TransferWithAuthorization 签名 → 带上 X-PAYMENT 头重试 REQUEST →

Status 200 OK，服务器立刻 302 到 /video-content，页面出现 Rick Astley 的示例视频 🎶。

✅ 5. 测试一键启动

node server.js
# 浏览器访问 localhost:4021

成功后，可在 Console 里看到用时 <2 秒的 “Request completed” 日志。

下一步还能做什么？

🔧 自定义定价：把 $0.10 改成 $0.001 + length/1000 MB，实现 动态付费。
🪞 限时令牌：付款后返回一个 15 分钟内有效的 JWT，防止同一笔签名被无限次重放。
🚀 上主网：仅改网络为 base-mainnet，保留整个代码逻辑。

六问六答（FAQ）

Q1：为什么一定要 Base 网络？

A：x402 官方促成者先在 Base 免费跑 USDC，免去气体费；主网场景下可拓展到任何 ERC-3009 支持的链。

Q2：我能否用 ETH 而不是 USDC？

A：技术上可行，但需要额外路由到 USDC → ETH 的交换逻辑，推荐前段直接收 USDC 省心省事。

Q3：支付失败钱包会扣费吗？

A：不会。签名前的 TransferWithAuthorization 只是 授权转帐；只有在服务器调用转账时才生效。

Q4：如何避免重放攻击？

A：ERC-3009 内部内置 nonce + validUntil 时间戳，任何已在链上使用的 signature 无法被再次调用。

Q5：移动端钱包能用吗？

A：只要支持 ethereum.request 的 WalletConnect 兼容钱包即可。测试 showModal 一键签名体验媲美桌面端。

Q6：跑在自己的 SSL 域名下，会遇到 CORS 吗？

A：后端处理 Access-Control-Allow-Origin: *，或 restrict 到白名单域名即可；所有 Web3 交互在浏览器环境完成，0 负担。

小结

用一行中间件把任意 Express 路由变成 加密付费墙，是 x402 带来的最大灵感；在同一套 JSON + HTTP 语义框架下，能用 加密货币支付 满足 微付费、AI 订阅、API 超细粒度计费 等一切想象场景。已经在本地跑通？👇
👉 现在就把 Demo 推到公网，第一次就能收真实 USDC！