import { type ReactNode } from "react"; import type { PaymentStepExtraOption as CheckoutPaymentStepExtraOption, PaymentChoice, PaymentStepCapabilities, SavedPaymentAccount } from "../checkout-types.js"; /** * UI-side extension of the `PaymentStepExtraOption` from finance-react — * adds an optional `icon` slot since the icon is a presentation concern. */ export interface PaymentStepUiExtraOption extends CheckoutPaymentStepExtraOption { icon?: ReactNode; } export interface PaymentStepProps { value: PaymentChoice | null; onChange: (next: PaymentChoice | null) => void; /** * What the active processor / template actually offers. Each `false` * value hides its section. Honest — no invented capability strings. */ capabilities: PaymentStepCapabilities; /** Saved methods on file — surfaced when `capabilities.chargeSavedCard` is true. */ savedMethods?: SavedPaymentAccount[]; loadingSavedMethods?: boolean; /** * Vertical-specific always-available options. Rendered after the * capability-gated sections, before the universal Hold option. */ extraOptions?: ReadonlyArray; /** Hide the universal "Hold — pay later" option (some verticals don't support it). */ hideHoldOption?: boolean; } /** * Admin-side payment picker. Renders the sections the parent has wired: * * - Saved cards on file ← capabilities.chargeSavedCard * - Charge a new card now ← capabilities.newCard * - Vertical-specific extras ← always rendered (e.g. "Issue on credit") * - Hold — generate payment link ← always rendered (unless hideHoldOption) * * The customer's card-vs-bank-transfer decision happens on the public * `/pay/:sessionId` landing page, not here. That keeps the admin UI to * three real choices: charge now, vertical action, or hold + share link. */ export declare function PaymentStep({ value, onChange, capabilities, savedMethods, loadingSavedMethods, extraOptions, hideHoldOption, }: PaymentStepProps): import("react").JSX.Element;