簡単にUSDC決済できるx402とは？
はじめに
５月７日にCoinbaseから決済プロトコル「x402」が、オープンな規格として公開されました。
これはHTTPステータス402 Payment Requiredコードを中心に設計されています。
このx402を使用すると、あらゆるWebサービスで、速度、プライバシー、効率性を実現する暗号ネイティブ支払いを使用して、応答を提供する前に支払いを要求することができます。
日頃からステーブルなUSDCで決済が簡単に実装できたらいいなって思ってましたけど、このx402という決済プロトコルの発表で、お、これは！と思ったので、そのざっくり説明と実際にデモにならってNext.jsで実装してVercelにデプロイしてテストしたことなどを書いています。
公式サイト
主な特徴
- オープンプロトコル
- HTTPネイティブ
- チェーンおよびトークンに依存しない
- ブロックチェーンの複雑性を抽象化（ファシリテーター）
- 高速決済
- プロトコルとしての手数料なし
- マシン間の支払い（AIエージェント）に対応
- フリクションレス（アカウント作成や個人情報の提供を顧客やエージェントに要求しない）
使いみち
- APIアクセス時に決済が行える
- Webページの購入時に決済が行える
コミュニケーションフロー
クライアントとサーバーとのフローはこんな感じです。
販売側のデモを試す
ユーザーにプロテクトされたページを購入させるデモがあるので試しました。
自分で新規にNext.jsプロジェクトを作成して実装しyarn devしました。
実装ですが、middleware.tsがメインです。あとはただのコンテンツページです。
facilitatorが支払い処理をしてくれるので、単純な実装で済んでしまいます。
yarn add x402-next
import { Address } from "viem";
import { paymentMiddleware, Network, Resource } from "x402-next";
const facilitatorUrl = process.env.FACILITATOR_URL as Resource;
const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address;
const network = process.env.NETWORK as Network;
export const middleware = paymentMiddleware(
payTo,
{
"/protected": {
price: "$0.01",
network,
config: {
description: "Access to protected content",
},
},
},
{
url: facilitatorUrl,
}
);
// Configure which paths the middleware should run on
export const config = {
matcher: ["/protected/:path*"],
};
.env.local
NETWORK=base-sepolia
RESOURCE_WALLET_ADDRESS=受け取りアドレス
FACILITATOR_URL=https://x402.org/facilitator
動作確認
トップページ
ボタンをクリックすると、このような画面が表示されます。
Metamask接続すると、購入できるボタンが表示されます。
Pay Nowボタン押してWalletで承認。2秒くらいで決済が完了し、保護されたページが表示されました。
最後に（１０月１日更新）
今回はテストネットのbase sepoliaで試しました。いやぁ、簡単ですね。
以前にSolanaで似たような決済を実装しましたが、ちゃんとやると細かい部分が面倒でしたので、そういった面倒な部分もなく実装できるのはさすがだなと思いました。
Facilitatorが支払い処理をしてくれて、ユーザーはガスレス（ガス代無料）なのが良いですね。（EIP-3009を採用。Solanaで言うとfree payer）
今回利用したx402-nextのほか、expressやhonoなども対応していて、クライアント側はfetchやaxiosに対応しています。
サンプルコードはPythonとTypescriptでは下記が参考になります。
Pythonでは、FastAPIで試して動作するのを確認しました。
個人的にずっと待っているSolana対応ですが、今のところx402コミュニティによって運営されているRustベースのファシリテーター（https://facilitator.x402.rs）や、サードパーティのファシリテーター（https://payai.network/）、などでは対応しているようです。
あと、GoogleのAP2でも決済にx402が採用されているようです。これによってAIエージェント間のコマースが加速していくのでしょうか？
Discussion