@owlmeans/web-payment 0.1.18-rc.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@owlmeans/web-payment",
+  "version": "0.1.18-rc.0",
+  "license": "MIT",
+  "description": "Protocol-bound payment hooks and themed amount checkout UI for OwlMeans web applications.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 384 && nodemon -e ts,tsx,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty",
+    "test": "bun test ./tests"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@owlmeans/client-i18n": "^0.1.18-rc.19",
+    "@owlmeans/client-payment": "^0.1.18-rc.24",
+    "@owlmeans/entrypoint": "^0.1.18-rc.15",
+    "@owlmeans/i18n": "^0.1.18-rc.12",
+    "@owlmeans/payment": "^0.1.18-rc.17"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-dialog": "*",
+    "@radix-ui/react-label": "*",
+    "@radix-ui/react-slot": "*",
+    "class-variance-authority": "*",
+    "clsx": "*",
+    "react": "*",
+    "react-dom": "*",
+    "tailwind-merge": "*",
+    "tailwindcss": "*"
+  },
+  "devDependencies": {
+    "@owlmeans/dep-config": "workspace:*",
+    "@owlmeans/test-ui": "^0.1.18-rc.19",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@types/bun": "^1.4.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "nodemon": "^3.1.14",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/@/components/ui/button.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  { variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+      outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+    },
+  }, defaultVariants: { variant: 'default' } },
+)
+
+export const Button = ({ className, variant, asChild = false, ...props }:
+React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & { asChild?: boolean }) => {
+  const Component = asChild ? Slot : 'button'
+  return <Component className={cn(buttonVariants({ variant, className }))} {...props} />
+}

