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

# x402

> Pay x402-protected endpoints with a Crossmint wallet.

This guide shows how to pay <a href="https://www.x402.org/" target="_blank">x402</a>-protected endpoints using a Crossmint wallet. The example uses the `@x402/core` client library to handle the 402 negotiation and payment flow automatically.

## Prerequisites

* A Crossmint EVM wallet on Base with USDC. See the [Wallets quickstart](/agents/stablecoin-wallet-quickstart).
* The agent must be authorized as a signer on the wallet. See [Authorize the Agent](/agents/payment-methods/stablecoin-wallets/authorize-agent).

## Install dependencies

<CodeGroup>
  ```bash npm theme={null}
  npm i @crossmint/client-sdk-react-ui @crossmint/wallets-sdk @x402/core @x402/evm viem
  ```

  ```bash yarn theme={null}
  yarn add @crossmint/client-sdk-react-ui @crossmint/wallets-sdk @x402/core @x402/evm viem
  ```

  ```bash pnpm theme={null}
  pnpm add @crossmint/client-sdk-react-ui @crossmint/wallets-sdk @x402/core @x402/evm viem
  ```

  ```bash bun theme={null}
  bun add @crossmint/client-sdk-react-ui @crossmint/wallets-sdk @x402/core @x402/evm viem
  ```
</CodeGroup>

## Pay an x402 endpoint

```tsx x402-payment.tsx theme={null}
import { EVMWallet } from "@crossmint/client-sdk-react-ui";
import { x402Client, x402HTTPClient, wrapFetchWithPayment } from "@x402/core/client";
import { ExactEvmScheme } from "@x402/evm/exact/client";
import type { Hex } from "viem";
import { CrossmintWallets, createCrossmint } from "@crossmint/wallets-sdk";

const crossmint = createCrossmint({
    apiKey: "<your-server-api-key>",
});

const crossmintWallets = CrossmintWallets.from(crossmint);

const wallet = await crossmintWallets.getWallet(
    "<wallet-address>",
    { chain: "base" }
);

// Use the agent signer
await wallet.useSigner({
    type: "server",
    secret: process.env.CROSSMINT_SIGNER_SECRET,
});

const evmWallet = EVMWallet.from(wallet);

const x402Signer = {
  address: evmWallet.address as `0x${string}`,
  async signTypedData(typedData: any) {
    const { signature } = await evmWallet.signTypedData({
      ...typedData,
      chain: "base",
    });
    return signature as Hex;
  },
};

const client = new x402Client();
client.register("eip155:*", new ExactEvmScheme(x402Signer));

const fetchWithPayment = wrapFetchWithPayment(fetch, client);

const response = await fetchWithPayment("https://api.example.com/protected", {
  method: "GET",
});

const responseText = await response.text();
console.log("Response:", response.status, responseText);

if (response.ok) {
  const httpClient = new x402HTTPClient(client);
  const paymentResponse = httpClient.getPaymentSettleResponse(
    (name) => response.headers.get(name)
  );
  console.log("Payment settled:", paymentResponse);
}
```

## How the code works

<Steps>
  <Step title="Create an EVM signer from the Crossmint wallet">
    The `EVMWallet.from(wallet)` call wraps the Crossmint wallet into an EVM-compatible interface. A custom signer object is created that delegates `signTypedData` calls to the Crossmint wallet, which signs on Base using the agent's delegated permissions.
  </Step>

  <Step title="Register the signer with the x402 client">
    The `x402Client` is initialized and the EVM scheme is registered for all EIP-155 chains (`eip155:*`). This tells the x402 client how to sign payments on any EVM chain.
  </Step>

  <Step title="Wrap fetch with x402 payment handling">
    `wrapFetchWithPayment` returns a modified `fetch` function that automatically handles the 402 flow: if a request returns `402 Payment Required`, it reads the payment terms, signs a stablecoin payment, and retries with the payment proof attached.
  </Step>

  <Step title="Verify the payment receipt">
    After a successful response, `getPaymentSettleResponse` extracts the settlement receipt from the response headers, confirming the payment was processed onchain.
  </Step>
</Steps>

## Learn more

<CardGroup cols={1}>
  <Card title="Wallets quickstart" icon="wallet" href="/agents/stablecoin-wallet-quickstart">
    Set up a stablecoin wallet for your agent.
  </Card>
</CardGroup>