Give your agent
a real browser.

import { Fetch, evm } from "mppx/client";
import type { Hex } from "viem";
import { privateKeyToAccount } from "viem/accounts";
import { chromium } from "playwright";

function required(name: string): string {
  const value = process.env[name]?.trim();
  if (!value) throw new Error(name + " is required");
  return value;
}

const endpoint =
  "https://app.popcorn.reclaimprotocol.org/v1/x402/sessions";
const expected = {
  network: "eip155:8453",
  chainId: 8453,
  asset: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" as Hex,
  payTo: "0x28f26a191D6bCa1FfD129261E726033188d65138" as Hex,
  amount: "10000"
};

const account = privateKeyToAccount(
  required("PAYER_PRIVATE_KEY") as Hex
);

const paidFetch = Fetch.from({
  methods: [evm.charge({
    account,
    authorization: { name: "USD Coin", version: "2" },
    currencies: [expected.asset],
    decimals: 6,
    maxAtomicAmount: expected.amount,
    networks: [expected.chainId]
  })],
  onChallenge: async (challenge, { createCredential }) => {
    const offer = challenge.request as Record<string, unknown>;
    if (offer.network !== expected.network ||
        String(offer.asset).toLowerCase() !== expected.asset.toLowerCase() ||
        String(offer.payTo).toLowerCase() !== expected.payTo.toLowerCase() ||
        offer.amount !== expected.amount) {
      throw new Error("Untrusted payment offer");
    }
    return await createCredential();
  }
});

const response = await paidFetch(endpoint, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Idempotency-Key": crypto.randomUUID()
  },
  body: "{}"
});
if (!response.ok) throw new Error("Request failed: " + response.status);

const session = await response.json();
const browser = await chromium.connectOverCDP(session.connectUrl);
console.log("Human view:", session.liveViewUrl);

This minimal example validates the current payment terms and opens one session. Before production, use the complete client guide for resource checks, safe retries, secret storage, and recovery after uncertain responses.

x402 is an HTTP payment standard. The first request returns “payment required”; the client signs the exact offer and repeats the same request.