@tribe-nest/forge 3.21.0 → 3.23.0

package/src/ui/styled/HoldNotice.tsx

@@ -0,0 +1,192 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Clock, TimerOff } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import type { InventoryHoldState } from "../headless/checkout/useInventoryHold";
+
+/** Append an alpha to a 6-digit hex colour (mirrors the other styled blocks). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+export interface HoldNoticeProps {
+  /** The countdown state from `useInventoryHold`. */
+  hold: InventoryHoldState;
+  /**
+   * The server's own words for a 409 `INVENTORY_HOLD_EXPIRED`. Empty/undefined
+   * while nothing has been refused. When set it OUTRANKS the countdown: the
+   * server has spoken and the clock on this device is no longer the story.
+   */
+  expiredMessage?: string;
+  /** Re-take the reservation on the same order. Renders the primary action. */
+  onRetry?: () => void;
+  /** True while a retry is in flight. */
+  isRetrying?: boolean;
+  /** Optional escape hatch ("Change selection", "Back to cart"). */
+  secondaryAction?: { label: string; onClick: () => void };
+  /** What is being held, for the copy. Defaults to "items". */
+  noun?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The reservation, told to the buyer.
+ *
+ * Three states, and they are three different facts:
+ *
+ *  1. **Running** — "Reserved for you · 8:14 left". Quiet by default, insistent
+ *     under two minutes. Only drawn when a hold actually exists; a profile with
+ *     inventory holds switched off, a digital-only cart and an already-settled
+ *     free order all report no hold and get nothing, which is today's page.
+ *  2. **Lapsed on this device** — the clock reached zero. It does not sit on
+ *     "0:00": it changes what it says, because a timer that finishes and then
+ *     says nothing has raised an alarm and refused to explain it. It also does
+ *     not claim the items are gone — this device's clock does not know that.
+ *  3. **Refused by the server** (409) — the reservation is definitively over.
+ *     The message is the API's own, already localised, and it is distinct from
+ *     sold-out on purpose: the units are very often still there, and the retry
+ *     below re-acquires exactly the same ones.
+ *
+ * Every colour comes from the theme. The urgent/expired states use the theme's
+ * `secondary` (falling back to `primary`) rather than a hardcoded red, because
+ * an artist's site is their brand and a stock crimson is wrong on most of them.
+ */
+export function HoldNotice({
+  hold,
+  expiredMessage,
+  onRetry,
+  isRetrying,
+  secondaryAction,
+  noun = "items",
+  style,
+}: HoldNoticeProps): ReactNode {
+  const theme = useForgeTheme();
+  const accent = theme.colors.secondary ?? theme.colors.primary;
+
+  const isExpired = !!expiredMessage || hold.hasLapsed;
+  if (!isExpired && !hold.isHeld) return null;
+
+  const shellStyle: CSSProperties = {
+    position: "relative",
+    display: "flex",
+    gap: 12,
+    alignItems: "flex-start",
+    padding: "12px 14px",
+    marginBottom: 16,
+    border: `1px solid ${a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.5 : 0.28)}`,
+    backgroundColor: a(isExpired || hold.isUrgent ? accent : theme.colors.primary, isExpired ? 0.1 : 0.06),
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+    fontFamily: theme.fontFamily,
+    ...style,
+  };
+
+  if (isExpired) {
+    return (
+      <div data-testid="hold-expired" role="alert" style={shellStyle}>
+        <TimerOff size={18} style={{ marginTop: 2, flexShrink: 0, color: accent }} aria-hidden />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+            {expiredMessage ? "Your reservation expired" : "Your reservation has ended"}
+          </p>
+          <p style={{ fontSize: 13, opacity: 0.8, margin: "4px 0 0" }}>
+            {/* The server's message names the right noun and the right verb
+                tense; ours only stands in before it has spoken. */}
+            {expiredMessage ??
+              `These ${noun} are no longer held for you. Try again to reserve them: they may well still be available.`}
+          </p>
+          {(onRetry || secondaryAction) && (
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
+              {onRetry && (
+                <button
+                  type="button"
+                  data-testid="hold-retry"
+                  onClick={onRetry}
+                  disabled={isRetrying}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: isRetrying ? "default" : "pointer",
+                    opacity: isRetrying ? 0.6 : 1,
+                    border: "none",
+                    backgroundColor: theme.colors.primary,
+                    color: theme.colors.textPrimary ?? readableTextOn(theme.colors.primary),
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {isRetrying ? "Reserving…" : "Try again"}
+                </button>
+              )}
+              {secondaryAction && (
+                <button
+                  type="button"
+                  data-testid="hold-secondary"
+                  onClick={secondaryAction.onClick}
+                  style={{
+                    padding: "8px 14px",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    background: "transparent",
+                    border: `1px solid ${theme.colors.primary}`,
+                    color: theme.colors.primary,
+                    borderRadius: theme.cornerRadius,
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {secondaryAction.label}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="hold-countdown"
+      // Polite, not assertive: this updates every second and an assertive live
+      // region would have a screen reader interrupt itself all the way down.
+      // The number is re-read only when it is worth hearing (see below).
+      style={shellStyle}
+    >
+      <Clock size={18} style={{ marginTop: 2, flexShrink: 0, color: hold.isUrgent ? accent : theme.colors.primary }} aria-hidden />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+          {`Reserved for you · `}
+          <span data-testid="hold-countdown-value" style={{ fontVariantNumeric: "tabular-nums" }}>
+            {hold.label}
+          </span>
+          {` left`}
+        </p>
+        <p style={{ fontSize: 13, opacity: 0.75, margin: "4px 0 0" }}>
+          {hold.isUrgent
+            ? `Complete payment soon: after this your ${noun} go back on sale.`
+            : `We're holding your ${noun} while you pay.`}
+        </p>
+      </div>
+      {/* A screen reader gets a stable sentence rather than a per-second
+          barrage: the visible digits tick, this announces the minute. */}
+      <span
+        aria-live="polite"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0 0 0 0)",
+          whiteSpace: "nowrap",
+          border: 0,
+        }}
+      >
+        {hold.secondsRemaining != null && hold.secondsRemaining % 60 === 0
+          ? `${Math.round(hold.secondsRemaining / 60)} minutes left to complete payment`
+          : ""}
+      </span>
+    </div>
+  );
+}

package/src/ui/styled/InvoicePayment.tsx

@@ -4,6 +4,7 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { getCurrencySymbol } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface InvoicePaymentProps {
   invoiceId: string;
@@ -21,14 +22,14 @@ const formatDate = (value: string | number | Date): string =>
 /**
  * Themed invoice view + payment surface, built on `useInvoicePayment` and the
  * app-registered payment renderer (`usePaymentRenderer`). Renders line items,
- * a PDF download, and — when unpaid — the Stripe payment surface.
+ * a PDF download, and (when unpaid) the payment surface: Stripe's card form,
+ * or Paystack's inline modal behind a pay button.
  */
 export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
   const theme = useForgeTheme();
   const renderPayment = usePaymentRenderer();
-  const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote } = useInvoicePayment(invoiceId, {
-    returnPath,
-  });
+  const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
+    useInvoicePayment(invoiceId, { returnPath });
 
   if (invoice.isLoading) return <Loading fullPage />;
   if (invoice.error || !invoice.data) return <p style={{ color: theme.colors.text }}>Invoice not found.</p>;
@@ -172,7 +173,15 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
         <div>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
-          {clientSecret ? (
+          {/* Paystack brings its own modal, so it is checked before the Stripe
+              renderer and needs none of it. */}
+          {isPaystack ? (
+            canOpenPaystack ? (
+              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(inv.total))}`} />
+            ) : (
+              <Loading label="Preparing payment…" size={22} />
+            )
+          ) : clientSecret ? (
             renderPayment?.({
               clientSecret,
               returnUrl,

package/src/ui/styled/MembershipCheckout.tsx

@@ -7,6 +7,7 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface MembershipCheckoutProps {
   /** Pre-selected tier (e.g. from a `?membershipTierId=` param). */
@@ -88,23 +89,31 @@ export function MembershipCheckout({
     );
   }
 
-  // Payment step — render the registered payment UI (Stripe) in manual mode.
-  if (checkout.step === "payment" && checkout.clientSecret) {
+  // Payment step: the registered payment UI (Stripe) in manual mode, or the
+  // Paystack modal behind a pay button. The Paystack branch is also what a
+  // member who closed the popup comes back to, so it must render whether or not
+  // a Stripe secret was ever issued.
+  if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
     return (
       <div className={className} style={card}>
         <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>Payment</h1>
         <p style={{ opacity: 0.75, marginBottom: 24 }}>
-          {tier.name} — {fmt(checkout.amount)} / {checkout.billingCycle}
+          {tier.name} · {fmt(checkout.amount)} / {checkout.billingCycle}
         </p>
         <div style={box}>
-          {renderPayment({
-            clientSecret: checkout.clientSecret,
-            returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
-            amount: checkout.amount,
-            mode: "manual",
-            onSucceeded: () => onComplete?.(),
-            onFailed: () => {},
-          })}
+          {checkout.isPaystack ? (
+            <PaystackPayButton onPay={checkout.openPaystackCheckout} label={`Pay ${fmt(checkout.amount)}`} />
+          ) : (
+            checkout.clientSecret &&
+            renderPayment({
+              clientSecret: checkout.clientSecret,
+              returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+              amount: checkout.amount,
+              mode: "manual",
+              onSucceeded: () => onComplete?.(),
+              onFailed: () => {},
+            })
+          )}
         </div>
         <button
           onClick={() => checkout.setStep("select")}

package/src/ui/styled/MembershipGateNotice.tsx

@@ -0,0 +1,159 @@
+import type { CSSProperties } from "react";
+import { Lock } from "lucide-react";
+import type { PublicMembershipGate } from "../../types/models";
+import type { MembershipGateRefusal } from "../format/membershipGate";
+import { useMembershipGateNotice } from "../headless/membership/useMembershipGateNotice";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface MembershipGateNoticeProps {
+  /** The announced gate from the read. */
+  gate?: PublicMembershipGate | null;
+  /** A `MEMBERSHIP_GATE` refusal from a failed purchase. Wins over `gate`. */
+  refusal?: MembershipGateRefusal | null;
+  /** What the thing is, in the buyer's words. Default "This". */
+  itemLabel?: string;
+  /**
+   * `badge` is the one-line form for a row in a list of things (a ticket tier);
+   * `card` is the block form for a page about ONE thing (a course, a product).
+   */
+  variant?: "badge" | "card";
+  loginPath?: string;
+  membershipPath?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Members only" — said BEFORE the buyer pays, with the action that resolves it.
+ *
+ * ## What was wrong
+ *
+ * Members-only tickets were enforced at checkout and announced on no surface.
+ * A logged-out buyer picked a seat, filled in a two-step form and was refused on
+ * the last screen with a 400 — the restriction was discoverable only by failing
+ * it, and the "members save X, sign in" funnel the feature was sold on existed
+ * nowhere. Products and courses published the same gate and drew it just as
+ * little.
+ *
+ * ## Why the button is the point, not the badge
+ *
+ * A badge alone converts a silent failure into a visible dead end. The two
+ * reasons need genuinely different exits — `sign_in_required` gets a sign-in
+ * that RETURNS here, `membership_required` gets the tier — and offering the
+ * wrong one is worse than offering none: a signed-in member sent to sign in
+ * again learns only that the site is broken. `buildMembershipGateNotice` owns
+ * that choice so both rendering stacks make it identically.
+ *
+ * Renders nothing when nothing is gated, which is also every storefront with the
+ * gates switch off.
+ */
+export function MembershipGateNotice({
+  gate,
+  refusal,
+  itemLabel,
+  variant = "card",
+  loginPath,
+  membershipPath,
+  style,
+}: MembershipGateNoticeProps) {
+  const theme = useForgeTheme();
+  const notice = useMembershipGateNotice({ gate, refusal, itemLabel, loginPath, membershipPath });
+  if (!notice) return null;
+
+  if (variant === "badge") {
+    return (
+      <div
+        data-testid="membership-gate-badge"
+        data-gate-reason={notice.reason}
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 8,
+          marginTop: 8,
+          fontFamily: theme.fontFamily,
+          ...style,
+        }}
+      >
+        <span style={pillStyle(theme)}>
+          <Lock size={12} aria-hidden />
+          {notice.badge}
+        </span>
+        <span style={{ fontSize: 13, opacity: 0.8, color: theme.colors.text }}>{notice.body}</span>
+        {notice.actionHref && (
+          <a data-testid="membership-gate-action" href={notice.actionHref} style={linkStyle(theme)}>
+            {notice.actionLabel}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="membership-gate-card"
+      data-gate-reason={notice.reason}
+      style={{
+        border: `1px solid ${alpha(theme.colors.primary, 0.3)}`,
+        borderRadius: theme.cornerRadius,
+        padding: 20,
+        color: theme.colors.text,
+        background: theme.colors.background,
+        fontFamily: theme.fontFamily,
+        ...style,
+      }}
+    >
+      <span style={pillStyle(theme)}>
+        <Lock size={12} aria-hidden />
+        {notice.badge}
+      </span>
+      <h3 style={{ fontWeight: 600, fontSize: 17, margin: "12px 0 6px" }}>{notice.title}</h3>
+      <p style={{ opacity: 0.8, fontSize: 14, marginBottom: notice.actionHref ? 16 : 0 }}>{notice.body}</p>
+      {notice.actionHref && (
+        <a
+          data-testid="membership-gate-action"
+          href={notice.actionHref}
+          style={{
+            display: "inline-block",
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            borderRadius: theme.cornerRadius,
+            padding: "10px 18px",
+            fontWeight: 600,
+            fontSize: 14,
+            textDecoration: "none",
+          }}
+        >
+          {notice.actionLabel}
+        </a>
+      )}
+    </div>
+  );
+}
+
+/** Append an alpha to a 6-digit hex colour (mirrors frontend-shared addAlphaToHexCode). */
+const alpha = (hex: string, value: number) => hex + Math.round(value * 255).toString(16).padStart(2, "0");
+
+// Everything is drawn from the artist's own palette. A members-only badge in a
+// hardcoded gold or indigo is a brand bug on every site that is not that colour.
+const pillStyle = (t: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "2px 8px",
+  borderRadius: 6,
+  fontSize: 12,
+  fontWeight: 700,
+  background: alpha(t.colors.primary, 0.1),
+  color: t.colors.primary,
+  border: `1px solid ${alpha(t.colors.primary, 0.3)}`,
+  whiteSpace: "nowrap",
+});
+
+const linkStyle = (t: ForgeTheme): CSSProperties => ({
+  fontSize: 13,
+  fontWeight: 600,
+  color: t.colors.primary,
+  textDecoration: "underline",
+  whiteSpace: "nowrap",
+});

package/src/ui/styled/OfferButton.tsx

@@ -5,6 +5,7 @@ import { Loading } from "./Loading";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
+import { HoldNotice } from "./HoldNotice";
 
 export interface OfferButtonProps {
   productId: string;
@@ -97,6 +98,15 @@ function OfferBody({
           <span>Total</span>
           <strong style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</strong>
         </div>
+        {/* The reservation, counted down while the buyer pays. Nothing is drawn
+            for a digital item or a profile with holds off. */}
+        <HoldNotice
+          hold={c.hold}
+          expiredMessage={c.holdExpiredError ?? undefined}
+          onRetry={c.retryHold}
+          isRetrying={c.isRetryingHold}
+          noun="item"
+        />
         {renderPayment ? (
           <Offer.PaymentStep>{(p) => renderPayment(p)}</Offer.PaymentStep>
         ) : (
@@ -121,7 +131,7 @@ function OfferBody({
             >
               {c.variants.map((v) => (
                 <option key={v.id} value={v.id}>
-                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} — {fmt(v.price)}
+                  {v.title || [v.color, v.size].filter(Boolean).join(" / ") || "Default"} · {fmt(v.price)}
                 </option>
               ))}
             </select>
@@ -157,6 +167,19 @@ function OfferBody({
           <span style={{ color: theme.colors.primary }}>{fmt(c.totalPrice)}</span>
         </div>
 
+        {/* A reservation that lapsed on the way to the card form never reached
+            the payment step, so it is answered here — distinctly from the error
+            line, because "your hold ran out" is not "this is gone". */}
+        {c.holdExpiredError && (
+          <HoldNotice
+            hold={c.hold}
+            expiredMessage={c.holdExpiredError}
+            onRetry={c.retryHold}
+            isRetrying={c.isRetryingHold}
+            noun="item"
+          />
+        )}
+
         {c.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.error}</p>}
 
         <button

package/src/ui/styled/PaymentLinkPayment.tsx

@@ -4,6 +4,7 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface PaymentLinkPaymentProps {
   paymentLinkId: string;
@@ -22,9 +23,8 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
   const renderPayment = usePaymentRenderer();
-  const { link, clientSecret, returnUrl, isStarting, error, taxQuote } = usePaymentLinkPayment(paymentLinkId, {
-    returnPath,
-  });
+  const { link, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
+    usePaymentLinkPayment(paymentLinkId, { returnPath });
 
   if (link.isLoading) return <Loading fullPage />;
   if (link.error || !link.data) return <p style={{ color: theme.colors.text }}>Payment link not found.</p>;
@@ -68,7 +68,15 @@ export function PaymentLinkPayment({ paymentLinkId, formatAmount, returnPath }:
         <div>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
-          {clientSecret ? (
+          {/* Paystack brings its own modal, so it is checked before the Stripe
+              renderer and needs none of it. */}
+          {isPaystack ? (
+            canOpenPaystack ? (
+              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(data.amount))}`} />
+            ) : (
+              <Loading label="Preparing payment…" size={22} />
+            )
+          ) : clientSecret ? (
             renderPayment?.({
               clientSecret,
               returnUrl,

package/src/ui/styled/PaystackPayButton.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useFormatCurrency } from "../format/useFormatCurrency";
+import type { PaystackCheckoutOutcome } from "../../utils/paystackCheckout";
+
+export interface PaystackPayButtonProps {
+  /** Opens the modal. Every pillar hook exposes one under this name. */
+  onPay: () => Promise<PaystackCheckoutOutcome> | void;
+  /** Charged total, MAJOR units. Rendered on the button when set. */
+  amount?: number;
+  /** ISO currency of `amount`. */
+  currency?: string;
+  /** Overrides the generated "Pay X" label. */
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * The Paystack pay button: the fan's way into the inline modal, and their way
+ * BACK into it.
+ *
+ * Two jobs, and the second is the one worth stating: a fan who closes the popup
+ * without paying has not failed, and this button is what lets them try again on
+ * the same charge. There is no other route back to a session that has already
+ * been started, so a surface that renders nothing for Paystack strands them.
+ *
+ * The button re-enables itself on every outcome except a success, because a
+ * success is already navigating away.
+ */
+export function PaystackPayButton({ onPay, amount, currency, label, disabled, className }: PaystackPayButtonProps) {
+  const theme = useForgeTheme();
+  const { formatCurrency } = useFormatCurrency();
+  const [isOpening, setIsOpening] = useState(false);
+
+  const text = label ?? (amount ? `Pay ${formatCurrency(amount, currency || undefined)}` : "Pay now");
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || isOpening}
+      onClick={async () => {
+        setIsOpening(true);
+        try {
+          const outcome = await onPay();
+          // A success is mid-navigation; anything else means the fan is still
+          // here and the button has to work again.
+          if (outcome !== "succeeded") setIsOpening(false);
+        } catch {
+          setIsOpening(false);
+        }
+      }}
+      className={className ?? "w-full px-4 py-3 font-semibold"}
+      style={{
+        backgroundColor: theme.colors.primary,
+        color: readableTextOn(theme.colors.primary),
+        borderRadius: `${theme.cornerRadius}px`,
+        opacity: disabled || isOpening ? 0.7 : 1,
+        cursor: disabled || isOpening ? "not-allowed" : "pointer",
+      }}
+    >
+      {isOpening ? "Opening payment…" : text}
+    </button>
+  );
+}