@curless/agentbank-react

Drop-in React components for agentbank. Headless: you pass data + callbacks (fetched via the agentbank SDK); the components render and emit events. They hold no money and make no network requests — so they're SSR-safe, easy to test, and stay on the right side of the boundary (money + balances live in Curless; these just render them).

npm install @curless/agentbank-react   # peer dep: react >=18

Components

<ApprovalGate> — human-in-the-loop spend approval

import { ApprovalGate } from '@curless/agentbank-react';

<ApprovalGate
  request={{ id: a.id, amount: a.amount, currency: a.currency, agentName, merchantName: a.merchantRef, reason: a.reason }}
  onApprove={(id) => ab.pay.approve(id)}   // agentbank Pay plane
  onDecline={(id) => ab.pay.deny(id)}
  busy={pending}
/>

<WalletBalance> — Curless balance + virtual card

import { WalletBalance } from '@curless/agentbank-react';

<WalletBalance balance={{ amount: 48000, currency: 'USD' }} card={{ last4: '4242', brand: 'Visa' }} />

The balance is Curless's number, surfaced through agentbank's wallets proxy. The card prop is optional — the VCC card API is a Curless capability; until it's live, render balance only.

<CheckoutWidget> — embeddable order summary + Pay

import { CheckoutWidget } from '@curless/agentbank-react';

<CheckoutWidget
  amount={1160} currency="USD" merchantName="Cotti"
  lineItems={[{ name: 'Latte', quantity: 2, amount: 1160 }]}
  status={status}
  onPay={handlePay}   // wire to a payment-link pay / x402 / ACP flow
/>

Style via the className / style props (defaults are minimal inline styles). Amounts are minor units; override rendering with formatAmount.

MIT