Anchor

npm i @agent-cards/sdk anchorbrowser playwright

import { createBrowser } from 'anchorbrowser';
import { VaultClient, attachToPlaywright } from '@agent-cards/sdk';

const { browser, session } = await createBrowser();
const sessionId = session.data?.id;
if (!sessionId) throw new Error('Anchor returned no session id');
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();

const checkout = await attachToPlaywright(page, {
  vault,
  user: 'usr_8f3k2m',
  merchant: 'shop.agentcard.sh',
  amount: 583,
  currency: 'usd',
  onApprovalUrl: (url) => sendToUser(url),
});

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

Service workers are active; use a checkout context created with serviceWorkers: "block".

npm i @agent-cards/sdk@latest

import { createBrowser, agentTask, Sessions } from 'anchorbrowser';
import type { Page } from 'playwright';

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

// A tab the SDK has not attached to yet refuses card requests. Once the SDK
// is attached to a tab, its own route decides for that tab.
const attached = new WeakSet<Page>();
await context.route(
  (url) => vault.isCardRequest(url.toString()),
  (route) => {
    const request = route.request();
    const page = request.serviceWorker() ? null : request.frame().page();
    const held = page !== null && attached.has(page);
    return !held && vault.isCardRequest(request.url(), request.method()) ? route.abort() : route.fallback();
  },
);

// Attach the SDK to every page, and wait until it is attached.
const attach = (page: Page) =>
  attachToPlaywright(page, {
    vault,
    user: 'usr_8f3k2m',
    merchant: 'shop.agentcard.sh',
    amount: 583,
    currency: 'usd',
    onApprovalUrl: (url) => sendToUser(url),
  }).then((checkout) => {
    attached.add(page);
    return checkout;
  });
const checkouts = await Promise.all(context.pages().map(attach));
// The agent can open the checkout in a new tab, so attach to every page it opens.
// A tab the SDK cannot attach to is closed, so the agent never pays in it.
context.on('page', (page) => {
  attach(page).then(
    (checkout) => checkouts.push(checkout),
    () => page.close().catch(console.error),
  );
});

const card = process.env.PLACEHOLDER_CARD_NUMBER!;
try {
  const result = await agentTask(
    `Buy one Enamel Camp Mug. Pay with card ${card}, 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);
  // Confirm the order with the merchant here, while the session is open.
} finally {
  // Log a failed cleanup instead of throwing it: thrown here, it would replace
  // the task's result, and a caller who retries would pay again.
  await Sessions.deleteSession({ path: { session_id: sessionId } }).catch(console.error);
}

  Order paid successfully. One Enamel Camp Mug was purchased for $5.83. I clicked Pay only once and waited for the cardholder approval flow; the page now shows “Order paid ✓”.

import { Sessions } from 'anchorbrowser';

try {
  // Your agent shops on the page, and you confirm the order with the merchant.
} finally {
  await Sessions.deleteSession({ path: { session_id: sessionId } }).catch(console.error);
}