簡単にUSDC決済できるx402とは？
はじめに
５月７日にCoinbaseから決済プロトコル「x402」が、オープンな規格として公開されました。
これはHTTPステータス402 Payment Requiredコードを中心に設計されています。
このx402を使用すると、あらゆるWebサービスで、速度、プライバシー、効率性を実現する暗号ネイティブ支払いを使用して、応答を提供する前に支払いを要求することができます。
日頃からステーブルなUSDCで決済が簡単に実装できたらいいなって思ってましたけど、このx402という決済プロトコルの発表で、お、これは！と思ったので、そのざっくり説明と実際にデモにならってNext.jsで実装してVercelにデプロイしてテストしたことなどを書いています。
公式サイト
主な特徴
- オープンプロトコル
- HTTPネイティブ
- チェーンおよびトークンに依存しない
- ブロックチェーンの複雑性を抽象化（ファシリテーター）
- 高速決済
- プロトコルとしての手数料なし
- マシン間の支払い（AIエージェント）に対応
- フリクションレス（アカウント作成や個人情報の提供を顧客やエージェントに要求しない）
使いみち
- APIアクセス時に決済が行える
- Webページの購入時に決済が行える
コミュニケーションフロー
クライアントとサーバーとのフローはこんな感じです。
販売側のデモを試す
ユーザーにプロテクトされたページを購入させるデモがあるので試しました。
自分で新規にNext.jsプロジェクトを作成して実装しyarn devしましたが、購入処理では500 Internal Server Errorになりました。どうもローカルだとダメなようです。Vercelにデプロイしたら動作しました。
実装ですが、middleware.tsがメインです。あとはただのコンテンツページです。
とても単純な実装で済んでしまいます。
import { Address } from "viem";
import { paymentMiddleware, Network, Resource } from "x402-next";
const facilitatorUrl = process.env.NEXT_PUBLIC_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=受け取りアドレス
NEXT_PUBLIC_FACILITATOR_URL=https://x402.org/facilitator
動作確認
トップページ
ボタンをクリックすると、このような画面が表示されます。
Metamask接続すると、購入できるボタンが表示されます。
Pay Nowボタン押してWalletで承認。2秒くらいで決済が完了し、保護されたページが表示されました。
最後に
今回はテストネットのbase sepoliaで試しました。いやぁ、簡単ですね。
以前にSolanaで似たような決済を実装しましたが、ちゃんとやると意外に細かい部分が面倒でしたので、そういった面倒な部分もなく実装できるのはさすがだなと思いました。
おそらく今後は、FastAPI対応してきたり、Solanaでの実装方法などもガイドが出てくるのかなと思います。
Discussion