Complete a purchase on a Shopify store from an agent browser

const context = await browser.newContext({ serviceWorkers: 'block' });
const page = await context.newPage();

await page.goto('https://www.goodandbeautiful.com/products/high-school-biology-answer-key');
await page.locator('form[action="/cart/add"] button[type=submit]').first().click();
await page.goto('https://www.goodandbeautiful.com/cart');

const cookie = page.locator('button:has-text("Decline"), button:has-text("Accept")').first();
if (await cookie.isVisible()) await cookie.click();

await page.getByRole('button', { name: /check ?out/i }).filter({ visible: true }).first().click();
await page.waitForURL(/\/checkouts\//);

await page.fill('#email', buyer.email);
await page.locator('#basic-creditCards').check({ force: true });

const field = (name) => page.locator(`[name=${name}]:visible`).first();
await field('countryCode').selectOption({ label: 'United States' });
await field('firstName').fill(buyer.first);
await field('lastName').fill(buyer.last);
await field('address1').fill(buyer.address1);
await field('city').fill(buyer.city);
await field('zone').selectOption({ label: 'California' });
await field('postalCode').fill(buyer.zip);
await page.keyboard.press('Tab');
await page.waitForLoadState('networkidle');

const readTotal = async () => {
  const m = (await page.locator('body').innerText()).match(/Total\s*USD\s*\$([0-9]+\.[0-9]{2})/);
  return m ? Math.round(parseFloat(m[1]) * 100) : null;
};
let totalCents = await readTotal();
for (let i = 0; i < 5; i++) {              // settle: two identical reads, two seconds apart
  await page.waitForTimeout(2000);
  const again = await readTotal();
  if (again === totalCents) break;
  totalCents = again;
}
if (totalCents == null) {
  // No total, no purchase: nothing is attached yet, so the browser can go.
  await endBrowser();
  throw new Error('the checkout shows no total; stopped before attaching');
}

locator.click: Timeout 15000ms exceeded.
  - <div data-type="modal" data-variant="checkoutModal" data-nametag="shop-portal-provider"></div> intercepts pointer events

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

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

let payClickedAt = null;
let cardReplayed = false;        // true once any approval put the real card into the checkout
const checkout = await attachToPlaywright(page, {
  vault,
  user: process.env.AGENTCARD_USER_ID,
  merchant: 'www.goodandbeautiful.com',
  amount: totalCents,
  currency: 'usd',
  timeoutMs: 15 * 60 * 1000,
  payClickedAt: () => payClickedAt,
  onApprovalUrl: (url) => sendToUser(url),
  onStateChange: (state) => console.log(state.status, state.reason ?? ''),
  onEvent: (event) => { if (event.type === 'authorized') cardReplayed = true; },
  resolveMerchantResult: async () => {
    const body = await page.locator('body').innerText();
    const order = body.match(/Confirmation\s*#\s*([A-Z0-9]+)/i);
    if (order && /You.ve paid for your order/.test(body)) return { status: 'completed', orderId: order[1] };
    if (/There was a problem|declined|could not be processed/i.test(body)) return { status: 'failed' };
    return { status: 'pending' };   // a thank-you URL without the number is not a receipt yet
  },
});

const card = (prefix) =>
  page.frameLocator(`iframe[name^="card-fields-${prefix}-"]`)
    .locator('input:not([data-honeypot-field])').filter({ visible: true }).first();

const placeholder = { number: process.env.PLACEHOLDER_CARD_NUMBER, expiry: '1234', cvc: '123' };
await card('number').pressSequentially(placeholder.number);
await card('expiry').pressSequentially(placeholder.expiry);
await card('verification_value').pressSequentially(placeholder.cvc);
await card('name').pressSequentially(`${buyer.first} ${buyer.last}`);

payClickedAt = Date.now();
await page.locator('#checkout-pay-button').click();

18:00:14 state=awaiting_approval auth=cauth_73026e5483c54cd777b83801
18:00:14 APPROVAL LINK (send it to the user, never to the agent): https://vault.agentcard.sh/authorize?id=cauth_73026e5483c54cd777b83801
18:15:13 state=outcome_unknown reason=authorization_poll_failed auth=cauth_73026e5483c54cd777b83801
18:15:13 event failed "PaymentOutcomeUnknownError"

import { execFile } from 'node:child_process';

onApprovalUrl: (url) => {
  if (process.env.APPROVAL_LINK_COMMAND) {
    execFile('/bin/sh', ['-c', process.env.APPROVAL_LINK_COMMAND], { env: { ...process.env, APPROVAL_URL: url } });
  }
},

00:35:04 event card_request_paused {"url":"https://checkout.pci.shopifyinc.com/sessions","recognizer":"shopify"}
00:35:05 state=awaiting_approval auth=cauth_3d5ebc33fd5ad08245f97e2b
00:35:05 APPROVAL LINK (send it to the user, never to the agent): https://vault.agentcard.sh/authorize?id=cauth_3d5ebc33fd5ad08245f97e2b
00:47:05 event authorized {"mode":"token","authorizationId":"cauth_3d5ebc33fd5ad08245f97e2b"}
00:47:05 state=awaiting_merchant auth=cauth_3d5ebc33fd5ad08245f97e2b
00:47:07 event card_request_paused {"url":"https://checkout.pci.shopifyinc.com/sessions","recognizer":"shopify"}
00:47:08 state=awaiting_approval auth=cauth_dfdb0513d3207687b62f1358
00:47:08 APPROVAL LINK (send it to the user, never to the agent): https://vault.agentcard.sh/authorize?id=cauth_dfdb0513d3207687b62f1358
00:51:42 event authorized {"mode":"token","authorizationId":"cauth_dfdb0513d3207687b62f1358"}
00:51:42 state=awaiting_merchant auth=cauth_dfdb0513d3207687b62f1358
00:52:05 completed  order #XTLQVAF0Y  cauth_dfdb0513d3207687b62f1358

let browserGone = false;
browser.on('disconnected', () => { browserGone = true; });

// Agentcard's record of one approval. orgToken() is yours: the client-credentials token of your organization.
const readAuthorization = async (id) => {
  const res = await fetch(`https://api.agentcard.sh/api/v2/checkout/authorizations/${id}`, {
    headers: { Authorization: `Bearer ${await orgToken()}` },
  });
  return res.ok ? res.json() : null;
};

// An approval the SDK stopped listening for is a live link in the user's hands. Cancel it and read it back until it
// no longer awaits approval; a cancel that failed is retried, never assumed. An approval lives 15 minutes, so the
// attempt stops a minute past that: by then the link is dead either way, and an unconfirmed read returns null.
const retireApproval = async (id) => {
  const deadline = Date.now() + 16 * 60 * 1000;
  while (Date.now() < deadline) {
    const auth = await readAuthorization(id).catch(() => null);
    if (auth && auth.status !== 'awaiting_approval') return auth;
    await vault.cancelAuthorization(id).catch((err) => console.error('cancel failed, retrying:', err.message));
    await new Promise((resolve) => setTimeout(resolve, 5_000));
  }
  return null;
};

const settled = (s) => ['completed', 'failed', 'declined', 'expired'].includes(s.status);
let result = checkout.getState();
while (!settled(result)) {
  const state = checkout.getState();
  if (['declined', 'timed_out', 'cancelled', 'failed'].includes(state.status)) { result = state; break; }
  if (state.status === 'outcome_unknown' && state.reason === 'authorization_poll_failed' && !cardReplayed) {
    const auth = await retireApproval(state.authorizationId);
    const untouched = auth && ['expired', 'declined'].includes(auth.status) && auth.replay_attempted === false;
    result = untouched
      ? { ...state, status: auth.status }              // confirmed: no approval, no card replayed, nothing charged
      : state;                                         // unconfirmed, approved or replayed: unknown, the store's record decides
    break;
  }
  if (browserGone) { result = { ...state, status: 'outcome_unknown', reason: 'browser_ended' }; break; }
  if (state.status === 'awaiting_approval') { await page.waitForTimeout(15_000).catch(() => {}); continue; }
  result = await checkout.reconcile().catch(() => result);
  if (!settled(result)) await page.waitForTimeout(15_000).catch(() => {});
}
console.log(result.status, result.reason ?? '', result.orderId ?? '', result.authorizationId ?? '');

if (result.status === 'outcome_unknown') {
  // The page is gone or never answered. The store's record decides, not a second Pay.
  const order = await findOrderInStoreRecord(buyer.email);   // yours: the order email, or the order status page
  console.log(order ? `store record: order ${order}` : 'no store record yet; ask again later, buy nothing');
}
if (!browserGone) await endBrowser();

git clone https://github.com/tiny-agent-company/kernel-shopify-purchase
cd kernel-shopify-purchase && npm install
cp .env.example .env     # BROWSER, that browser's key, Agentcard credentials, user id, product, buyer, APPROVAL_LINK_COMMAND
set -a; source .env; set +a
BROWSER=browserbase npm run buy     # kernel | browserbase | browser-use | anchor | local