package/src/@/components/ui/dialog.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cn } from '@/lib/utils'
+
+export const Dialog = (props: React.ComponentProps<typeof DialogPrimitive.Root>) => <DialogPrimitive.Root {...props} />
+const DialogPortal = (props: React.ComponentProps<typeof DialogPrimitive.Portal>) => <DialogPrimitive.Portal {...props} />
+const DialogOverlay = ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) =>
+  <DialogPrimitive.Overlay className={cn('fixed inset-0 z-50 bg-black/50', className)} {...props} />
+export const DialogContent = ({ className, children, closeLabel = 'Close', ...props }:
+React.ComponentProps<typeof DialogPrimitive.Content> & { closeLabel?: string }) => <DialogPortal>
+  <DialogOverlay />
+  <DialogPrimitive.Content
+    className={cn('bg-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg', className)}
+    {...props}
+  >
+    {children}
+    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring">
+      <span aria-hidden="true">×</span><span className="sr-only">{closeLabel}</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</DialogPortal>
+export const DialogHeader = ({ className, ...props }: React.ComponentProps<'div'>) =>
+  <div className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
+export const DialogFooter = ({ className, ...props }: React.ComponentProps<'div'>) =>
+  <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
+export const DialogTitle = ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) =>
+  <DialogPrimitive.Title className={cn('text-lg font-semibold leading-none', className)} {...props} />
+export const DialogDescription = ({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) =>
+  <DialogPrimitive.Description className={cn('text-muted-foreground text-sm', className)} {...props} />

package/src/@/components/ui/input.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export const Input = ({ className, type, ...props }: React.ComponentProps<'input'>) => <input
+  type={type} data-slot="input"
+  className={cn(
+    'border-input bg-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 md:text-sm',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20',
+    className,
+  )}
+  {...props}
+/>

package/src/@/components/ui/label.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cn } from '@/lib/utils'
+
+export const Label = ({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) =>
+  <LabelPrimitive.Root
+    data-slot="label"
+    className={cn('flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:opacity-50', className)}
+    {...props}
+  />

package/src/@/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/@/lib/utils.ts

@@ -0,0 +1,3 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

package/src/amount.ts

@@ -0,0 +1,21 @@
+export const decimalSeparator = (locale: string): string => new Intl.NumberFormat(locale)
+  .formatToParts(1.1).find(part => part.type === 'decimal')?.value ?? '.'
+
+/** Parse a locale decimal directly to cents; floating-point rounding never enters the path. */
+export const parseAmountMinor = (input: string, locale: string): number | null => {
+  const separator = decimalSeparator(locale)
+  let normalized = input.trim().replace(/[\s\u00a0]/g, '')
+  if (separator === ',') normalized = normalized.replace(',', '.')
+  else if (!normalized.includes('.') && normalized.includes(',')) normalized = normalized.replace(',', '.')
+  if (!/^\d+(?:\.\d{0,2})?$/.test(normalized)) return null
+  const [whole, decimal = ''] = normalized.split('.')
+  const value = Number(whole) * 100 + Number(decimal.padEnd(2, '0'))
+  return Number.isSafeInteger(value) ? value : null
+}
+
+export const inputAmount = (amountMinor: number, locale: string): string => {
+  const separator = decimalSeparator(locale)
+  const whole = Math.floor(amountMinor / 100)
+  const cents = String(amountMinor % 100).padStart(2, '0')
+  return `${whole}${separator}${cents}`
+}

package/src/dialog.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import { assertCheckoutAmount, chargeAmountMinor } from '@owlmeans/payment'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { inputAmount, parseAmountMinor } from './amount.js'
+import type { AmountCheckoutDialogProps } from './types.js'
+
+const money = (minor: number, currency: string, locale: string): string => new Intl.NumberFormat(locale, {
+  style: 'currency', currency: currency.toUpperCase(), minimumFractionDigits: 2,
+}).format(minor / 100)
+
+export const AmountCheckoutDialog = ({
+  open, onOpenChange, policy, pending = false, onConfirm,
+}: AmountCheckoutDialogProps) => {
+  const t = useI18nLib('web-payment', 'amount-checkout')
+  const [locale] = useLanguage()
+  const [value, setValue] = useState(() => inputAmount(policy.defaultMinor, locale))
+  useEffect(() => {
+    if (open) setValue(inputAmount(policy.defaultMinor, locale))
+  }, [open, policy.defaultMinor, locale])
+
+  const amountMinor = useMemo(() => parseAmountMinor(value, locale), [value, locale])
+  const error = amountMinor == null
+    ? t('invalid')
+    : amountMinor < policy.minimumMinor
+      ? t('below', { amount: money(policy.minimumMinor, policy.currency, locale) })
+      : amountMinor > policy.maximumMinor
+        ? t('above', { amount: money(policy.maximumMinor, policy.currency, locale) })
+        : null
+  const valid = error == null && amountMinor != null
+  const chargeMinor = valid ? chargeAmountMinor(amountMinor, policy) : 0
+  const adjustmentMinor = valid && amountMinor != null ? chargeMinor - amountMinor : 0
+  const submit = async () => {
+    if (amountMinor == null || !valid || pending) return
+    assertCheckoutAmount(policy, amountMinor)
+    await onConfirm(amountMinor)
+  }
+
+  return <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent closeLabel={t('close')}>
+      <DialogHeader>
+        <DialogTitle>{t('title')}</DialogTitle>
+        <DialogDescription>{t('description')}</DialogDescription>
+      </DialogHeader>
+      <div className="grid gap-5">
+        <div className="grid grid-cols-2 gap-2 sm:grid-cols-4" aria-label={t('presets')}>
+          {policy.presetsMinor.map(preset => <Button
+            key={preset} type="button" variant={preset === amountMinor ? 'default' : 'outline'}
+            disabled={pending} onClick={() => setValue(inputAmount(preset, locale))}
+          >{money(preset, policy.currency, locale)}</Button>)}
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="payment-amount">{t('custom')}</Label>
+          <Input
+            id="payment-amount" inputMode="decimal" autoComplete="off" value={value}
+            disabled={pending} aria-invalid={error != null} aria-describedby="payment-amount-help"
+            onChange={event => setValue(event.target.value)}
+          />
+          <p id="payment-amount-help" className={error == null ? 'text-muted-foreground text-xs' : 'text-destructive text-xs'}>
+            {error ?? t('bounds', {
+              minimum: money(policy.minimumMinor, policy.currency, locale),
+              maximum: money(policy.maximumMinor, policy.currency, locale),
+            })}
+          </p>
+        </div>
+        <dl className="grid grid-cols-[1fr_auto] gap-x-4 gap-y-2 rounded-lg border bg-muted/30 p-4 text-sm">
+          <dt className="text-muted-foreground">{t('credits')}</dt><dd>{valid && amountMinor != null ? money(amountMinor, policy.currency, locale) : '—'}</dd>
+          <dt className="text-muted-foreground">{t('adjustment')}</dt><dd>{valid ? money(adjustmentMinor, policy.currency, locale) : '—'}</dd>
+          <dt className="font-medium">{t('subtotal')}</dt><dd className="font-medium">{valid ? money(chargeMinor, policy.currency, locale) : '—'}</dd>
+        </dl>
+        <p className="text-muted-foreground text-xs">{t('tax-note')}</p>
+      </div>
+      <DialogFooter>
+        <Button type="button" variant="outline" disabled={pending} onClick={() => onOpenChange(false)}>{t('cancel')}</Button>
+        <Button type="button" disabled={!valid || pending} onClick={() => void submit()}>{pending ? t('pending') : t('continue')}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+}

package/src/hooks.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { CallArguments, RegisteredEntrypoint, RequestShape } from '@owlmeans/entrypoint'
+import { hasEntitlement } from '@owlmeans/payment'
+import { openCheckout, type CheckoutTarget } from './service.js'
+import type { CheckoutResult } from './types.js'
+
+export const useCheckout = (target: CheckoutTarget = '_self') => {
+  const [pending, setPending] = useState(false)
+  const checkout = useCallback(async <Request extends RequestShape>(
+    entry: RegisteredEntrypoint<Request, CheckoutResult>, ...request: CallArguments<Request>
+  ): Promise<CheckoutResult | null> => {
+    setPending(true)
+    try {
+      const result = await entry.call(...request)
+      if (result?.url != null) openCheckout(result.url, target)
+      return result ?? null
+    } finally { setPending(false) }
+  }, [target])
+  return { checkout, pending }
+}
+
+export const usePaymentBalance = <T>(
+  entry: RegisteredEntrypoint<{}, T>, intervalMs: number = 60_000, deps: unknown[] = [],
+): T | null => {
+  const [balance, setBalance] = useState<T | null>(null)
+  const entryRef = useRef(entry)
+  entryRef.current = entry
+  useEffect(() => {
+    let active = true
+    const load = async () => {
+      try {
+        const value = await entryRef.current.call()
+        if (active) setBalance(value)
+      } catch { /* explicit actions own their errors */ }
+    }
+    void load()
+    const ticker = setInterval(load, intervalMs)
+    return () => { active = false; clearInterval(ticker) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intervalMs, ...deps])
+  return balance
+}
+
+export const useEntitlements = <T extends { entitlements?: string[] }>(
+  entry: RegisteredEntrypoint<{}, T>, intervalMs: number = 60_000, deps: unknown[] = [],
+): string[] | null => usePaymentBalance(entry, intervalMs, deps)?.entitlements ?? null
+
+export const useEntitlement = (list: string[] | null, param: string): boolean => list != null && hasEntitlement(
+  list.map(item => {
+    const colon = item.indexOf(':')
+    return colon >= 0
+      ? { scope: item.slice(0, colon), permissions: { [item.slice(colon + 1)]: true } }
+      : { scope: '', permissions: { [item]: true } }
+  }),
+  param,
+)

package/src/i18n/be.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Папоўніць крэдыты","description":"Выберыце чысты кошт крэдытаў для арганізацыі.","presets":"Гатовыя сумы","custom":"Свая сума","invalid":"Увядзіце карэктную суму, не больш за два знакі пасля коскі.","below":"Мінімальная сума — {{amount}}.","above":"Максімальная сума — {{amount}}.","bounds":"Выберыце суму ад {{minimum}} да {{maximum}}.","credits":"Кошт крэдытаў","adjustment":"Карэкціроўка апрацоўкі","subtotal":"Сума да падатку","tax-note":"Stripe разлічыць падатак падчас аплаты.","cancel":"Скасаваць","continue":"Перайсці ў Stripe","pending":"Адкрываем аплату…","close":"Закрыць"}}

package/src/i18n/de.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Guthaben aufladen","description":"Wähle den Nettowert des Guthabens für deine Organisation.","presets":"Vorgegebene Beträge","custom":"Eigener Betrag","invalid":"Gib einen gültigen Betrag mit höchstens zwei Dezimalstellen ein.","below":"Der Mindestbetrag ist {{amount}}.","above":"Der Höchstbetrag ist {{amount}}.","bounds":"Wähle zwischen {{minimum}} und {{maximum}}.","credits":"Guthabenwert","adjustment":"Verarbeitungsaufschlag","subtotal":"Zwischensumme vor Steuern","tax-note":"Stripe berechnet anwendbare Steuern beim Bezahlen.","cancel":"Abbrechen","continue":"Weiter zu Stripe","pending":"Zahlung wird geöffnet…","close":"Schließen"}}

package/src/i18n/en.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Add credits","description":"Choose the net credit value to add to your organization.","presets":"Preset amounts","custom":"Custom amount","invalid":"Enter a valid amount with no more than two decimal places.","below":"The minimum amount is {{amount}}.","above":"The maximum amount is {{amount}}.","bounds":"Choose between {{minimum}} and {{maximum}}.","credits":"Credit value","adjustment":"Processing adjustment","subtotal":"Pre-tax subtotal","tax-note":"Stripe calculates any applicable tax at checkout.","cancel":"Cancel","continue":"Continue to Stripe","pending":"Opening checkout…","close":"Close"}}

package/src/i18n/es.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Añadir créditos","description":"Elige el valor neto de créditos para tu organización.","presets":"Importes predefinidos","custom":"Importe personalizado","invalid":"Introduce un importe válido con un máximo de dos decimales.","below":"El importe mínimo es {{amount}}.","above":"El importe máximo es {{amount}}.","bounds":"Elige entre {{minimum}} y {{maximum}}.","credits":"Valor de los créditos","adjustment":"Ajuste de procesamiento","subtotal":"Subtotal antes de impuestos","tax-note":"Stripe calcula los impuestos aplicables al pagar.","cancel":"Cancelar","continue":"Continuar a Stripe","pending":"Abriendo el pago…","close":"Cerrar"}}

package/src/i18n/pl.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Dodaj kredyty","description":"Wybierz wartość netto kredytów dla organizacji.","presets":"Kwoty sugerowane","custom":"Własna kwota","invalid":"Wpisz prawidłową kwotę z maksymalnie dwoma miejscami dziesiętnymi.","below":"Minimalna kwota to {{amount}}.","above":"Maksymalna kwota to {{amount}}.","bounds":"Wybierz od {{minimum}} do {{maximum}}.","credits":"Wartość kredytów","adjustment":"Korekta przetwarzania","subtotal":"Suma przed podatkiem","tax-note":"Stripe obliczy należny podatek podczas płatności.","cancel":"Anuluj","continue":"Przejdź do Stripe","pending":"Otwieranie płatności…","close":"Zamknij"}}

package/src/i18n/ru.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Пополнить кредиты","description":"Выберите чистую стоимость кредитов для организации.","presets":"Готовые суммы","custom":"Своя сумма","invalid":"Введите корректную сумму, не более двух знаков после запятой.","below":"Минимальная сумма — {{amount}}.","above":"Максимальная сумма — {{amount}}.","bounds":"Выберите сумму от {{minimum}} до {{maximum}}.","credits":"Стоимость кредитов","adjustment":"Корректировка обработки","subtotal":"Сумма до налога","tax-note":"Stripe рассчитает применимый налог при оплате.","cancel":"Отмена","continue":"Перейти в Stripe","pending":"Открываем оплату…","close":"Закрыть"}}

package/src/i18n/uk.json

@@ -0,0 +1 @@
+{"amount-checkout":{"title":"Поповнити кредити","description":"Виберіть чисту вартість кредитів для організації.","presets":"Готові суми","custom":"Власна сума","invalid":"Введіть коректну суму, не більше двох знаків після коми.","below":"Мінімальна сума — {{amount}}.","above":"Максимальна сума — {{amount}}.","bounds":"Виберіть суму від {{minimum}} до {{maximum}}.","credits":"Вартість кредитів","adjustment":"Коригування обробки","subtotal":"Сума до податку","tax-note":"Stripe розрахує застосовний податок під час оплати.","cancel":"Скасувати","continue":"Перейти до Stripe","pending":"Відкриваємо оплату…","close":"Закрити"}}

package/src/i18n.ts

@@ -0,0 +1,16 @@
+import { addI18nLib } from '@owlmeans/i18n'
+import en from './i18n/en.json' with { type: 'json' }
+import pl from './i18n/pl.json' with { type: 'json' }
+import ru from './i18n/ru.json' with { type: 'json' }
+import be from './i18n/be.json' with { type: 'json' }
+import uk from './i18n/uk.json' with { type: 'json' }
+import es from './i18n/es.json' with { type: 'json' }
+import de from './i18n/de.json' with { type: 'json' }
+
+addI18nLib('en', 'web-payment', en)
+addI18nLib('pl', 'web-payment', pl)
+addI18nLib('ru', 'web-payment', ru)
+addI18nLib('be', 'web-payment', be)
+addI18nLib('uk', 'web-payment', uk)
+addI18nLib('es', 'web-payment', es)
+addI18nLib('de', 'web-payment', de)

package/src/index.ts

@@ -0,0 +1,6 @@
+import './i18n.js'
+export type * from './types.js'
+export * from './service.js'
+export * from './hooks.js'
+export * from './amount.js'
+export * from './dialog.js'

package/src/service.ts

@@ -0,0 +1,11 @@
+export type CheckoutTarget = '_self' | '_blank'
+
+/** Same-window by default so browser return/cancel state stays in one application tab. */
+export const openCheckout = (url: string, target: CheckoutTarget = '_self'): void => {
+  if (typeof window === 'undefined' || url === '') return
+  if (target === '_self') window.location.assign(url)
+  else window.open(url, target, 'noopener,noreferrer')
+}
+
+export { makePaymentService, appendPaymentService } from '@owlmeans/client-payment'
+export type { PaymentService } from '@owlmeans/client-payment'

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { AmountCheckoutPolicy, CreateCheckoutResponse } from '@owlmeans/payment'
+
+export type CheckoutResult = CreateCheckoutResponse
+export interface AmountCheckoutDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  policy: AmountCheckoutPolicy
+  pending?: boolean
+  onConfirm: (amountMinor: number) => Promise<void> | void
+}

package/tests/amount.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test'
+import { inputAmount, parseAmountMinor } from '../src/amount.js'
+import { openCheckout } from '../src/service.js'
+
+describe('localized amount input', () => {
+  test('preserves cent precision', () => {
+    expect(parseAmountMinor('5.01', 'en')).toBe(501)
+    expect(inputAmount(501, 'en')).toBe('5.01')
+  })
+  test('accepts locale decimal separators', () => {
+    expect(parseAmountMinor('10,21', 'pl')).toBe(1021)
+  })
+  test('rejects excess precision and non-numeric input', () => {
+    expect(parseAmountMinor('5.001', 'en')).toBeNull()
+    expect(parseAmountMinor('five', 'en')).toBeNull()
+  })
+})
+
+describe('checkout navigation', () => {
+  test('redirects in the same window by default and supports an explicit new tab', () => {
+    const assigned: string[] = []
+    const opened: unknown[][] = []
+    const previous = globalThis.window
+    Object.defineProperty(globalThis, 'window', {
+      configurable: true,
+      value: {
+        location: { assign: (url: string) => assigned.push(url) },
+        open: (...args: unknown[]) => opened.push(args),
+      },
+    })
+    try {
+      openCheckout('https://checkout.example/session')
+      openCheckout('https://checkout.example/second', '_blank')
+      expect(assigned).toEqual(['https://checkout.example/session'])
+      expect(opened).toEqual([['https://checkout.example/second', '_blank', 'noopener,noreferrer']])
+    } finally {
+      Object.defineProperty(globalThis, 'window', { configurable: true, value: previous })
+    }
+  })
+})

package/tests/context.ts

@@ -0,0 +1,33 @@
+import react from '@vitejs/plugin-react'
+import { createServer, type ViteDevServer } from 'vite'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const here = dirname(fileURLToPath(import.meta.url))
+let server: ViteDevServer | null = null
+let url: string | null = null
+
+export const harnessUrl = async (): Promise<string> => {
+  if (url != null) return url
+  server = await createServer({
+    configFile: false,
+    root: resolve(here, './harness'),
+    plugins: [react()],
+    resolve: {
+      alias: { '@': resolve(here, '../src/@') },
+      dedupe: ['react', 'react-dom'],
+    },
+    server: { port: 0 },
+    logLevel: 'warn',
+  })
+  await server.listen()
+  url = server.resolvedUrls?.local?.[0] ?? null
+  if (url == null) throw new Error('Vite did not expose a web-payment harness URL')
+  return url
+}
+
+export const closeHarness = async (): Promise<void> => {
+  await server?.close()
+  server = null
+  url = null
+}

package/tests/dialog.spec.ts

@@ -0,0 +1,66 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+import { closeHarness, harnessUrl } from './context.js'
+
+const TIMEOUT = 60_000
+
+afterAll(async () => {
+  await closeBrowser()
+  await closeHarness()
+})
+
+describe('AmountCheckoutDialog', () => {
+  test('renders presets and the net, adjustment, and pre-tax amounts', async () => {
+    const { page, close } = await mountComponent({ url: await harnessUrl() })
+    try {
+      const dialog = page.getByRole('dialog')
+      await dialog.waitFor()
+      for (const amount of ['$10.00', '$20.00', '$50.00', '$100.00']) {
+        await expect(dialog.getByRole('button', { name: amount }).count()).resolves.toBe(1)
+      }
+      expect(await dialog.innerText()).toContain('Credit value')
+      expect(await dialog.innerText()).toContain('Processing adjustment')
+      expect(await dialog.innerText()).toContain('$0.21')
+      expect(await dialog.innerText()).toContain('$10.21')
+      expect(await dialog.innerText()).toContain('Stripe calculates any applicable tax')
+    } finally { await close() }
+  }, TIMEOUT)
+
+  test('keeps custom cents, reports both bounds without clamping, and submits minor units', async () => {
+    const { page, close } = await mountComponent({ url: await harnessUrl() })
+    try {
+      const input = page.getByLabel('Custom amount')
+      const confirm = page.getByRole('button', { name: 'Continue to Stripe' })
+
+      await input.fill('4.99')
+      expect(await input.getAttribute('aria-invalid')).toBe('true')
+      expect(await confirm.isDisabled()).toBe(true)
+      expect(await page.getByText('The minimum amount is $5.00.').count()).toBe(1)
+
+      await input.fill('500.01')
+      expect(await input.inputValue()).toBe('500.01')
+      expect(await page.getByText('The maximum amount is $500.00.').count()).toBe(1)
+
+      await input.fill('5.01')
+      expect(await input.getAttribute('aria-invalid')).toBe('false')
+      await confirm.click()
+      expect(await page.locator('#confirmed').textContent()).toBe('501')
+    } finally { await close() }
+  }, TIMEOUT)
+
+  test('disables changes while pending and closes on cancel otherwise', async () => {
+    const pendingMount = await mountComponent({ url: `${await harnessUrl()}?pending=true` })
+    try {
+      expect(await pendingMount.page.getByLabel('Custom amount').isDisabled()).toBe(true)
+      expect(await pendingMount.page.getByRole('button', { name: 'Opening checkout…' }).isDisabled()).toBe(true)
+      expect(await pendingMount.page.getByRole('button', { name: 'Cancel' }).isDisabled()).toBe(true)
+    } finally { await pendingMount.close() }
+
+    const readyMount = await mountComponent({ url: await harnessUrl() })
+    try {
+      await readyMount.page.getByRole('button', { name: 'Cancel' }).click()
+      expect(await readyMount.page.getByRole('dialog').count()).toBe(0)
+      expect(await readyMount.page.locator('#dialog-state').textContent()).toBe('closed')
+    } finally { await readyMount.close() }
+  }, TIMEOUT)
+})

package/tests/harness/index.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en">
+  <head><meta charset="utf-8"><title>@owlmeans/web-payment</title></head>
+  <body><div id="root"></div><script type="module" src="/mount.tsx"></script></body>
+</html>

package/tests/harness/mount.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { I18nContext } from '@owlmeans/client-i18n'
+import { AmountCheckoutDialog } from '../../src/index.js'
+
+const params = new URLSearchParams(window.location.search)
+const pending = params.get('pending') === 'true'
+const policy = {
+  currency: 'usd', minimumMinor: 500, maximumMinor: 50_000, defaultMinor: 1_000,
+  presetsMinor: [1_000, 2_000, 5_000, 10_000], fixedMinor: 0, rateBps: 200,
+}
+
+const App = () => {
+  const [open, setOpen] = useState(true)
+  const [confirmed, setConfirmed] = useState<number | null>(null)
+  return <I18nContext config={{ service: 'web-payment-test', i18n: { defaultLng: 'en' } } as never}>
+    <output id="dialog-state">{open ? 'open' : 'closed'}</output>
+    <output id="confirmed">{confirmed ?? ''}</output>
+    <AmountCheckoutDialog
+      open={open}
+      onOpenChange={setOpen}
+      policy={policy}
+      pending={pending}
+      onConfirm={setConfirmed}
+    />
+  </I18nContext>
+}
+
+createRoot(document.getElementById('root')!).render(<App />)

package/tests/i18n.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'bun:test'
+import en from '../src/i18n/en.json'
+import pl from '../src/i18n/pl.json'
+import ru from '../src/i18n/ru.json'
+import be from '../src/i18n/be.json'
+import uk from '../src/i18n/uk.json'
+import es from '../src/i18n/es.json'
+import de from '../src/i18n/de.json'
+
+describe('web-payment localization', () => {
+  const translations = { en, pl, ru, be, uk, es, de }
+
+  test('ships all seven library languages with exact key parity', () => {
+    const expected = Object.keys(en['amount-checkout']).sort()
+    expect(Object.keys(translations).sort()).toEqual(['be', 'de', 'en', 'es', 'pl', 'ru', 'uk'])
+    for (const messages of Object.values(translations)) {
+      expect(Object.keys(messages['amount-checkout']).sort()).toEqual(expected)
+      expect(Object.values(messages['amount-checkout']).every(value => value.trim().length > 0)).toBe(true)
+    }
+  })
+})

package/tests/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["@owlmeans/dep-config/tsconfig.base.json"],
+  "compilerOptions": { "types": ["bun"], "rootDir": "../", "noEmit": true },
+  "include": ["./**/*", "../src/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["@owlmeans/dep-config/tsconfig.base.json", "@owlmeans/dep-config/tsconfig.react.json"],
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/@/*"] },
+    "rootDir": "./src/", "outDir": "./build/"
+  },
+  "exclude": ["./dist/**/*", "./build/**/*", "./tests/**/*", "./*.ts"]
+}