FloPay Docs

React wrapper components for FloPay payment elements (PaymentElement, CardElement, etc.).

Element Components

React components that wrap FloPay payment elements. Each component creates and mounts the corresponding element type into the DOM via a div container.

All element components share the same props interface and must be rendered inside a <FloPayProvider>.

`ElementComponentProps`

Name	Type	Required	Description
`className`	`string`	No	Additional CSS class for the wrapper div.
`id`	`string`	No	Element `id` attribute for the wrapper div.
`style`	`React.CSSProperties`	No	Inline styles for the wrapper div.
`options`	`Partial<ElementOptions>`	No	Options forwarded to the underlying element.
`onChange`	`(event: ElementChangeEvent) => void`	No	Fired when the element's value changes.
`onReady`	`() => void`	No	Fired when the element is fully rendered and ready.
`onFocus`	`() => void`	No	Fired when the element gains focus.
`onBlur`	`() => void`	No	Fired when the element loses focus.
`onEscape`	`() => void`	No	Fired when the Escape key is pressed inside the element.

Available Components

`PaymentElement`

Renders the unified Payment Element -- a single component that accepts cards, wallets, and other payment methods.

import { PaymentElement } from '@flopay/react';
 
<PaymentElement options={{ layout: 'tabs' }} />

`CardElement`

Renders a combined card input (number + expiry + CVC in one field).

import { CardElement } from '@flopay/react';
 
<CardElement onChange={(e) => setComplete(e.complete)} />

`CardNumberElement`

Renders a card number input field. Use with CardExpiryElement and CardCvcElement for split card forms.

import { CardNumberElement } from '@flopay/react';
 
<CardNumberElement onReady={() => setReady(true)} />

`CardExpiryElement`

Renders a card expiry input field.

import { CardExpiryElement } from '@flopay/react';
 
<CardExpiryElement />

`CardCvcElement`

Renders a card CVC input field.

import { CardCvcElement } from '@flopay/react';
 
<CardCvcElement />

`AddressElement`

Renders an address input element. Set mode to 'billing' or 'shipping' via options.

import { AddressElement } from '@flopay/react';
 
<AddressElement options={{ mode: 'billing' }} />

Lifecycle

Each element component:

Gets the FloPayElements instance from context.
Creates the appropriate element type (reuses existing if already created by the provider).
Mounts it into a ref'd container div.
Forwards events (change, ready, focus, blur, escape) as props.
Unmounts (but does not destroy) on component unmount to support React Strict Mode remounting.

Element Components

On this page