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

> ## Agent Instructions
> Anchor Browser is cloud browser infrastructure for AI agents and automation: browser sessions you control over CDP or REST, natural-language web tasks, versioned automation tasks, managed authentication into third-party web apps (identities with MFA), persistent volumes and profiles, recordings, live view, batch sessions, webhooks, and network options including residential proxies, extra stealth, and captcha solving for sites that block standard browsers. AI agents should start at https://docs.anchorbrowser.io/for-agents, then get an API key with Agent Access at https://docs.anchorbrowser.io/quickstart/agent-access — no dashboard account required. Read those two pages before authentication or API calls.

# Agentcard

> Let an agent pay with your user's own card inside an Anchor session.

[Agentcard](https://agentcard.com) lets an agent running in an Anchor session pay with your user's real card. The card never reaches the agent, the task text, or your servers.

The agent types a placeholder card at checkout. The Agentcard SDK, attached to the session, holds the payment request, and the user approves it on their phone with a passkey. Their device swaps in the real card, and the order completes.

## What you need

* An Anchor API key, in `ANCHORBROWSER_API_KEY`.
* An Agentcard `client_id` and `client_secret`, from the [Agentcard dashboard](https://app.agentcard.sh).
* A user who has stored a card in the Agentcard Vault, and the `user_id` you received when they stored it. See [Adding a card](https://docs.agentcard.com/vault/adding-a-card).

## Install

```bash theme={null}
npm i @agent-cards/sdk anchorbrowser playwright
```

Use `@agent-cards/sdk` 0.20.0 or later. Earlier versions, published under the older name `@agent-cards/checkout`, refuse a page that has Anchor's extensions on it.

## Attach Agentcard to a session

Create a session, then attach Agentcard to its page before your agent reaches the payment form.

```ts theme={null}
import { createBrowser } from 'anchorbrowser';
import { VaultClient, attachToPlaywright } from '@agent-cards/sdk';

const { browser, session } = await createBrowser();
const page = browser.contexts()[0].pages()[0];

const vault = new VaultClient({
  clientId: process.env.AGENTCARD_CLIENT_ID!,
  clientSecret: process.env.AGENTCARD_CLIENT_SECRET!,
});
await vault.syncRegistry();

await attachToPlaywright(page, {
  vault,
  user: 'usr_8f3k2m',                       // the user whose card pays
  merchant: 'shop.agentcard.sh',            // the store's domain
  amount: 583,                              // cents, the total the user approves
  currency: 'usd',
  onApprovalUrl: (url) => sendToUser(url),  // your own push or in-app message
});

// Now let your agent shop on this page.
await page.goto('https://shop.agentcard.sh');
```

`syncRegistry()` loads the list of payment processors the SDK can hold. Call it once per client.

`onApprovalUrl` receives a link to the user's approval screen. Send it from your own app, and keep it out of your logs: only the user should open it.

## With Anchor's agent

Pass the same `sessionId` to `agentTask`, so the agent shops in the session Agentcard is attached to. A task created without `sessionId` runs in a new browser where the SDK is not attached, the store receives the placeholder card, and the purchase fails.

```ts theme={null}
import { createBrowser, agentTask, Sessions } from 'anchorbrowser';

const { browser, session } = await createBrowser();
const sessionId = session.data?.id;
if (!sessionId) throw new Error('Anchor returned no session id');

const placeholderCard = process.env.PLACEHOLDER_CARD_NUMBER!;

// Attach Agentcard to every page in the session, as above, before the task starts.

try {
  const result = await agentTask(
    `Buy one Enamel Camp Mug. Pay with card ${placeholderCard}, expiry 12/34, CVC 123, and click Pay once. ` +
      `The payment then waits for the cardholder to approve on their phone. Do not click Pay again. ` +
      `Wait until the page shows the order is paid.`,
    { sessionId, taskOptions: { url: 'https://shop.agentcard.sh' } },
  );
  console.log(result.data.result);
} finally {
  await Sessions.deleteSession({ path: { session_id: sessionId } }).catch(console.error);
}
```

Two things to tell the agent in the task: the placeholder card to type, and that the payment waits for the cardholder after Pay, so it does not click Pay a second time while the user approves. Keep the approval link out of the task, because the agent reads the task.

The agent's summary is not proof that the merchant took the order. Confirm the order with the merchant while the session is still open, then end the session.

## Full guide

The complete flow, including attaching to new tabs the agent opens and refusing card requests from tabs the SDK has not reached, is in Agentcard's docs: [Agentcard with Anchor](https://docs.agentcard.com/vault/integrations/agent-browsers/anchor).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.