@flopay/react 1.1.3 → 1.1.5

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FloPay, FloPayElements } from '@flopay/js';
 import * as _flopay_shared from '@flopay/shared';
-import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
+import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -92,9 +92,22 @@ interface FloPayCheckoutProps {
     debug?: boolean;
     /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
     layout?: 'default' | 'buttons';
-    /** Theme preset for the buttons layout: 'default', 'minimal', 'rounded', or 'dark'. */
+    /**
+     * High-level theme bundle that styles both the Stripe-side appearance and
+     * the FloPay wrapper / submit / inputs. One of: `'classic'` (historic FloPay
+     * look, no bundle applied), `'modern-light'`, `'modern-dark'`,
+     * `'bold-light'`, `'bold-dark'`, `'glass-light'`, `'glass-dark'`. Explicit
+     * `appearance` / `buttonsStyles` props still override their respective
+     * halves when supplied.
+     */
+    theme?: _flopay_shared.ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat.
+     */
     buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
-    /** Custom style overrides for the buttons layout. Merged on top of the theme preset. */
+    /** Style overrides merged on top of the resolved theme bundle / buttonsTheme preset. */
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
@@ -102,7 +115,11 @@ interface FloPayCheckoutProps {
     cardBackButtonContent?: React.ReactNode;
     /** Custom React content rendered for the card-form title. */
     cardTitleContent?: React.ReactNode;
-    /** Whether to show the default security footer in `layout="default"`. Defaults to `true`. */
+    /**
+     * @deprecated No longer rendered — the default-layout security footer was
+     * removed alongside the theme-bundle refactor. Retained as an optional
+     * prop so existing integrations type-check without changes.
+     */
     showSecurityFooter?: boolean;
     /**
      * Called when a payment method button is clicked.
@@ -176,7 +193,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, debug, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -422,22 +439,42 @@ interface SplitCardFormProps {
      */
     layout?: 'default' | 'buttons';
     /**
-     * Theme preset for the `buttons` layout. Ignored when `layout` is `'default'`.
-     * - `'default'` — white card button, neutral borders
-     * - `'minimal'` — borderless, subtle backgrounds
-     * - `'rounded'` — large border radius, soft shadows
-     * - `'dark'` — dark backgrounds, light text
+     * High-level theme bundle that styles the whole checkout (Stripe-side
+     * appearance + FloPay wrapper / submit button / inputs). One of:
+     * `'classic'` (historic FloPay look, no bundle applied), `'modern-light'`,
+     * `'modern-dark'`, `'bold-light'`, `'bold-dark'`, `'glass-light'`,
+     * `'glass-dark'`. Explicit `appearance` / `buttonsStyles` props still
+     * override their respective halves when provided.
+     */
+    theme?: _flopay_shared.ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat — the new union accepts the bundle ids too but you should
+     * migrate to the `theme` prop.
      */
     buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
-    /** Custom style overrides for the `buttons` layout. Merged on top of the theme preset. */
+    /** Style overrides merged on top of the resolved theme bundle / buttonsTheme preset. */
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
+    /**
+     * Appearance from `FloPayProvider` / `FloPayCheckout`. Threaded through so
+     * the React-rendered wrapper, submit button, title, and per-element card
+     * field styling can derive colors from `appearance.variables` when no
+     * explicit `buttonsStyles` is supplied. Bundle consumers (`THEMES[id]`) get
+     * a coherent look without having to forward both halves manually.
+     */
+    appearance?: _flopay_shared.FloPayAppearance;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
     /** Custom React content rendered for the buttons-layout card back button label. */
     cardBackButtonContent?: React.ReactNode;
     /** Custom React content rendered for the card-form title. */
     cardTitleContent?: React.ReactNode;
-    /** Whether to show the default security footer in `layout="default"`. Defaults to `true`. */
+    /**
+     * @deprecated No longer rendered — the default-layout security footer was
+     * removed alongside the theme-bundle refactor. Retained as an optional
+     * prop so existing integrations type-check without changes.
+     */
     showSecurityFooter?: boolean;
     /**
      * Called when a payment method button is clicked.
@@ -684,7 +721,19 @@ interface FloPayAutomaticPaymentSuccessEvent {
 interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {
     sessionId?: string;
     createSession?: InlineSessionDraft;
+    /**
+     * @deprecated Ignored. The backend now picks the customer's most recent
+     * vaulted payment method via `getLatestByUserId` and rebinds the session's
+     * gateway to match it (see `apps/api`'s `createSingle` auto-checkout
+     * branch). Passing this prop has no effect — it is retained only to avoid
+     * breaking existing integrations.
+     */
     paymentMethodId?: string;
+    /**
+     * @deprecated Ignored. The backend orchestrates gateway routing — clients
+     * no longer choose between card and PayPal at the SDK boundary. Passing
+     * this prop has no effect.
+     */
     checkoutMethod?: CheckoutButtonMethod;
     clientId?: string;
     items?: CheckoutItem[];
@@ -697,6 +746,19 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     utmMetadata?: InlineSessionDraft['utmMetadata'];
     billingApiUrl?: string;
     locale?: string;
+    /**
+     * High-level theme bundle that styles the button (and the fallback
+     * `FloPayCheckout` modal that opens when the saved-payment charge needs
+     * user interaction). One of: `'classic'`, `'modern-light'`, `'modern-dark'`,
+     * `'bold-light'`, `'bold-dark'`, `'glass-light'`, `'glass-dark'`. Explicit
+     * `buttonsStyles` still wins for fine-grained overrides.
+     */
+    theme?: ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat.
+     */
     buttonsTheme?: ButtonsLayoutTheme;
     buttonsStyles?: ButtonsLayoutStyles;
     onSuccess?: (event: FloPayAutomaticPaymentSuccessEvent) => void;
@@ -704,6 +766,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId, checkoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
+declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
 
 export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FloPay, FloPayElements } from '@flopay/js';
 import * as _flopay_shared from '@flopay/shared';
-import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutItem, CheckoutSubscription, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
+import { FloPayAppearance, InlineSessionDraft, FloPayError, PaymentResult, DeclineEvent, CheckoutButtonMethod, BeforeButtonClickEvent, InlineSessionPatch, CheckoutMode, CheckoutSession, ElementOptions, ElementChangeEvent, TokenizedBody, AVSFieldConfig, GatewayEnvironment, CheckoutItem, CheckoutSubscription, ThemeId, ButtonsLayoutTheme, ButtonsLayoutStyles } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessionDraft, InlineSessionPatch } from '@flopay/shared';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -92,9 +92,22 @@ interface FloPayCheckoutProps {
     debug?: boolean;
     /** Layout mode: 'default' (all visible) or 'buttons' (PayPal/wallets + expandable card form). */
     layout?: 'default' | 'buttons';
-    /** Theme preset for the buttons layout: 'default', 'minimal', 'rounded', or 'dark'. */
+    /**
+     * High-level theme bundle that styles both the Stripe-side appearance and
+     * the FloPay wrapper / submit / inputs. One of: `'classic'` (historic FloPay
+     * look, no bundle applied), `'modern-light'`, `'modern-dark'`,
+     * `'bold-light'`, `'bold-dark'`, `'glass-light'`, `'glass-dark'`. Explicit
+     * `appearance` / `buttonsStyles` props still override their respective
+     * halves when supplied.
+     */
+    theme?: _flopay_shared.ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat.
+     */
     buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
-    /** Custom style overrides for the buttons layout. Merged on top of the theme preset. */
+    /** Style overrides merged on top of the resolved theme bundle / buttonsTheme preset. */
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
@@ -102,7 +115,11 @@ interface FloPayCheckoutProps {
     cardBackButtonContent?: React.ReactNode;
     /** Custom React content rendered for the card-form title. */
     cardTitleContent?: React.ReactNode;
-    /** Whether to show the default security footer in `layout="default"`. Defaults to `true`. */
+    /**
+     * @deprecated No longer rendered — the default-layout security footer was
+     * removed alongside the theme-bundle refactor. Retained as an optional
+     * prop so existing integrations type-check without changes.
+     */
     showSecurityFooter?: boolean;
     /**
      * Called when a payment method button is clicked.
@@ -176,7 +193,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, debug, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance: appearanceOverride, locale, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, debug, layout, theme, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter: _showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -422,22 +439,42 @@ interface SplitCardFormProps {
      */
     layout?: 'default' | 'buttons';
     /**
-     * Theme preset for the `buttons` layout. Ignored when `layout` is `'default'`.
-     * - `'default'` — white card button, neutral borders
-     * - `'minimal'` — borderless, subtle backgrounds
-     * - `'rounded'` — large border radius, soft shadows
-     * - `'dark'` — dark backgrounds, light text
+     * High-level theme bundle that styles the whole checkout (Stripe-side
+     * appearance + FloPay wrapper / submit button / inputs). One of:
+     * `'classic'` (historic FloPay look, no bundle applied), `'modern-light'`,
+     * `'modern-dark'`, `'bold-light'`, `'bold-dark'`, `'glass-light'`,
+     * `'glass-dark'`. Explicit `appearance` / `buttonsStyles` props still
+     * override their respective halves when provided.
+     */
+    theme?: _flopay_shared.ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat — the new union accepts the bundle ids too but you should
+     * migrate to the `theme` prop.
      */
     buttonsTheme?: _flopay_shared.ButtonsLayoutTheme;
-    /** Custom style overrides for the `buttons` layout. Merged on top of the theme preset. */
+    /** Style overrides merged on top of the resolved theme bundle / buttonsTheme preset. */
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
+    /**
+     * Appearance from `FloPayProvider` / `FloPayCheckout`. Threaded through so
+     * the React-rendered wrapper, submit button, title, and per-element card
+     * field styling can derive colors from `appearance.variables` when no
+     * explicit `buttonsStyles` is supplied. Bundle consumers (`THEMES[id]`) get
+     * a coherent look without having to forward both halves manually.
+     */
+    appearance?: _flopay_shared.FloPayAppearance;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
     /** Custom React content rendered for the buttons-layout card back button label. */
     cardBackButtonContent?: React.ReactNode;
     /** Custom React content rendered for the card-form title. */
     cardTitleContent?: React.ReactNode;
-    /** Whether to show the default security footer in `layout="default"`. Defaults to `true`. */
+    /**
+     * @deprecated No longer rendered — the default-layout security footer was
+     * removed alongside the theme-bundle refactor. Retained as an optional
+     * prop so existing integrations type-check without changes.
+     */
     showSecurityFooter?: boolean;
     /**
      * Called when a payment method button is clicked.
@@ -684,7 +721,19 @@ interface FloPayAutomaticPaymentSuccessEvent {
 interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {
     sessionId?: string;
     createSession?: InlineSessionDraft;
+    /**
+     * @deprecated Ignored. The backend now picks the customer's most recent
+     * vaulted payment method via `getLatestByUserId` and rebinds the session's
+     * gateway to match it (see `apps/api`'s `createSingle` auto-checkout
+     * branch). Passing this prop has no effect — it is retained only to avoid
+     * breaking existing integrations.
+     */
     paymentMethodId?: string;
+    /**
+     * @deprecated Ignored. The backend orchestrates gateway routing — clients
+     * no longer choose between card and PayPal at the SDK boundary. Passing
+     * this prop has no effect.
+     */
     checkoutMethod?: CheckoutButtonMethod;
     clientId?: string;
     items?: CheckoutItem[];
@@ -697,6 +746,19 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     utmMetadata?: InlineSessionDraft['utmMetadata'];
     billingApiUrl?: string;
     locale?: string;
+    /**
+     * High-level theme bundle that styles the button (and the fallback
+     * `FloPayCheckout` modal that opens when the saved-payment charge needs
+     * user interaction). One of: `'classic'`, `'modern-light'`, `'modern-dark'`,
+     * `'bold-light'`, `'bold-dark'`, `'glass-light'`, `'glass-dark'`. Explicit
+     * `buttonsStyles` still wins for fine-grained overrides.
+     */
+    theme?: ThemeId;
+    /**
+     * @deprecated Use `theme` instead. Legacy buttons-layout preset
+     * (`'default' | 'minimal' | 'rounded' | 'dark'`). Still honored for
+     * back-compat.
+     */
     buttonsTheme?: ButtonsLayoutTheme;
     buttonsStyles?: ButtonsLayoutStyles;
     onSuccess?: (event: FloPayAutomaticPaymentSuccessEvent) => void;
@@ -704,6 +766,6 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
     onDecline?: (decline: DeclineEvent) => void;
     children?: React.ReactNode;
 }
-declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId, checkoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
+declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId: _deprecatedPaymentMethodId, checkoutMethod: _deprecatedCheckoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, theme, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
 
 export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };