@jskit-ai/payments-web 0.1.1

package/README.md

@@ -0,0 +1,149 @@
+# Application billing UI
+
+`@jskit-ai/payments-web` supplies a Vue/Vuetify account component for generated or
+hand-written JavaScript applications. It has no Vibe64, Online, Genesis, provider
+SDK, credential, file-discovery or HTTP dependency. The application mounts it in
+its existing billing page or semantic placement. It does not register routes or
+change shell navigation automatically. This worktree package is not yet published.
+
+## Component contract
+
+Import `PaymentAccount` from
+`@jskit-ai/payments-web/client/components/PaymentAccount`.
+
+| Prop | Meaning |
+|---|---|
+| `account` | Authorized account projection: integer `balance`, `features` string array, `subscriptions` array, boolean `hasCustomer`; null until loaded |
+| `plans` | Display records: `id`, `name`, `priceLabel`, `features` array, integer `renewalCredits`, boolean `available` |
+| `loading` | Initial or refresh request in progress |
+| `loadError` | Safe user-facing read failure; replaces stale action controls with Retry |
+| `pending` | Checkout or portal request in progress; disables mutation controls |
+| `canManage` | App authorization display hint, false by default; never replaces server authorization |
+| `canReadHistory` | Separate billing-history read permission hint, false by default |
+| `history` | One authorized `{collection, items, nextCursor}` provider page, or null |
+| `historyLoading` | History request pending; displays skeletons and disables page/collection requests |
+| `historyError` | Safe history read failure; hides stale rows and offers Retry |
+| `locale` | Optional locale for integer credit and UTC date formatting |
+
+Subscription records contain `id`, `planId`, `status`, and `periodEnd` in UTC
+milliseconds. `payments-core`'s authorized `checkout.account({actor, subjectId})`
+returns the account projection. The app derives actor and subject from its own
+authenticated identity and membership. Its `authorize` callback receives action
+`account`; allow read-only members independently of `checkout` and `portal` if
+that is the application's policy.
+
+Build display plans on the server from validated configuration and the selected
+merchant/environment's published catalogue. `available` is true only for a
+published price the current runtime adapter can sell. Format `priceLabel` using
+the currency's supported provider minor-unit rules and the user's locale; do not
+assume every currency has two decimal places. Include billing interval and any
+applicable tax clarification. Never serialize the entire integration config or
+Env into these props. Display price and availability are not checkout authority:
+the server chooses the published provider price from the submitted logical ID.
+
+The component emits:
+
+- `checkout(planId)`: request checkout for a selected logical plan.
+- `portal()`: request a short-lived customer portal session.
+- `refresh()`: reload current server state, including after returning from checkout.
+- `history({collection, after})`: load the selected provider history page.
+- `retry-history()`: retry the app's last failed history query.
+
+An open subscription, including overdue, paused or incomplete, disables another
+checkout and directs the customer to billing management. Cancellation or an
+expired incomplete subscription permits a new checkout. The provider portal's
+plan-change/cancellation options must be configured by the merchant. A disabled
+button is a UI guard only. The server service also rejects a new checkout when
+its reconciled account contains an open subscription, while allowing recovery of
+an already completed request ID. Before webhook reconciliation, separate checkout
+sessions can still be open at the provider; retain one request ID for an ongoing
+purchase intent. Application authorization remains mandatory on every request.
+
+## Application composition
+
+Keep the page small. Use the application's existing `useView()` for the account
+read and `useCommand()` for checkout and portal, from `@jskit-ai/http-web`.
+These supply scoped paths, credentials/CSRF, query state and shared mutation
+feedback. Bind their states and actions to the component:
+
+```vue
+<PaymentAccount
+  :account="billing.record?.account ?? null"
+  :plans="billing.record?.plans ?? []"
+  :can-manage="billing.record?.canManage === true"
+  :loading="billing.isLoading || billing.isFetching"
+  :load-error="billing.loadError"
+  :pending="checkout.isRunning || portal.isRunning"
+  @refresh="billing.refresh()"
+  @checkout="startCheckout"
+  @portal="portal.run()"
+/>
+```
+
+Here `billing`, `checkout` and `portal` are the app's normal configured hooks,
+not exports of this package. Mount the routes with the framework already used by
+the app. Connect them to the explicitly composed server services:
+
+| App route purpose | Server call |
+|---|---|
+| Read billing account | `checkoutService.account({actor, subjectId})`, plus safe display plans and the app's management permission |
+| Begin checkout | `checkoutService.checkout({actor, subjectId, email, planId, requestId})` |
+| Open billing portal | `checkoutService.portal({actor, subjectId})` |
+| Provider webhook | `checkoutService.webhook({rawBody, signature})` |
+| Read provider billing history | `checkoutService.history({actor, subjectId, collection, after})` |
+
+History uses the app's existing `useList()` or `useEndpointResource()` read hook,
+with query identity including billable subject, collection and cursor. Bind its
+loading/error states and clear the prior subject's page when identity changes.
+On `history`, select that query; on `retry-history`, refetch the failed query.
+Replace the page instead of automatically walking every provider page. A new
+collection selection starts at `after: null`; the Next control uses `nextCursor`.
+Reject stale results after subject changes, and disable reads when the app's
+history policy denies access. No request orchestration is duplicated here.
+
+History item fields come from the core contract: `id`, `kind`, `status`,
+`createdAt`, and financial records' `currency`, `totalMinor`, `paidMinor`. The app
+adds `totalLabel` and, when the paid amount is known, `paidLabel`, using its money
+formatter and currency-specific minor units. Keep large integer strings exact.
+Null amounts stay unknown. Stripe rows are invoices; Paddle rows are transactions.
+Neither a row nor its total proves settlement, and this view does not grant access
+or credits. This is customer-scoped history, not merchant-wide reporting or
+refund/cancellation administration.
+
+The app's `startCheckout(planId)` creates and retains a request ID for that user
+intent, including retry after a lost HTTP response; it calls the checkout command
+with that ID and plan ID. The backend gets email from authenticated billing
+contact data, not arbitrary browser identity claims. Serialize concurrent billing
+mutations for the same account through the existing service. An uncertain
+provider outcome requires the documented server reconciliation operation, not
+an automatic retry loop.
+
+On successful checkout/portal command, navigate to the URL returned by the
+app's server. Do not accept an arbitrary return/provider URL from query parameters
+or browser inputs. Configure the provider and destination in server composition.
+Mutation errors use `useCommand()`'s normal feedback path. The component does not
+insert a second error banner or duplicate that request state. Re-read on the
+return route; a success query parameter must never grant paid access.
+
+Laravel owns its native server and UI implementation. An Inertia/Vue application
+can choose this presentational component, but no JSKIT runtime is required for
+Laravel to implement the documented JSON account/plan display shape and actions.
+
+## Evidence
+
+The focused package test compiles and mounts the Vue component with lightweight
+host controls and checks loaded, pending, overdue, unauthorized, error/retry and
+loading behavior. A separate browser fixture uses real Vuetify and controlled
+component inputs, without a generated application or provider connection:
+
+```sh
+JSKIT_PAYMENTS_WEB_BROWSER_INTEGRATION=1 node --test --test-concurrency=1 packages/payments-web/test/paymentAccount.browser.test.js
+```
+
+Run that command from the JSKIT repository root with its prepared browser tools.
+It checks 390, 768, 1024 and 1440 pixel widths plus a short desktop viewport,
+unclipped invoice references, 48-pixel controls, keyboard checkout/portal events,
+history pagination/retry, denied and pending actions, overdue subscriptions,
+account retry and initial loading. This verifies the component's presentation
+and emitted events; the consuming app still owns authorized routes, provider
+requests and payment completion. It is not live-provider acceptance.

