Browser Client

Client integration

Use the browser client when you want fetch-like ergonomics with real x402 payment behavior, multi-wallet awareness, and explicit network control.

BrowserWalletsRetryRPC control

Use the browser client when your application already has wallet connectivity and you want fetch() to become payment-aware.

Best Fit

This path is ideal for:

consumer web apps
dashboards and internal tools
agent-adjacent browser UIs
flows where a human wallet confirms payment in the browser

Minimal Example

import { createX402Client } from '@dexterai/x402/client';
 
const client = createX402Client({
  wallets: {
    solana: solanaWallet,
    evm: evmWallet,
  },
});
 
const response = await client.fetch('https://api.example.com/protected');
const data = await response.json();

What This Does

When the endpoint returns 402 Payment Required, the client:

parses the payment requirements
picks a compatible wallet/network
signs the payment
retries the request automatically

Adding Custom RPC URLs

Use custom RPC URLs when you need explicit provider control instead of the Dexter defaults.

import { createX402Client } from '@dexterai/x402/client';
 
const client = createX402Client({
  wallets: {
    solana: solanaWallet,
    evm: evmWallet,
  },
  rpcUrls: {
    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://your-solana-rpc.example',
    'eip155:8453': 'https://mainnet.base.org',
  },
});

Recommended Production Pattern

Keep the x402 client near your API layer rather than scattering payment behavior across components.

import { createX402Client } from '@dexterai/x402/client';
 
export function createPaidApiClient({
  solanaWallet,
  evmWallet,
}: {
  solanaWallet?: unknown;
  evmWallet?: unknown;
}) {
  return createX402Client({
    wallets: {
      solana: solanaWallet,
      evm: evmWallet,
    },
    preferredNetwork: 'eip155:8453',
    maxAmountAtomic: '250000',
  });
}

That gives you one place to control:

wallet selection
preferred network
payment caps
RPC policy

Pre-Payment Inspection

Use onPaymentRequired to inspect or reject payments before signing. This is critical for budget controls, confirmation prompts, or logging.

const client = createX402Client({
  wallets: { solana: solanaWallet, evm: evmWallet },
  onPaymentRequired: async (requirements) => {
    const amount = Number(requirements.amount) / 1e6;
    if (amount > 1.0) return false; // Reject payments over $1
    console.log(`Paying $${amount} on ${requirements.network}`);
    return true;
  },
});

Return true to proceed with the payment, false to reject. The callback receives the full PaymentAccept object with amount, network, asset, and payTo address.

When To Use Something Else

Use @dexterai/x402 Package Overview if you need the full package map.
Use React when you want hook-based state and UI helpers.
Use Merchant Quickstart for the server side.
Use Access Pass when pay-per-request is too granular.
Use Sponsored Access if you need to consume sponsored recommendations from payments.

On this page