👻

x402のUSDC決済をhonoでテストしてみた

に公開
TypeScript
Hono
USDC
x402
tech

はじめに

x402を実際にローカルでテストしながらどういうものか体験してみよう！という記事です。

基本的に

  • 有料化APIを提供（売る側）
  • 有料化APIを使う（買う側）
  • 支払い処理するファシリテーター（ガス代負担）

という3つの役割を理解しながら、x402-honoとx402-fetchで有料化APIを使う流れをテストするという内容となっています。（ファシリテーターはCoinbaseではなくPayAIを使います）

公式サイト

https://www.x402.org/
https://payai.network/

ソースコード

このテストのためにこちらのコードを利用します。
https://github.com/snc2work/x402-hono-seller-buyer-example

インストール

READMEに書いてある通りに行います。

git clone https://github.com/snc2work/x402-hono-seller-buyer-example.git
cd x402-hono-seller-buyer-example

yarn install

cp .env.sample .env

yarn dev

.envには、デフォルトで値がセットされているものを除くと、PAY_TO_ADDRESSとPRIVATE_KEYだけは自分のテストアドレスなどで用意してセットする必要があります。NETWORKはbase-sepoliaのままにしています。PRIVATE_KEYのほうは購入する側なので、base-sepoliaでのUSDCを少し入れておきます。送金時のガス代はファシリテーターが負担しますので不要です。
（base,base-sepolia,solana-devnetのいずれかで試すことができます）

動作確認

起動させたら、http://localhost:8787 をブラウザで開きます。

Call Paid API Directlyボタンをクリックすると、このような画面が表示されます。
有料API/api/premiumにアクセスしているのですが、ブラウザ経由だとこのようなUIが表示されますので、Wallet接続して手動で決済が可能です。

次に、Execute Payment & Call APIボタンをクリックすると、こちらはAPI /client/call-premiumにアクセスします。
これはさきほどの有料APIをx402-fetchのfetchWithPaymentによって自動支払いが行われるというものです。成功すると、このようにダミー値が返ってきます。

いくら払ったのか？というと、有料APIでは下記のようにpriceやnetworkやfacilitatorUrlが指定されています。なので、今回はbase-sepoliaの0.001 USDCを支払ったということになります。

const premiumPaymentMiddleware = paymentMiddleware(
  payTo as Address,
  {
    "/api/premium": {
      price: "$0.001",
      network,
    },
  },
  { url: facilitatorUrl }
);

ソースコードは100行程度のもので、実装自体は簡単です。

最後に

x402がどれくらい広がっているかを見るにはx402scanが便利です。
https://www.x402scan.com/

トップページ
全体のボリュームなど勢いやどういうサーバーが人気？などあらゆる角度からチェックできます。

ファシリテーターはCoinbaseが今のところ圧倒的シェアです。
今回利用したPayAIは３位ですね。

ネットワークでいうと、Solanaはこれから！という感じです。

ということで、
今回はさらっと実験する内容を記事にしてみました。

Discussion