Skip to main content

​
Getting started with Fetch

Make x402 payments with a Fetch client in 2 minutes.
You can find the full code for this example here.

​
Step 1: Create a new client from the starter template

Use your favorite package manager.
npm (npx)
npx @payai/x402-fetch-starter my-first-client
pnpm
pnpm dlx @payai/x402-fetch-starter my-first-client
bun
bunx @payai/x402-fetch-starter my-first-client
The starter mirrors the upstream example and bootstraps a ready-to-run Fetch client.

​
Step 2: Preview the client code

​
Step 2: Set your environment variables

Open your generated project’s .env and set the following:
  • RESOURCE_SERVER_URL: Base URL of the server to call (e.g., http://localhost:4021)
  • ENDPOINT_PATH: Path to a paid endpoint (e.g., /weather)
  • PRIVATE_KEY: Hex EVM private key of the paying account
RESOURCE_SERVER_URL=http://localhost:4021
ENDPOINT_PATH=/weather
PRIVATE_KEY=0x...

​
Step 3: Preview the client code

This is the index.ts the starter generates. It loads your env, wraps fetch with x402, calls your endpoint, and logs both the JSON body and the decoded x-payment-response headers. 
import { config } from "dotenv";
import { Hex } from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { decodeXPaymentResponse, wrapFetchWithPayment } from "x402-fetch";

config();

const privateKey = process.env.PRIVATE_KEY as Hex;
const baseURL = process.env.RESOURCE_SERVER_URL as string; // e.g. https://example.com
const endpointPath = process.env.ENDPOINT_PATH as string; // e.g. /weather
const url = `${baseURL}${endpointPath}`; // e.g. https://example.com/weather

if (!baseURL || !privateKey || !endpointPath) {
  console.error("Missing required environment variables");
  process.exit(1);
}

const account = privateKeyToAccount(privateKey);

const fetchWithPayment = wrapFetchWithPayment(fetch, account);

fetchWithPayment(url, {
  method: "GET",
})
  .then(async response => {
    const body = await response.json();
    console.log(body);

    const paymentResponse = decodeXPaymentResponse(response.headers.get("x-payment-response")!);
    console.log(paymentResponse);
  })
  .catch(error => {
    console.error(error.response?.data?.error);
  });

​
Step 4: Run the client

npm run dev
Your client is now making x402 payments!

​
Step 5: Test the client

You can test your client against a local server by running the express example or the hono example. You can also test your client against a live merchant for free. You will receive a full refund of any tokens that you send, and PayAI will pay for the network fees.

​
Need help?

Join our Community

Have questions or want to connect with other developers? Join our Discord server.