package/fixtures/payment-account/index.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en">
+  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Billing component fixture</title></head>
+  <body><div id="app"></div><script type="module" src="/main.js"></script></body>
+</html>

package/fixtures/payment-account/main.js

@@ -0,0 +1,25 @@
+import { createApp, h, reactive } from "vue";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "vuetify/styles";
+import PaymentAccount from "../../src/client/components/PaymentAccount.vue";
+
+// Controlled component inputs only: no server, identity exchange or provider calls.
+const state = reactive({
+  account: { balance: 1200, features: ["Scheduling", "Customer reminders"], subscriptions: [], hasCustomer: true },
+  plans: [{ id: "studio", name: "Studio plan", priceLabel: "$20.00 / month", features: ["Scheduling", "Customer reminders"], renewalCredits: 1200, available: true }],
+  canManage: true, canReadHistory: true, pending: false, loading: false, loadError: "",
+  historyLoading: false, historyError: "",
+  history: { collection: "transactions", items: [{ id: "invoice_" + "long_reference_".repeat(12), kind: "invoice", status: "open", createdAt: "2026-09-12T12:00:00Z", totalLabel: "$20.00", paidLabel: "$0.00" }], nextCursor: "next-1" },
+  locale: "en-US"
+});
+window.paymentFixture = { state, events: [] };
+const record = (name) => (value) => window.paymentFixture.events.push({ name, value });
+createApp({
+  setup: () => () => h(components.VApp, {}, { default: () => h(components.VMain, {}, {
+    default: () => h("div", { style: "padding:16px;max-width:1200px;margin:auto" }, [
+      h(PaymentAccount, { ...state, onCheckout: record("checkout"), onPortal: record("portal"), onRefresh: record("refresh"), onHistory: record("history"), "onRetry-history": record("retry-history") })
+    ])
+  }) })
+}).use(createVuetify({ components, directives })).mount("#app");

