> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payai.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Fetch

## Getting started with Fetch

Make x402 payments with a Fetch client in 2 minutes.

<Note>You can find the full code for this example [here](https://github.com/x402-foundation/x402/tree/0dfd3e683f1563543bd62a3ad84cbc6851d4054b/examples/typescript/clients/fetch).</Note>

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

Use your favorite package manager.

##### npm (npx)

```bash theme={null}
npx @payai/x402-fetch-starter my-first-client
```

##### pnpm

```bash theme={null}
pnpm dlx @payai/x402-fetch-starter my-first-client
```

##### bun

```bash theme={null}
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](http://localhost:4021))
* ENDPOINT\_PATH: Path to a paid endpoint (e.g., /weather)
* PRIVATE\_KEY: Hex EVM private key of the paying account

```env theme={null}
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.

```ts theme={null}
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

```bash theme={null}
npm run dev
```

<Check>
  Your client is now making x402 payments!
</Check>

### Step 5: Test the client

You can test your client against a local server by running the [express example](/v1/x402/servers/typescript/express) or the [hono example](/v1/x402/servers/typescript/hono).

You can also test your client against a [live merchant](https://x402.payai.network) for free. You will receive a full refund of any tokens that you send, and PayAI will pay for the network fees.

## Need help?

<Card title="Join our Community" icon="discord" href="https://discord.gg/eWJRwMpebQ">
  Have questions or want to connect with other developers? Join our Discord server.
</Card>