PayFanout API reference
    Preparing search index...

    Interface PaymentFieldsProps

    interface PaymentFieldsProps {
        appearance?: Record<string, unknown>;
        children?: ReactNode;
        className?: string;
        clientSecret: string;
        fieldOptions?: Record<string, unknown>;
        locale?: string;
        onChange?: (state: FieldsChangeState) => void;
        onError?: (err: UnifiedError) => void;
        onReady?: () => void;
        psp?: string;
        saveConsent?: SaveConsentOptions;
        style?: CSSProperties;
    }
    Index
    appearance? children? className? clientSecret fieldOptions? locale? onChange? onError? onReady? psp? saveConsent? style?
    appearance?: Record<string, unknown>

    Visual theme for the hosted fields. The adapters that render themeable hosted card fields — today Stripe and Paysafe — translate a small cross-PSP common token set (colorPrimary, colorText, colorDanger, colorBackground, fontFamily, fontSize) to their native format, so one appearance styles either of them. PSP-native shapes still pass through for power users (Stripe's Appearance API { variables, theme, rules }; Paysafe's style selector map like { input: { … } }): Stripe ignores unrecognized keys, and Paysafe warns (console) about entries it cannot apply. Other PSPs take their own native appearance shape (PayPal button style, GoCardless panel, PayZen); the common tokens do not apply to them.

    children?: ReactNode

    Layout slots for split-field PSPs (Paysafe): render your own structure with elements carrying data-payfanout-field="cardNumber|expiryDate|cvv" and the hosted fields mount INTO them — your grid, your spacing, your labels. Single-element PSPs (Stripe) ignore slots; layout goes via fieldOptions.

    className?: string
    clientSecret: string

    PaymentSession.clientSecret from the server's createPaymentSession.

    fieldOptions?: Record<string, unknown>

    PSP-vocabulary UI options passed through to the SDK (Stripe: Payment Element layout/paymentMethodOrder/fields/terms/…; Paysafe: per-field placeholders under fields, locale, …).

    locale?: string

    BCP-47 locale for the PSP's own field texts, where supported.

    onChange?: (state: FieldsChangeState) => void

    Live field validity — fires { complete: false } on mount, then on every change. The canonical "disable Pay until complete" hook, PSP-agnostic.

    onError?: (err: UnifiedError) => void
    onReady?: () => void
    psp?: string

    Defaults to the provider's active PSP.

    saveConsent?: SaveConsentOptions

    Renders an accessible "save my card" consent checkbox after the hosted fields — unchecked by default, never auto-saved. The checkbox only REPORTS consent via onChange: the host forwards it to its own server, which sets savePaymentMethod: true on createPaymentSession when (and only when) the customer checked it. Style it via [data-payfanout-save-consent].

    style?: CSSProperties

    Settings
    Member Visibility

    On This Page
    Properties