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

# Browserbase

> Use Agentcard with Browserbase to let your agent make purchases with your users' cards.

[Browserbase](https://www.browserbase.com) runs the browser your agent shops in. The Agentcard SDK attaches to it through Playwright over the session's `connectUrl`, the same way it attaches to any CDP browser.

You need a user with a card in the Vault first. See [Adding a card](/vault/adding-a-card).

## Install

```bash theme={null}
npm i @agent-cards/checkout@0.3.0 @browserbasehq/sdk playwright-core
```

## Connect and attach

```ts theme={null}
import Browserbase from '@browserbasehq/sdk';
import { chromium } from 'playwright-core';
import { VaultClient, attachToPlaywright } from '@agent-cards/checkout';

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });
const session = await bb.sessions.create({ projectId: process.env.BROWSERBASE_PROJECT_ID! });
const browser = await chromium.connectOverCDP(session.connectUrl);

// Reuse the default context and page so the session recording stays intact.
const context = browser.contexts()[0];
const page = context.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.example.com',
  amountCents: 2306,
  currency: 'usd',
  onApprovalUrl: (url) => sendToUser(url),
});

// Now let the agent shop.
await page.goto('https://shop.example.com');
```

Attach before the agent reaches the payment form. Browserbase's default context does not block service workers, so if the SDK refuses to attach, create the session's browser context with `serviceWorkers: 'block'` or check the merchant's site for an active service worker.

After the run, the session recording is at `https://browserbase.com/sessions/${session.id}`, which is useful for reviewing a checkout that needed a human.

## Next

The rest of the flow is identical to any Vault purchase: placeholder card, Face ID approval, real card swapped in, confirm with the merchant. Follow the [Vault Quickstart](/vault/quickstart) from step 4, or read [Completing a purchase](/vault/completing-a-purchase).