
x402 演示站点深度解析基于 Next.js 构建 HTTP 402 支付门禁与 Facilitator 后端【免费下载链接】x402A payments protocol for the internet. Built on HTTP.项目地址: https://gitcode.com/GitHub_Trending/x4/x402本篇技术指南围绕仓库中的 typescript/site 演示站点展开讲解如何用 Next.js 落地 x402 支付协议从支付中间件配置、Facilitator 后端验证与结算到生态页伙伴入驻规范。读完本文你将掌握一套可复制、可运行的 x402 应用骨架并能把自己的项目接入 x402 生态目录。x402 支付协议流程示意图片来源typescript/site/app/assets/展示了资源请求、402 响应、支付与验证结算的闭环。站点定位x402 协议的可运行参考实现x402 是一个围绕 HTTP 402 状态码构建的互联网原生支付开放协议。本仓库中的typescript/site是一个基于 Next.js 的演示站点它的定位不是空壳宣传页而是一个真实可运行的 x402 参考实现站点包含现代 UI、一个负责支付验证与结算的 Facilitator 后端以及一条受支付门禁保护的真实路由。该站点主要演示了四类能力支付门禁内容访问Payment-gated content access访问受保护路由前必须先完成支付实时支付验证Real-time payment verification由 Facilitator 校验支付签名与链上状态支付结算Payment settlement验证通过后 Facilitator 在链上完成资金转移多链集成Integration with EVM, SVM, and AVM blockchains同一套门禁同时支持以太坊虚拟机EVM、Solana 虚拟机SVM与 Algorand 虚拟机AVM实际源码中还进一步扩展到了 Aptos 与 Stellar。站点核心特性可概括为三点支付中间件通过简单配置即可保护路由、Facilitator 后端处理验证与结算、实时演示用一条受保护路由体验完整支付流程。项目结构一张站点地图在 typescript/site 目录下各目录职责如下app/— Next.js 应用代码app/facilitator/— 支付 Facilitator 的 API 路由verify、settle、supported三个端点app/protected/— 受支付门禁保护的示例路由page.tsxapp/ecosystem/— 生态伙伴目录与展示页proxy.ts— x402 支付中间件配置注意README 中写作middleware.ts当前仓库基于 Next.js 16 实际使用的是 proxy.ts二者角色一致public/logos/— 生态伙伴 Logo 资源目录lib/、types/、components/— UI 组件、动画与类型声明从 package.json 可以看到站点通过 pnpm workspace 直接依赖仓库内的x402/core、x402/evm、x402/svm、x402/avm、x402/aptos、x402/stellar、x402/next、x402/paywall与x402/extensions等包均以workspace:*引用同时使用viem、wagmi、solana/kit、aptos-labs/ts-sdk等链交互库UI 层采用 React 19 Tailwind CSS 4。快速开始本地跑起演示站点前置条件Node.js 20一个持有测试网 USDC 的钱包用于测试支付流程安装依赖在仓库根目录使用 pnpm 安装站点作为 workspace 的一部分pnpm install配置环境变量在typescript/site/.env中配置以下变量FACILITATOR_URLyour_facilitator_url RESOURCE_EVM_ADDRESSyour_evm_wallet_address RESOURCE_SVM_ADDRESSyour_solana_wallet_address RESOURCE_AVM_ADDRESSyour_algorand_wallet_address FACILITATOR_EVM_PRIVATE_KEYyour_evm_private_key FACILITATOR_SVM_PRIVATE_KEYyour_solana_private_key FACILITATOR_AVM_PRIVATE_KEYyour_algorand_private_key结合 proxy.ts 与 app/facilitator/index.ts 的源码各变量的实际作用如下环境变量用途是否必需FACILITATOR_URL支付验证/结算所指向的 Facilitator 服务地址用于创建HTTPFacilitatorClient必需缺失时启动会打印FACILITATOR_URL environment variable is requiredRESOURCE_EVM_ADDRESS受保护资源的 EVM 收款地址对应 Base Sepoliaeip155:84532必需RESOURCE_SVM_ADDRESSSolana 收款地址对应 Solana Devnetsolana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1必需RESOURCE_AVM_ADDRESSAlgorand 收款地址对应 Algorand Testnet可选未配置时门禁将自动跳过 AVM 网络可选FACILITATOR_EVM_PRIVATE_KEY用于构造 EVM 签名器privateKeyToAccount Viem 客户端必需缺失会抛错FACILITATOR_SVM_PRIVATE_KEYSolana 私钥Base58 编码用于构造 SVM 签名器必需缺失会抛错FACILITATOR_AVM_PRIVATE_KEYAlgorand 私钥可选配置后才注册 AVM 方案FACILITATOR_APTOS_PRIVATE_KEYAptos Ed25519 私钥可选配置后才注册 Aptos 方案FACILITATOR_STELLAR_PRIVATE_KEY/FACILITATOR_STELLAR_FEEBUMP_PRIVATE_KEYStellar 签名者私钥逗号分隔可配多个与可选 fee bump 签名者可选启动开发服务器pnpm dev浏览器打开http://localhost:3000即可看到站点首页访问受保护路由即可体验支付流程。支付门禁的实现原理从 402 到放行README 给出了四步流程用户访问受保护路由中间件检查是否存在有效支付若无有效支付服务器返回HTTP 402客户端完成支付后重试请求Facilitator 后端验证支付并放行访问。在 proxy.ts 中可以看到这套流程的完整落地。中间件通过x402/next的paymentProxyFromConfig构建核心配置是路由到支付参数的映射const x402PaymentProxy paymentProxyFromConfig( { /protected: { accepts: [ { payTo: evmPayeeAddress, scheme: exact, price: $0.01, network: EVM_NETWORK, // eip155:84532 Base Sepolia }, { payTo: svmPayeeAddress, scheme: exact, price: $0.01, network: SVM_NETWORK, // solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1 Solana Devnet }, // AVM 仅在配置了收款地址时才加入 accepts 列表 ], description: Access to protected content, }, }, facilitatorClient, // HTTPFacilitatorClient [ { network: EVM_NETWORK, server: new ExactEvmScheme() }, { network: SVM_NETWORK, server: new ExactSvmScheme() }, ], undefined, // paywallConfig paywall, // paywall provider );几个值得注意的细节accepts数组即支付门禁的“价目表”每条记录声明收款地址payTo、支付方案scheme: exact即精确金额方案、价格price: $0.01与链标识network。协议实现层面exact 方案要求支付金额与报价完全一致相关内容可对照 specs/schemes/exact/scheme_exact.md 阅读。收款地址来自环境变量RESOURCE_EVM_ADDRESS、RESOURCE_SVM_ADDRESS、RESOURCE_AVM_ADDRESS分别注入三条链的收款人。Paywall 提供商的组合createPaywall().withNetwork(evmPaywall).withNetwork(svmPaywall)仅当配置了 AVM 地址时才追加avmPaywall同时通过.withConfig({ appName: x402 Demo, appLogo: /logos/x402-examples.png })定制支付弹窗的品牌信息。地理围栏代理还基于 Vercel 的x-vercel-ip-country请求头实现了地区屏蔽命中KP、IR、CU、SY等国家或乌克兰特定区域UA的43/14/09时直接返回 HTTP 451。匹配范围config.matcher覆盖除_next/static、_next/image、favicon.ico之外的所有路径含根路径/即整个站点都处于支付中间件的管辖之下。受保护路由本身在 app/protected/page.tsx支付成功后展示一段内嵌音乐播放器——这正是“支付门禁内容”的演示形态。Facilitator 后端验证、结算与能力发现Facilitator 是 x402 体系中负责链上验证与结算的服务端组件。站点的 Facilitator 后端位于app/facilitator/由三个 API 路由组成。初始化多链方案注册app/facilitator/index.ts 是核心它构建并懒加载一个x402Facilitator实例通过模块级_facilitatorPromise保证只初始化一次适配 Next.js 模块加载EVM用 Viem 构造walletClient publicActions通过toFacilitatorEvmSigner封装readContract、verifyTypedData、writeContract、sendTransaction、waitForTransactionReceipt、getCode等能力SVM用solana/kit从 Base58 私钥创建签名者toFacilitatorSvmSigner自动管理各 Solana 网络的 RPCAVM / Aptos / Stellar均为可选注册分别通过toFacilitatorAvmSigner、toFacilitatorAptosSigner、createEd25519Signer构造方案注册register(eip155:84532, new ExactEvmScheme(evmSigner))注册 v2 精确方案registerV1(base-sepolia, new ExactEvmSchemeV1(evmSigner))兼容 v1 请求同时还注册了UptoEvmScheme“不超过上限”的弹性支付方案协议细节见 specs/schemes/upto/scheme_upto.mdGas 赞助扩展registerExtension(EIP2612_GAS_SPONSORING)与createErc20ApprovalGasSponsoringExtension(erc20ApprovalSigner)支持 Permit2/EIP-2612 与 ERC-20 授权的 Gas 赞助能力相关扩展说明见 python/x402/extensions/eip2612_gas_sponsoring 与 typescript/packages/extensions/src。verify / settle / supported 三个端点verify接收{ paymentPayload, paymentRequirements }调用facilitator.verify(...)返回VerifyResponse。源码对请求体解析失败返回 400 与invalid_json原因和缺失参数missing_parameters做了显式错误处理同时提供GET返回端点自描述文档。验证过程中的onAfterVerify钩子会自动记录已验证支付并抽取发现信息。settle同样接收支付载荷与支付要求调用facilitator.settle(...)完成链上结算。钩子会自动执行onBeforeSettle校验支付是否已验证、检查验证超时未通过则抛出Settlement aborted:中止与onAfterSettle/onSettleFailure清理跟踪状态对于钩子中止路由会返回结构化的SettleResponse而非 500。supported调用facilitator.getSupported()返回当前 Facilitator 支持的全部支付方案/网络清单用于协议发现。这一后端结构也是 specs/transports-v2/http.md 所描述的 Facilitator HTTP 接口的具体实现客户端持支付载荷向/verify请求验证向/settle请求结算。生态目录将你的项目加入 x402 Ecosystem站点app/ecosystem/下的生态页汇集了 x402 生态建设者任何人都可以申请入驻。流程为Fork 仓库 → 创建伙伴数据目录 → 添加 Logo → 编写 metadata.json → 提交 Pull Request。1. 创建目录与素材在app/ecosystem/partners-data/[your-project-slug]/下新建目录并把项目 Logo 放入public/logos/。2. 普通项目 metadata.json{ name: Your Project Name, description: A brief description of your project and how it uses x402, logoUrl: /logos/your-logo.png, websiteUrl: https://your-project.com, category: Client-Side Integrations }category必须匹配下列分类之一Client-Side Integrations、Services/Endpoints、Infrastructure Tooling、Learning Community Resources。3. Facilitator 专用模板Facilitator 需要在上述字段基础上增加facilitator对象声明服务的基础地址、支持的网络、方案、资产与端点能力{ name: Your Facilitator Name, description: A brief description of your facilitator service and supported networks, logoUrl: /logos/your-logo.png, websiteUrl: https://your-facilitator.com, category: Facilitators, facilitator: { baseUrl: https://your-facilitator.com, networks: [base, base-sepolia, polygon, solana], schemes: [exact], assets: [ERC20], supports: { verify: true, settle: true, supported: true, list: false } } }该结构的类型定义见 app/ecosystem/data.ts 中的FacilitatorInfo接口其中supports的四个布尔值分别表示是否提供verify验证、settle结算、supported能力发现与list列表发现端点。仓库中现成的真实示例可供对照例如x402-facilitator/metadata.json官方测试网 Facilitator支持base-sepolia与solana-devnet两个网络、exact方案verify/settle/supported均开启openfacilitator/metadata.json开源 Facilitator覆盖base、solana网络资产为USDCmcp-example/metadata.json属于Infrastructure Tooling的 MCP 服务器参考实现axios-fetch-clients/metadata.json属于Client-Side Integrations的 Axios/Fetch 客户端参考实现。4. 各类别准入要求Client-Side Integrations必须展示可运行的 x402 集成应包含文档、快速开始或代码示例链接需要持续维护。Services/Endpoints必须有可用的主网集成应提供 API 文档应保持 99% 可用性。Infrastructure Tooling应提供完整文档应展示对 x402 生态的明确价值。Learning Community Resources必须包含 GitHub 模板或启动套件应在社交媒体Twitter/X、Discord 等分享必须包含清晰的安装说明应展示实际用例。Facilitators必须实现 x402 Facilitator API 规范应至少支持一种支付方案如exact必须提供可用的verify和/或settle端点应保持高可用与可靠性必须包含完整的 API 文档。5. 审核流程提交 PR 后维护团队会在5 个工作日内完成审核期间可能要求补充信息或修改。审核通过后项目将被加入生态页并可能围绕你的用例开展联合推广。工程化细节与部署typescript/site/next.config.ts 中有几处与链 SDK 相关的关键配置serverExternalPackages将aptos-labs/ts-sdk、aptos-labs/aptos-client及它们的传递依赖got、keyv、cacheable-request外部化避免与 Next.js 打包冲突turbopack.rules与webpack配置均注册了svgr/webpack以支持 SVG 导入为组件redirects将/protocol、/foundation、/build等历史路径重定向到首页rewrites将/build映射到/build-with-us。部署层面站点可通过 package.json 提供的脚本管理pnpm dev本地开发、pnpm build构建、pnpm start生产启动以及面向 Vercel 的pnpm build:vercel先安装根 workspace 依赖再构建站点。由于这是标准的 Next.js 应用你可以直接部署到 Vercel 或任意支持 Next.js 的平台。深入阅读如果想继续研究该站点背后的协议与实现仓库内相关资源包括协议规范specs/x402-specification-v2.md、specs/transports-v2/http.md、specs/transports-v2/mcp.md支付方案exact 系列 specs/schemes/exact/scheme_exact.md、upto 系列 specs/schemes/upto/scheme_upto.mdTypeScript 核心库typescript/packages/core 与机制实现 typescript/packages/mechanisms其他语言实现go/README.md、python/x402/README.md、java/README.md站点更新记录typescript/site/CHANGELOG-v2.md总而言之typescript/site既是 x402 协议的一次完整工程化示范也是一份“可复制的最小可行实现”支付门禁用声明式配置即可挂载Facilitator 后端通过插件式注册覆盖多链多方案生态页则以结构化的metadata.json承接社区共建——如果你想在自己的 Next.js 应用里接入 x402直接以此为起点是最快的路径。【免费下载链接】x402A payments protocol for the internet. Built on HTTP.项目地址: https://gitcode.com/GitHub_Trending/x4/x402创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考