Give your agent a browser.
Keep yours private.

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 example validates the current payment terms and opens one session. Use the complete x402 guide for retries, secret storage, and recovery after uncertain responses.