Complete a purchase on a Shopify store with Kernel

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 session can go.
  await browser.close();
  await kernel.browsers.deleteByID(session.session_id);
  throw new Error('the checkout shows no total; stopped before attaching');
}

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;
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 ?? ''),
  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();

03:30:28 event card_request_paused {"url":"https://checkout.pci.shopifyinc.com/sessions","recognizer":"shopify"}
03:30:28 state=awaiting_approval
03:30:28 Pay now clicked
03:30:29 state=awaiting_approval auth=cauth_70935e6a0f0dfa0e4d6536d5
03:30:29 APPROVAL LINK https://vault.agentcard.sh/authorize?id=cauth_70935e6a0f0dfa0e4d6536d5
03:30:47 event authorized {"mode":"token","authorizationId":"cauth_70935e6a0f0dfa0e4d6536d5"}
03:30:47 state=awaiting_merchant auth=cauth_70935e6a0f0dfa0e4d6536d5
03:33:34 state=completed auth=cauth_70935e6a0f0dfa0e4d6536d5

await page.waitForURL(/\/post-purchase|\/thank[_-]?you/, { timeout: 180_000 }).catch(() => {});
let result = await checkout.reconcile();
for (let i = 0; i < 10 && !['completed', 'failed', 'declined'].includes(result.status); i++) {
  await page.waitForTimeout(15_000);
  result = await checkout.reconcile();
}
console.log(result.status, result.orderId ?? '', result.authorizationId ?? '');

if (['completed', 'failed', 'declined'].includes(result.status)) {
  await browser.close();
  await kernel.browsers.deleteByID(session.session_id);
} else {
  console.log('merchant answer still pending; session kept:', session.browser_live_view_url);
}

03:33:34 reconcile → completed  cauth_70935e6a0f0dfa0e4d6536d5 5CQFGUXJX
03:33:34 final url https://www.goodandbeautiful.com/checkouts/cn/hWNHbYpLF80OWFp1g1hLUaHK/en-us/post-purchase
03:33:34 confirmation Confirmation #5CQFGUXJX
03:33:34 kernel session deleted; outcome completed

git clone https://github.com/tiny-agent-company/kernel-shopify-purchase
cd kernel-shopify-purchase && npm install
cp .env.example .env     # Kernel key, Agentcard credentials, user id, product, buyer
set -a; source .env; set +a
npm run buy

03:26:24 event authorized {"mode":"token","authorizationId":"cauth_4fd7be120d5a146bad7788eb"}
03:26:24 state=awaiting_merchant auth=cauth_4fd7be120d5a146bad7788eb
03:26:26 event blocked "awaiting_merchant"
03:28:08 reconcile → awaiting_merchant merchant_not_confirmed cauth_4fd7be120d5a146bad7788eb
03:28:08 confirmation none seen