package/fixtures/payment-account/vite.config.mjs

@@ -0,0 +1,9 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  root: fileURLToPath(new URL(".", import.meta.url)),
+  plugins: [vue()],
+  server: { host: "127.0.0.1" }
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@jskit-ai/payments-web",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "Application-owned billing views for JSKIT Vue applications.",
+  "exports": {
+    "./client/components/PaymentAccount": "./src/client/components/PaymentAccount.vue"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vuetify": "^4.0.0"
+  },
+  "jskit": {
+    "kind": "runtime",
+    "capabilities": {
+      "provides": [],
+      "requires": []
+    },
+    "runtime": {
+      "server": {
+        "providers": []
+      },
+      "client": {
+        "providers": []
+      }
+    }
+  },
+  "scripts": {
+    "test": "node --test --test-concurrency=1"
+  }
+}

package/src/client/components/PaymentAccount.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  plans: { type: Array, default: () => [] },
+  account: { type: Object, default: null },
+  loading: { type: Boolean, default: false },
+  loadError: { type: String, default: "" },
+  pending: { type: Boolean, default: false },
+  canManage: { type: Boolean, default: false },
+  canReadHistory: { type: Boolean, default: false },
+  history: { type: Object, default: null },
+  historyLoading: { type: Boolean, default: false },
+  historyError: { type: String, default: "" },
+  locale: { type: String, default: undefined }
+});
+const emit = defineEmits(["refresh", "checkout", "portal", "history", "retry-history"]);
+const subscriptions = computed(() => props.account?.subscriptions ?? []);
+const hasSubscription = computed(() => subscriptions.value.some((item) =>
+  !["canceled", "incomplete_expired"].includes(item.status)));
+const disabled = computed(() => props.pending || props.loading || Boolean(props.loadError) || !props.account || !props.canManage);
+const statuses = {
+  active: "Active", trialing: "Trial", past_due: "Payment overdue", paused: "Paused",
+  canceled: "Canceled", unpaid: "Unpaid", incomplete: "Payment incomplete",
+  incomplete_expired: "Payment expired"
+};
+const number = (value) => new Intl.NumberFormat(props.locale).format(value);
+const date = (value) => new Intl.DateTimeFormat(props.locale, { dateStyle: "medium", timeZone: "UTC" }).format(value);
+const planName = (id) => props.plans.find((plan) => plan.id === id)?.name ?? id;
+function checkout(plan) {
+  if (!disabled.value && !hasSubscription.value && plan.available === true) emit("checkout", plan.id);
+}
+function loadHistory(collection, after = null) {
+  if (props.canReadHistory && !props.historyLoading && !props.loading) emit("history", { collection, after });
+}
+</script>
+
+<template>
+  <section class="payment-account" aria-label="Subscription and billing" :aria-busy="loading || pending">
+    <v-skeleton-loader v-if="loading && !account" type="article, list-item-two-line, actions" />
+    <div v-else-if="loadError" role="alert">
+      <p>{{ loadError }}</p>
+      <v-btn variant="tonal" :disabled="loading" @click="emit('refresh')">Retry billing details</v-btn>
+    </div>
+    <template v-else-if="account">
+      <dl class="payment-account__summary">
+        <div><dt>Available credits</dt><dd>{{ number(account.balance) }}</dd></div>
+        <div><dt>Included features</dt><dd>{{ account.features.length ? account.features.join(', ') : 'No paid features active' }}</dd></div>
+      </dl>
+      <ul v-if="subscriptions.length" class="payment-account__subscriptions" aria-label="Subscriptions">
+        <li v-for="subscription in subscriptions" :key="subscription.id">
+          <strong>{{ planName(subscription.planId) }}</strong>
+          <span>{{ statuses[subscription.status] ?? subscription.status }}</span>
+          <span v-if="subscription.periodEnd > 0">Period end: {{ date(subscription.periodEnd) }} (UTC)</span>
+        </li>
+      </ul>
+      <p v-else>No subscription yet.</p>
+      <div class="payment-account__actions">
+        <v-btn v-if="account.hasCustomer" variant="tonal" :disabled="disabled" @click="emit('portal')">Manage billing</v-btn>
+        <v-btn variant="text" :disabled="loading || pending" @click="emit('refresh')">Refresh billing details</v-btn>
+      </div>
+      <p v-if="!canManage">A billing administrator can manage this account.</p>
+      <p v-else-if="hasSubscription">Use Manage billing to update your subscription or payment details.</p>
+      <p>Access and credits update after payment confirmation. Returning from checkout alone does not activate a plan.</p>
+      <ul v-if="plans.length" class="payment-account__plans" aria-label="Available plans">
+        <li v-for="plan in plans" :key="plan.id" class="payment-account__plan">
+          <strong>{{ plan.name }}</strong>
+          <p>{{ plan.priceLabel }}</p>
+          <ul v-if="plan.features.length"><li v-for="feature in plan.features" :key="feature">{{ feature }}</li></ul>
+          <p>{{ number(plan.renewalCredits) }} credits per paid renewal; unused renewal credits expire at period end.</p>
+          <v-btn variant="flat" color="primary" :disabled="disabled || hasSubscription || plan.available !== true" :aria-label="`Choose ${plan.name}`" @click="checkout(plan)">Choose plan</v-btn>
+          <p v-if="plan.available !== true">Not available for checkout yet.</p>
+        </li>
+      </ul>
+      <p v-else>No plans are available yet.</p>
+      <section v-if="canReadHistory" aria-label="Billing history" :aria-busy="historyLoading">
+        <div class="payment-account__actions">
+          <v-btn variant="tonal" :disabled="historyLoading || loading" @click="loadHistory('transactions')">View invoices and transactions</v-btn>
+          <v-btn variant="tonal" :disabled="historyLoading || loading" @click="loadHistory('subscriptions')">View subscription history</v-btn>
+        </div>
+        <v-skeleton-loader v-if="historyLoading" type="list-item-three-line, list-item-three-line" />
+        <div v-else-if="historyError" role="alert">
+          <p>{{ historyError }}</p>
+          <v-btn variant="text" @click="emit('retry-history')">Retry billing history</v-btn>
+        </div>
+        <template v-else-if="history">
+          <p v-if="history.collection === 'transactions'">Invoices and transactions include unpaid records. Their totals do not confirm payment.</p>
+          <v-list v-if="history.items.length" lines="three" aria-label="Provider billing records">
+            <v-list-item v-for="item in history.items" :key="item.id">
+              <v-list-item-title>{{ item.kind === 'invoice' ? 'Invoice' : item.kind === 'transaction' ? 'Transaction' : 'Subscription' }} {{ item.id }}</v-list-item-title>
+              <v-list-item-subtitle>{{ statuses[item.status] ?? item.status }} · {{ date(Date.parse(item.createdAt)) }} (UTC)</v-list-item-subtitle>
+              <p v-if="item.kind !== 'subscription'">Total: {{ item.totalLabel ?? 'Not available yet' }}<span v-if="item.paidLabel"> · Paid: {{ item.paidLabel }}</span></p>
+            </v-list-item>
+          </v-list>
+          <p v-else>No billing records found.</p>
+          <v-btn v-if="history.nextCursor" variant="text" @click="loadHistory(history.collection, history.nextCursor)">Next billing page</v-btn>
+        </template>
+      </section>
+    </template>
+    <p v-else>Billing details are not available yet.</p>
+  </section>
+</template>
+
+<style scoped>
+.payment-account { min-width: 0; overflow-wrap: anywhere; }
+.payment-account__summary { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 1rem; }
+.payment-account__summary dt { font-weight: 600; }
+.payment-account__summary dd { margin: .25rem 0 0; }
+.payment-account__subscriptions { list-style: none; padding: 0; }
+.payment-account__subscriptions li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .5rem; }
+.payment-account__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+.payment-account__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
+.payment-account__plan { min-width: 0; padding: 1rem; border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); border-radius: 12px; }
+.payment-account :deep(.v-list-item-title), .payment-account :deep(.v-list-item-subtitle) { white-space: normal; overflow-wrap: anywhere; }
+.payment-account :deep(.v-btn) { min-height: 48px; max-width: 100%; height: auto; white-space: normal; }
+.payment-account :deep(.v-btn__content) { white-space: normal; }
+</style>

