@flopay/react 1.7.0 → 1.8.1

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as _flopay_shared from '@flopay/shared';
-import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, GatewayEnvironment, PayPalProviderObjectType, TokenizedBody, InlineSessionPatch, ElementOptions, ElementChangeEvent, FloInstrumentEvent, BeforeButtonClickEvent, CheckoutMode, AVSFieldConfig, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
+import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, GatewayEnvironment, PayPalProviderObjectType, TokenizedBody, InlineSessionPatch, FloInstrumentEvent, BeforeButtonClickEvent, CheckoutMode, AVSFieldConfig, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, dropThirdPartyOnlyError } from '@flopay/shared';
 import React from 'react';
 export { FloPayCardSetup, FloPayCardSetupCancelEvent, FloPayCardSetupCompleteEvent, FloPayCardSetupDeclineEvent, FloPayCardSetupError, FloPayCardSetupProps } from './card-setup-entry.cjs';
-import { FloPayElements, FloPay } from '@flopay/js';
+import { FloPay } from '@flopay/js';
 
 interface FloPayAutomaticPaymentSuccessEvent {
     result: PaymentResult;
@@ -211,48 +211,6 @@ interface DirectPayPalButtonProps {
 /** Public direct-PayPal surface: telemetry accepts only the boolean opt-out. */
 declare function DirectPayPalButton(props: DirectPayPalButtonProps): React.ReactElement | null;
 
-/** Common props shared by all element components. */
-interface ElementComponentProps {
-    /** Additional CSS class for the wrapper div. */
-    className?: string;
-    /** Element id attribute for the wrapper div. */
-    id?: string;
-    /** Inline styles for the wrapper div. */
-    style?: React.CSSProperties;
-    /** Options forwarded to the underlying element. */
-    options?: Partial<ElementOptions>;
-    /** Fired when the element's value changes. */
-    onChange?: (event: ElementChangeEvent) => void;
-    /** Fired when the element is fully rendered and ready. */
-    onReady?: () => void;
-    /** Fired when the element gains focus. */
-    onFocus?: () => void;
-    /** Fired when the element loses focus. */
-    onBlur?: () => void;
-    /** Fired when the Escape key is pressed inside the element. */
-    onEscape?: () => void;
-}
-/** Props for the standalone non-card Payment Element. */
-interface PaymentElementProps extends Omit<ElementComponentProps, 'options'> {
-    /**
-     * Element options with an explicit wallet/APM allowlist. `card` is removed
-     * at runtime; an empty result is rejected before the provider is called.
-     */
-    options: Omit<Partial<ElementOptions>, 'paymentMethodTypes'> & {
-        paymentMethodTypes: readonly string[];
-    };
-}
-/**
- * Renders a provider Payment Element restricted to the declared non-card
- * wallet/APM methods. Card collection is available only through the hosted
- * vault checkout surfaces.
- */
-declare const PaymentElement: React.FC<PaymentElementProps>;
-/**
- * Renders an address input element.
- */
-declare const AddressElement: React.FC<ElementComponentProps>;
-
 /** Props for the all-in-one `FloPayCheckout` wrapper. */
 interface FloPayCheckoutProps {
     /** The checkout session ID (UUID from billing API). Required unless `createSession` is provided. */
@@ -474,13 +432,6 @@ declare function useFloPay(): FloPay | null;
  * Must be called within a `<FloPayProvider>`.
  */
 declare function usePayPalFloPay(): FloPay | null;
-/**
- * Returns the current `FloPayElements` instance, or `null` if the
- * provider is still loading.
- *
- * Must be called within a `<FloPayProvider>`.
- */
-declare function useElements(): FloPayElements | null;
 /** Checkout state exposed by `useCheckout()`. */
 interface CheckoutState {
     session: CheckoutSession | null;
@@ -496,66 +447,6 @@ interface CheckoutState {
  */
 declare function useCheckout(): CheckoutState;
 
-/**
- * Props for the `PayPalButton` component.
- *
- * Must be rendered inside its own `FloPayProvider` with `paymentMethodCreation: undefined`
- * (not 'manual') because this PayPal flow needs automatic payment-method creation.
- */
-interface PayPalButtonProps {
-    /** The checkout session ID (UUID from billing API). */
-    sessionId: string;
-    /**
-     * Session-bound checkout token returned by session creation. Forwarded as
-     * `x-checkout-session-token` on continuation requests — required by
-     * post-#640 backends.
-     */
-    nonce?: string;
-    /** Billing API base URL. Optional — defaults to the value from FloPayProvider or the shared constant. */
-    billingApiUrl?: string;
-    /** User's email. */
-    email?: string;
-    /** User ID for processing payments. */
-    userId?: string;
-    /** First name for billing. */
-    firstName?: string;
-    /** Last name for billing. */
-    lastName?: string;
-    /** Checkout version for tracking. */
-    chv?: string;
-    /**
-     * Called with tokenized data after PayPal authorization.
-     * If omitted, the component calls processPayment internally.
-     */
-    onTokenizedBody?: (body: TokenizedBody) => void;
-    /** Called on successful payment (self-contained mode). */
-    onComplete?: () => void;
-    /** Called when an error occurs. */
-    onErrorChange?: (error: string | null) => void;
-    /** External processing state. */
-    isProcessing?: boolean;
-}
-/**
- * PayPal button that handles the full PayPal payment flow.
- *
- * **Important**: PayPal requires its own `FloPayProvider` with automatic
- * payment-method creation. Keep it separate from manually created wallet/APM
- * Elements groups.
- *
- * ```tsx
- * {/* Main checkout provider *\/}
- * <FloPayProvider flopay={flopay} options={{ amount, currency }}>
- *   <SplitCardForm ... />
- * </FloPayProvider>
- *
- * {/* PayPal provider (no paymentMethodCreation) *\/}
- * <FloPayProvider flopay={flopay} options={{ amount, currency, paymentMethodCreation: 'auto' }}>
- *   <PayPalButton ... />
- * </FloPayProvider>
- * ```
- */
-declare function PayPalButton({ sessionId, nonce, billingApiUrl, email, userId, firstName, lastName, chv, onTokenizedBody, onComplete, onErrorChange, isProcessing, }: PayPalButtonProps): React.ReactElement;
-
 /** Props for the `FloPayProvider` component. */
 interface FloPayProviderProps {
     /** A `FloPay` instance or a promise that resolves to one (from `loadFloPay()`). */
@@ -566,25 +457,8 @@ interface FloPayProviderProps {
      * not rendered. Direct PayPal (`gateways.paypal`) does not use this prop.
      */
     paypalFlopay?: Promise<FloPay> | FloPay | null;
-    /** Optional configuration applied when creating the elements group. */
+    /** Optional provider configuration. */
     options?: {
-        locale?: string;
-        appearance?: FloPayAppearance;
-        /**
-         * Client secret for an existing non-card PaymentIntent or SetupIntent.
-         * The SDK verifies the provider intent against the `PaymentElement`'s
-         * explicit `paymentMethodTypes` allowlist before mounting and rejects card
-         * or undeclared methods. Card checkout uses the hosted vault.
-         */
-        clientSecret?: string;
-        /** Total amount in cents for deferred non-card Elements without a client secret. */
-        amount?: number;
-        /** ISO 4217 currency code for deferred non-card Elements without a client secret. */
-        currency?: string;
-        /** How non-card payment methods are created: `'manual'` or `'auto'` (needed for PayPal). */
-        paymentMethodCreation?: 'manual' | 'auto';
-        /** Requests reusable payment credentials for future payments. */
-        setupFutureUsage?: 'off_session' | 'on_session';
         /** Billing API base URL. Set once here so child components don't need to repeat it. */
         billingApiUrl?: string;
     };
@@ -595,16 +469,15 @@ interface FloPayProviderProps {
 /**
  * Provides FloPay SDK context to the component tree.
  *
- * Wrap provider-context elements with this provider:
+ * Wrap components that consume FloPay context with this provider:
  *
  * ```tsx
  * <FloPayProvider flopay={loadFloPay('pk_test_...')}>
- *   <PaymentElement options={{ paymentMethodTypes: ['cashapp', 'ideal'] }} />
+ *   <YourCheckout />
  * </FloPayProvider>
  * ```
  *
- * `FloPayCheckout` is a standalone integration that owns its provider and
- * session-specific Elements setup:
+ * `FloPayCheckout` is a standalone integration that owns its provider:
  *
  * ```tsx
  * <FloPayCheckout sessionId="sess_..." />
@@ -912,4 +785,4 @@ interface VaultCardFieldsProps {
  */
 declare function VaultCardFields({ capture, html, messageToken, expectedOrigin, theme, containerStyle, onReady, onError, onValidation, }: VaultCardFieldsProps): React.ReactElement;
 
-export { AddressElement, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type DirectPayPalInitializationState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, type PaymentElementProps, SplitCardForm, type SplitCardFormProps, VaultCardFields, type VaultCardFieldsProps, useCheckout, useElements, useFloPay, usePayPalFloPay };
+export { type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type DirectPayPalInitializationState, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, SplitCardForm, type SplitCardFormProps, VaultCardFields, type VaultCardFieldsProps, useCheckout, useFloPay, usePayPalFloPay };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as _flopay_shared from '@flopay/shared';
-import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, GatewayEnvironment, PayPalProviderObjectType, TokenizedBody, InlineSessionPatch, ElementOptions, ElementChangeEvent, FloInstrumentEvent, BeforeButtonClickEvent, CheckoutMode, AVSFieldConfig, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
+import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, GatewayEnvironment, PayPalProviderObjectType, TokenizedBody, InlineSessionPatch, FloInstrumentEvent, BeforeButtonClickEvent, CheckoutMode, AVSFieldConfig, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
 export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, dropThirdPartyOnlyError } from '@flopay/shared';
 import React from 'react';
 export { FloPayCardSetup, FloPayCardSetupCancelEvent, FloPayCardSetupCompleteEvent, FloPayCardSetupDeclineEvent, FloPayCardSetupError, FloPayCardSetupProps } from './card-setup-entry.js';
-import { FloPayElements, FloPay } from '@flopay/js';
+import { FloPay } from '@flopay/js';
 
 interface FloPayAutomaticPaymentSuccessEvent {
     result: PaymentResult;
@@ -211,48 +211,6 @@ interface DirectPayPalButtonProps {
 /** Public direct-PayPal surface: telemetry accepts only the boolean opt-out. */
 declare function DirectPayPalButton(props: DirectPayPalButtonProps): React.ReactElement | null;
 
-/** Common props shared by all element components. */
-interface ElementComponentProps {
-    /** Additional CSS class for the wrapper div. */
-    className?: string;
-    /** Element id attribute for the wrapper div. */
-    id?: string;
-    /** Inline styles for the wrapper div. */
-    style?: React.CSSProperties;
-    /** Options forwarded to the underlying element. */
-    options?: Partial<ElementOptions>;
-    /** Fired when the element's value changes. */
-    onChange?: (event: ElementChangeEvent) => void;
-    /** Fired when the element is fully rendered and ready. */
-    onReady?: () => void;
-    /** Fired when the element gains focus. */
-    onFocus?: () => void;
-    /** Fired when the element loses focus. */
-    onBlur?: () => void;
-    /** Fired when the Escape key is pressed inside the element. */
-    onEscape?: () => void;
-}
-/** Props for the standalone non-card Payment Element. */
-interface PaymentElementProps extends Omit<ElementComponentProps, 'options'> {
-    /**
-     * Element options with an explicit wallet/APM allowlist. `card` is removed
-     * at runtime; an empty result is rejected before the provider is called.
-     */
-    options: Omit<Partial<ElementOptions>, 'paymentMethodTypes'> & {
-        paymentMethodTypes: readonly string[];
-    };
-}
-/**
- * Renders a provider Payment Element restricted to the declared non-card
- * wallet/APM methods. Card collection is available only through the hosted
- * vault checkout surfaces.
- */
-declare const PaymentElement: React.FC<PaymentElementProps>;
-/**
- * Renders an address input element.
- */
-declare const AddressElement: React.FC<ElementComponentProps>;
-
 /** Props for the all-in-one `FloPayCheckout` wrapper. */
 interface FloPayCheckoutProps {
     /** The checkout session ID (UUID from billing API). Required unless `createSession` is provided. */
@@ -474,13 +432,6 @@ declare function useFloPay(): FloPay | null;
  * Must be called within a `<FloPayProvider>`.
  */
 declare function usePayPalFloPay(): FloPay | null;
-/**
- * Returns the current `FloPayElements` instance, or `null` if the
- * provider is still loading.
- *
- * Must be called within a `<FloPayProvider>`.
- */
-declare function useElements(): FloPayElements | null;
 /** Checkout state exposed by `useCheckout()`. */
 interface CheckoutState {
     session: CheckoutSession | null;
@@ -496,66 +447,6 @@ interface CheckoutState {
  */
 declare function useCheckout(): CheckoutState;
 
-/**
- * Props for the `PayPalButton` component.
- *
- * Must be rendered inside its own `FloPayProvider` with `paymentMethodCreation: undefined`
- * (not 'manual') because this PayPal flow needs automatic payment-method creation.
- */
-interface PayPalButtonProps {
-    /** The checkout session ID (UUID from billing API). */
-    sessionId: string;
-    /**
-     * Session-bound checkout token returned by session creation. Forwarded as
-     * `x-checkout-session-token` on continuation requests — required by
-     * post-#640 backends.
-     */
-    nonce?: string;
-    /** Billing API base URL. Optional — defaults to the value from FloPayProvider or the shared constant. */
-    billingApiUrl?: string;
-    /** User's email. */
-    email?: string;
-    /** User ID for processing payments. */
-    userId?: string;
-    /** First name for billing. */
-    firstName?: string;
-    /** Last name for billing. */
-    lastName?: string;
-    /** Checkout version for tracking. */
-    chv?: string;
-    /**
-     * Called with tokenized data after PayPal authorization.
-     * If omitted, the component calls processPayment internally.
-     */
-    onTokenizedBody?: (body: TokenizedBody) => void;
-    /** Called on successful payment (self-contained mode). */
-    onComplete?: () => void;
-    /** Called when an error occurs. */
-    onErrorChange?: (error: string | null) => void;
-    /** External processing state. */
-    isProcessing?: boolean;
-}
-/**
- * PayPal button that handles the full PayPal payment flow.
- *
- * **Important**: PayPal requires its own `FloPayProvider` with automatic
- * payment-method creation. Keep it separate from manually created wallet/APM
- * Elements groups.
- *
- * ```tsx
- * {/* Main checkout provider *\/}
- * <FloPayProvider flopay={flopay} options={{ amount, currency }}>
- *   <SplitCardForm ... />
- * </FloPayProvider>
- *
- * {/* PayPal provider (no paymentMethodCreation) *\/}
- * <FloPayProvider flopay={flopay} options={{ amount, currency, paymentMethodCreation: 'auto' }}>
- *   <PayPalButton ... />
- * </FloPayProvider>
- * ```
- */
-declare function PayPalButton({ sessionId, nonce, billingApiUrl, email, userId, firstName, lastName, chv, onTokenizedBody, onComplete, onErrorChange, isProcessing, }: PayPalButtonProps): React.ReactElement;
-
 /** Props for the `FloPayProvider` component. */
 interface FloPayProviderProps {
     /** A `FloPay` instance or a promise that resolves to one (from `loadFloPay()`). */
@@ -566,25 +457,8 @@ interface FloPayProviderProps {
      * not rendered. Direct PayPal (`gateways.paypal`) does not use this prop.
      */
     paypalFlopay?: Promise<FloPay> | FloPay | null;
-    /** Optional configuration applied when creating the elements group. */
+    /** Optional provider configuration. */
     options?: {
-        locale?: string;
-        appearance?: FloPayAppearance;
-        /**
-         * Client secret for an existing non-card PaymentIntent or SetupIntent.
-         * The SDK verifies the provider intent against the `PaymentElement`'s
-         * explicit `paymentMethodTypes` allowlist before mounting and rejects card
-         * or undeclared methods. Card checkout uses the hosted vault.
-         */
-        clientSecret?: string;
-        /** Total amount in cents for deferred non-card Elements without a client secret. */
-        amount?: number;
-        /** ISO 4217 currency code for deferred non-card Elements without a client secret. */
-        currency?: string;
-        /** How non-card payment methods are created: `'manual'` or `'auto'` (needed for PayPal). */
-        paymentMethodCreation?: 'manual' | 'auto';
-        /** Requests reusable payment credentials for future payments. */
-        setupFutureUsage?: 'off_session' | 'on_session';
         /** Billing API base URL. Set once here so child components don't need to repeat it. */
         billingApiUrl?: string;
     };
@@ -595,16 +469,15 @@ interface FloPayProviderProps {
 /**
  * Provides FloPay SDK context to the component tree.
  *
- * Wrap provider-context elements with this provider:
+ * Wrap components that consume FloPay context with this provider:
  *
  * ```tsx
  * <FloPayProvider flopay={loadFloPay('pk_test_...')}>
- *   <PaymentElement options={{ paymentMethodTypes: ['cashapp', 'ideal'] }} />
+ *   <YourCheckout />
  * </FloPayProvider>
  * ```
  *
- * `FloPayCheckout` is a standalone integration that owns its provider and
- * session-specific Elements setup:
+ * `FloPayCheckout` is a standalone integration that owns its provider:
  *
  * ```tsx
  * <FloPayCheckout sessionId="sess_..." />
@@ -912,4 +785,4 @@ interface VaultCardFieldsProps {
  */
 declare function VaultCardFields({ capture, html, messageToken, expectedOrigin, theme, containerStyle, onReady, onError, onValidation, }: VaultCardFieldsProps): React.ReactElement;
 
-export { AddressElement, type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type DirectPayPalInitializationState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, type PaymentElementProps, SplitCardForm, type SplitCardFormProps, VaultCardFields, type VaultCardFieldsProps, useCheckout, useElements, useFloPay, usePayPalFloPay };
+export { type CheckoutState, DirectPayPalButton, type DirectPayPalButtonProps, type DirectPayPalInitializationState, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, SplitCardForm, type SplitCardFormProps, VaultCardFields, type VaultCardFieldsProps, useCheckout, useFloPay, usePayPalFloPay };