Quickstart

This guide takes you from zero to a first purchase with the Vault. You will store a test card, attach Agentcard to an agent browser, and let the user approve a payment with Face ID. The flow in one line: the user stores a card once → your agent shops in a browser and submits a placeholder card → Agentcard pauses the payment → the user approves on their phone → their device pays with the real card → your agent confirms the order. Step 1 happens once per user. Steps 2 to 4 happen on every purchase.

1. Get your credentials

You need an Agentcard organization client_id and client_secret. Create them in the dashboard and exchange them for an access token:

curl -X POST https://api.agentcard.sh/api/v2/oauth/token \
  -d grant_type=client_credentials \
  -d client_id=$AGENTCARD_CLIENT_ID \
  -d client_secret=$AGENTCARD_CLIENT_SECRET

Use the returned token as $ORG_TOKEN below. Sandbox credentials create sandbox sessions and sandbox authorizations, so start there.

2. Store a card

Create a vault session and send the user the link over whatever channel you already share with them (iMessage, WhatsApp, your app).

curl -X POST https://api.agentcard.sh/api/v2/vault_sessions \
  -H "Authorization: Bearer $ORG_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{}'

{
  "id": "vs_2q9d1x8f3k2m4t7w",
  "url": "https://vault.agentcard.sh/v?vs=vs_2q9d1x8f3k2m4t7w.3k1v…",
  "poll_interval": 3,
  "expires_at": "2026-08-28T21:00:00Z"
}

The user opens the link, types their card, and saves it with Face ID. The card is encrypted on their device before it leaves. When they finish, you receive a vault.session_linked webhook with their user_id, or you poll the session until its status is linked. Store that user_id, you need it on every purchase. For a test run, store a test card: 4242 4242 4242 4242, any future expiry, any CVC. More on adding cards →

3. Attach Agentcard to your browser

Install the SDK next to your browser provider. This example uses KERNEL; Browserbase and any CDP browser work the same way.

npm i @agent-cards/checkout@0.3.0 @onkernel/sdk playwright-core

Attach before your agent reaches the payment form. The SDK watches the page for the payment processor’s request.

import Kernel from '@onkernel/sdk';
import { chromium } from 'playwright-core';
import { VaultClient, attachToPlaywright } from '@agent-cards/checkout';

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

const kernel = new Kernel({ apiKey: process.env.KERNEL_API_KEY! });
const kernelBrowser = await kernel.browsers.create({ stealth: true });
const browser = await chromium.connectOverCDP(kernelBrowser.cdp_ws_url);
const context = browser.contexts()[0] ?? (await browser.newContext({ serviceWorkers: 'block' }));
const page = context.pages()[0] ?? (await context.newPage());

const checkout = await attachToPlaywright(page, {
  vault,
  user: 'usr_8f3k2m',            // from step 2
  merchant: 'shop.agentcard.sh', // what the user sees on the approval screen
  amountCents: 2306,
  currency: 'usd',
  onApprovalUrl: (url) => sendToUser(url), // deliver over your channel
});

4. Complete the purchase

Let your agent shop as usual. At checkout it should fill the card form with placeholder data (4242 4242 4242 4242) and submit. The Agentcard SDK intercepts the processor request and pauses it. onApprovalUrl fires with a link; send it to the user. They approve with Face ID, their device sends the real card to the processor, and the paused request resumes with the real response. Then confirm the order with the merchant before you tell the user anything:

await page.goto('https://shop.agentcard.sh');
await runAgentCheckout(page);   // your agent: add to cart, fill the form, submit

const result = await checkout.reconcile();
if (result.status === 'completed') {
  await notifyUser(`Order ${result.orderId} confirmed`);
}

Try it against a store that always works

shop.agentcard.sh is a demo store on Stripe test mode, kept running for exactly this rehearsal. Add a product, submit the card form with the placeholder card, approve on your phone, and the order completes with a real test-mode charge.

What’s next

Adding a card

Open vs connected sessions, webhooks vs polling, returning users.

Creating a cart

Browsers, SDK options, and the Purchase API alternative.

Completing a purchase

Approval, reconciliation, webhooks, supported processors.

Getting started

Vault

Issuing

1. Get your credentials

2. Store a card

3. Attach Agentcard to your browser

4. Complete the purchase

Try it against a store that always works

What’s next

Adding a card

Creating a cart

Completing a purchase

​1. Get your credentials

​2. Store a card

​3. Attach Agentcard to your browser

​4. Complete the purchase

​Try it against a store that always works

​What’s next

Adding a card

Creating a cart

Completing a purchase

1. Get your credentials

2. Store a card

3. Attach Agentcard to your browser

4. Complete the purchase

Try it against a store that always works

What’s next