package/test/paymentAccount.browser.test.js

@@ -0,0 +1,68 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+import { chromium, expect } from "@playwright/test";
+import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+
+test("billing component supports responsive layout, keyboard actions and recoverable states", {
+  skip: process.env.JSKIT_PAYMENTS_WEB_BROWSER_INTEGRATION !== "1", timeout: 120_000
+}, async () => {
+  const runtime = await startViteFixture({ fixtureRoot: fileURLToPath(new URL("../fixtures/payment-account/", import.meta.url)) });
+  let browser;
+  try {
+    browser = await chromium.launch(createChromiumLaunchOptions());
+    const page = await browser.newPage();
+    const errors = [];
+    page.on("pageerror", (error) => errors.push(error.message));
+    await page.goto(runtime.baseURL);
+    const billing = page.getByRole("region", { name: "Subscription and billing", exact: true });
+    const choose = billing.getByRole("button", { name: "Choose Studio plan" });
+    await expect(choose).toBeEnabled();
+    for (const [width, height] of [[390, 844], [768, 1024], [1024, 768], [1440, 1000], [1440, 500]]) {
+      await page.setViewportSize({ width, height });
+      await expect(billing).toBeVisible();
+      const layout = await billing.evaluate((element) => ({
+        overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+        targets: Array.from(element.querySelectorAll("button")).map((button) => button.getBoundingClientRect().height),
+        clipped: Array.from(element.querySelectorAll(".v-list-item-title, .v-list-item-subtitle, .v-btn__content")).some((item) => item.scrollWidth > item.clientWidth + 1 || item.scrollHeight > item.clientHeight + 1)
+      }));
+      assert.ok(layout.overflow <= 1, `${width}: horizontal overflow`);
+      assert.equal(layout.clipped, false, `${width}: clipped text`);
+      assert.ok(layout.targets.every((height) => height >= 48), `${width}: small target`);
+    }
+    await choose.focus();
+    await page.keyboard.press("Enter");
+    assert.deepEqual(await page.evaluate(() => window.paymentFixture.events.pop()), { name: "checkout", value: "studio" });
+    await billing.getByRole("button", { name: "Next billing page" }).click();
+    assert.deepEqual(await page.evaluate(() => window.paymentFixture.events.pop()), { name: "history", value: { collection: "transactions", after: "next-1" } });
+    await page.evaluate(() => { window.paymentFixture.state.pending = true; });
+    await expect(choose).toBeDisabled();
+    await expect(billing.getByRole("button", { name: "Manage billing" })).toBeDisabled();
+    await page.evaluate(() => { Object.assign(window.paymentFixture.state, { pending: false, canManage: false }); });
+    await expect(billing.getByText("A billing administrator can manage this account.")).toBeVisible();
+    await expect(choose).toBeDisabled();
+    await page.evaluate(() => { Object.assign(window.paymentFixture.state, { canManage: true, account: { balance: 0, features: [], hasCustomer: true, subscriptions: [{ id: "sub-1", planId: "studio", status: "past_due", periodEnd: 1800000000000 }] } }); });
+    await expect(billing.getByText("Payment overdue", { exact: true })).toBeVisible();
+    await expect(choose).toBeDisabled();
+    await billing.getByRole("button", { name: "Manage billing" }).focus();
+    await page.keyboard.press("Enter");
+    assert.equal(await page.evaluate(() => window.paymentFixture.events.pop().name), "portal");
+    await page.evaluate(() => { window.paymentFixture.state.historyError = "History unavailable"; });
+    await billing.getByRole("button", { name: "Retry billing history" }).click();
+    assert.equal(await page.evaluate(() => window.paymentFixture.events.pop().name), "retry-history");
+    await page.evaluate(() => { window.paymentFixture.state.canReadHistory = false; });
+    await expect(billing.getByRole("region", { name: "Billing history" })).toHaveCount(0);
+    await page.evaluate(() => { window.paymentFixture.state.loadError = "Billing unavailable"; });
+    await expect(billing.getByRole("alert")).toHaveText(/Billing unavailable/);
+    await billing.getByRole("button", { name: "Retry billing details" }).click();
+    assert.equal(await page.evaluate(() => window.paymentFixture.events.pop().name), "refresh");
+    await page.evaluate(() => { Object.assign(window.paymentFixture.state, { loadError: "", account: null, loading: true }); });
+    await expect(billing).toHaveAttribute("aria-busy", "true");
+    await expect(billing.locator(".v-skeleton-loader")).toBeVisible();
+    await expect(billing.getByRole("button")).toHaveCount(0);
+    assert.deepEqual(errors, []);
+  } finally {
+    await browser?.close();
+    await stopProcess(runtime);
+  }
+});

