TypeScript SDK

wrapFetchWithPayment

Enables the payment of APIs using the x402 payment protocol.

This function wraps the native fetch API to automatically handle 402 Payment Required responses by creating and sending a payment header. It will:

Make the initial request
If a 402 response is received, parse the payment requirements
Verify the payment amount is within the allowed maximum
Create a payment header using the provided wallet client
Retry the request with the payment header

Example


import { wrapFetchWithPayment } from "thirdweb/x402";
import { createThirdwebClient } from "thirdweb";
import { createWallet } from "thirdweb/wallets";
 
const client = createThirdwebClient({ clientId: "your-client-id" });
const wallet = createWallet("io.metamask");
await wallet.connect({ client });
 
const fetchWithPay = wrapFetchWithPayment(fetch, client, wallet);
 
// Make a request that may require payment
const response = await fetchWithPay(
  "https://api.example.com/paid-endpoint",
);


function wrapFetchWithPayment(
  fetch: {
    (input: URL | RequestInfo, init?: RequestInit): Promise<Response>;
    (input: RequestInfo, init?: RequestInit): Promise<Response>;
    (
      input: string | Request | URL,
      init?: RequestInit,
    ): Promise<Response>;
  },
  client: ThirdwebClient,
  wallet: Wallet,
  options?: {
    maxValue?: bigint;
    paymentRequirementsSelector?: (
      paymentRequirements: Array<{
        asset: string;
        description: string;
        extra?: Record<string, any>;
        maxAmountRequired: string;
        maxTimeoutSeconds: number;
        mimeType: string;
        network: string;
        outputSchema?: Record<string, any>;
        payTo: string;
        resource: string;
        scheme: "exact" | "upto";
      }>,
    ) =>
      | undefined
      | {
          asset: string;
          description: string;
          extra?: Record<string, any>;
          maxAmountRequired: string;
          maxTimeoutSeconds: number;
          mimeType: string;
          network: string;
          outputSchema?: Record<string, any>;
          payTo: string;
          resource: string;
          scheme: "exact" | "upto";
        };
    storage?: AsyncStorage;
  },
): (input: RequestInfo, init?: RequestInit) => Promise<Response>;

Parameters

The fetch function to wrap (typically globalThis.fetch)

Type


let fetch: {
  (input: URL | RequestInfo, init?: RequestInit): Promise<Response>;
  (input: RequestInfo, init?: RequestInit): Promise<Response>;
  (
    input: string | Request | URL,
    init?: RequestInit,
  ): Promise<Response>;
};

The thirdweb client used to access RPC infrastructure

Type


let client: {
  readonly clientId: string;
  readonly secretKey: string | undefined;
} & Readonly<ClientOptions>;

The wallet used to sign payment messages

Type


let wallet: {
  getAdminAccount?: () => Account | undefined;
  getAuthToken?: () => string | null;
  getConfig: () => CreateWalletArgs<TWalletId>[1];
  id: TWalletId;
  onConnectRequested?: () => Promise<void>;
  subscribe: WalletEmitter<TWalletId>["subscribe"];
  autoConnect: (
    options: WalletAutoConnectionOption<TWalletId>,
  ) => Promise<Account>;
  connect: (
    options: WalletConnectionOption<TWalletId>,
  ) => Promise<Account>;
  disconnect: () => Promise<void>;
  getAccount: () => undefined | Account;
  getChain: () =>
    | undefined
    | Readonly<ChainOptions & { rpc: string }>;
  switchChain: (chain: Readonly) => Promise<void>;
};

Type


let options: {
  maxValue?: bigint;
  paymentRequirementsSelector?: (
    paymentRequirements: Array<{
      asset: string;
      description: string;
      extra?: Record<string, any>;
      maxAmountRequired: string;
      maxTimeoutSeconds: number;
      mimeType: string;
      network: string;
      outputSchema?: Record<string, any>;
      payTo: string;
      resource: string;
      scheme: "exact" | "upto";
    }>,
  ) =>
    | undefined
    | {
        asset: string;
        description: string;
        extra?: Record<string, any>;
        maxAmountRequired: string;
        maxTimeoutSeconds: number;
        mimeType: string;
        network: string;
        outputSchema?: Record<string, any>;
        payTo: string;
        resource: string;
        scheme: "exact" | "upto";
      };
  storage?: AsyncStorage;
};

Returns


let returnType: (
  input: RequestInfo,
  init?: RequestInit,
) => Promise<Response>;

A wrapped fetch function that handles 402 responses automatically