x402

x402 Payments

x402 is an open-source protocol that turns the dormant HTTP 402 Payment Required status code into a fully-featured, on-chain payment layer for APIs, websites, and autonomous agents.

The thirdweb x402 client/server stack supports payments on 170+ EVM chains.

The payment token must support either:

• ERC-2612 permit (most ERC20 tokens)
• ERC-3009 sign with authorization (USDC on all chains)

import { useFetchWithPayment } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({ clientId: "your-client-id" });
 
function MyComponent() {
  const { fetchWithPayment, isPending } = useFetchWithPayment(client);
 
  const handleApiCall = async () => {
    // Handle wallet connection, funding, and payment errors automatically
    // Response is parsed as JSON by default
    const data = await fetchWithPayment(
      "https://api.example.com/paid-endpoint",
    );
    console.log(data);
  };
 
  return (
    <button onClick={handleApiCall} disabled={isPending}>
      {isPending ? "Loading..." : "Make Paid API Call"}
    </button>
  );
}

To make your API calls payable, use the settlePayment function in a middleware or endpoint:

import { createThirdwebClient } from "thirdweb";
import { facilitator, settlePayment } from "thirdweb/x402";
import { arbitrumSepolia } from "thirdweb/chains";
 
const client = createThirdwebClient({ secretKey: "your-secret-key" });
const thirdwebX402Facilitator = facilitator({
  client,
  serverWalletAddress: "0xYourWalletAddress",
});
 
export async function GET(request: Request) {
  const paymentData = request.headers.get("x-payment");
 
  const result = await settlePayment({
    resourceUrl: "https://api.example.com/premium-content",
    method: "GET",
    paymentData,
    payTo: "0xYourWalletAddress",
    network: arbitrumSepolia,
    price: "$0.01",
    facilitator: thirdwebX402Facilitator,
  });
 
  if (result.status === 200) {
    return Response.json({ data: "premium content" });
  } else {
    return Response.json(result.responseBody, {
      status: result.status,
      headers: result.responseHeaders,
    });
  }
}

You can also create middlewares to handle payment for multiple endpoints, see the server side docs for more details. The facilitator handles settling the payment onchain using your own server wallet.