package/test/paymentAccount.test.js

@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { readFile, mkdtemp, writeFile, rm } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+import { createRenderer, defineComponent, h, nextTick, reactive } from 'vue';
+import { compileScript, parse } from '@vue/compiler-sfc';
+
+test('billing component preserves read state and guards checkout while leaving authority to the app', async () => {
+  const file = new URL('../src/client/components/PaymentAccount.vue', import.meta.url);
+  const { descriptor, errors } = parse(await readFile(file, 'utf8'), { filename: file.pathname });
+  assert.deepEqual(errors, []);
+  const compiled = compileScript(descriptor, { id: 'payment-account', inlineTemplate: true });
+  const directory = await mkdtemp(new URL('./.payment-component-', import.meta.url));
+  let app;
+  try {
+    const modulePath = `${directory}/component.mjs`;
+    await writeFile(modulePath, compiled.content);
+    const { default: PaymentAccount } = await import(pathToFileURL(modulePath));
+    const node = (type, text = '') => ({ type, text, props: {}, children: [], parent: null });
+    const renderer = createRenderer({
+      createElement: node, createText: (text) => node('text', text), createComment: (text) => node('comment', text),
+      setText: (item, text) => { item.text = text; },
+      setElementText: (item, text) => { item.text = text; item.children = []; },
+      patchProp: (item, key, _previous, value) => { item.props[key] = value; },
+      parentNode: (item) => item.parent,
+      nextSibling: (item) => item.parent?.children[item.parent.children.indexOf(item) + 1] ?? null,
+      insert(item, parent, anchor) {
+        if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1);
+        item.parent = parent;
+        const index = anchor ? parent.children.indexOf(anchor) : -1;
+        if (index < 0) parent.children.push(item); else parent.children.splice(index, 0, item);
+      },
+      remove(item) { if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1); }
+    });
+    const props = reactive({ account: { balance: 23, features: ['export'], subscriptions: [], hasCustomer: true },
+      plans: [{ id: 'pro', name: 'Pro', priceLabel: '$10 / month', features: ['export'], renewalCredits: 100, available: true }], canManage: true, pending: false, loading: false, loadError: '',
+      canReadHistory: false, history: null, historyLoading: false, historyError: '' });
+    const events = [];
+    const root = node('root');
+    app = renderer.createApp({ render: () => h(PaymentAccount, { ...props, onCheckout: (id) => events.push(['checkout', id]), onPortal: () => events.push(['portal']), onRefresh: () => events.push(['refresh']), onHistory: (request) => events.push(['history', request]), 'onRetry-history': () => events.push(['retry-history']) }) });
+    app.component('VBtn', defineComponent({ setup: (_props, { slots }) => () => h('button', {}, slots.default?.()) }));
+    app.component('VSkeletonLoader', defineComponent({ setup: () => () => h('div', 'Loading billing') }));
+    for (const name of ['v-list', 'v-list-item', 'v-list-item-title', 'v-list-item-subtitle']) {
+      app.component(name, defineComponent({ setup: (_props, { slots }) => () => h('div', {}, slots.default?.()) }));
+    }
+    app.mount(root);
+    const all = (item = root) => [item, ...item.children.flatMap((child) => all(child))];
+    const text = () => all().map((item) => item.text).join(' ');
+    const choose = () => all().find((item) => item.type === 'button' && item.props['aria-label'] === 'Choose Pro');
+    assert.match(text(), /23/);
+    choose().props.onClick();
+    assert.deepEqual(events, [['checkout', 'pro']]);
+    props.pending = true;
+    await nextTick();
+    assert.equal(choose().props.disabled, true);
+    choose().props.onClick();
+    assert.equal(events.length, 1);
+    props.pending = false;
+    props.account.subscriptions = [{ id: 'sub_a', planId: 'pro', status: 'past_due', periodEnd: 0 }];
+    await nextTick();
+    assert.match(text(), /Payment overdue/);
+    assert.equal(choose().props.disabled, true);
+    props.account.subscriptions = [];
+    props.canManage = false;
+    await nextTick();
+    choose().props.onClick();
+    assert.equal(events.length, 1);
+    props.loadError = 'Billing could not load';
+    await nextTick();
+    assert.equal(choose(), undefined);
+    assert.match(text(), /Billing could not load/);
+    all().find((item) => item.type === 'button').props.onClick();
+    assert.deepEqual(events.at(-1), ['refresh']);
+    props.loadError = '';
+    props.account = null;
+    props.loading = true;
+    await nextTick();
+    assert.match(text(), /Loading billing/);
+    assert.equal(choose(), undefined);
+    props.loading = false;
+    props.account = { balance: 0, features: [], subscriptions: [], hasCustomer: true };
+    await nextTick();
+    const button = (label) => all().find((item) => item.type === 'button' && all(item).some((child) => child.text === label));
+    assert.equal(button('View invoices and transactions'), undefined);
+    props.canReadHistory = true;
+    await nextTick();
+    button('View invoices and transactions').props.onClick();
+    assert.deepEqual(events.at(-1), ['history', { collection: 'transactions', after: null }]);
+    props.historyLoading = true;
+    await nextTick();
+    const count = events.length;
+    button('View subscription history').props.onClick();
+    assert.equal(events.length, count);
+    props.historyLoading = false;
+    props.history = { collection: 'transactions', items: [{ id: 'in_a', kind: 'invoice', status: 'open', createdAt: '2030-01-01T00:00:00Z', totalLabel: '$12.00', paidLabel: '$0.00' }], nextCursor: 'in_a' };
+    await nextTick();
+    assert.match(text(), /Invoice in_a/);
+    assert.match(text(), /Total: \$12.00/);
+    assert.match(text(), /totals do not confirm payment/);
+    button('Next billing page').props.onClick();
+    assert.deepEqual(events.at(-1), ['history', { collection: 'transactions', after: 'in_a' }]);
+    props.historyError = 'History unavailable';
+    await nextTick();
+    assert.doesNotMatch(text(), /Invoice in_a/);
+    assert.equal(button('Next billing page'), undefined);
+    button('Retry billing history').props.onClick();
+    assert.deepEqual(events.at(-1), ['retry-history']);
+    props.historyError = '';
+    props.history = { collection: 'transactions', items: [], nextCursor: null };
+    await nextTick();
+    assert.match(text(), /No billing records found/);
+    props.canReadHistory = false;
+    await nextTick();
+    assert.doesNotMatch(text(), /No billing records found/);
+  } finally { app?.unmount(); await rm(directory, { recursive: true, force: true }); }
+});