FloPayAPI Reference@flopay/react
Hooks
React hooks for accessing FloPay SDK instances and checkout state.
useFloPay
Returns the current FloPay instance, or null if the provider is still loading (i.e. the loadFloPay() promise has not resolved yet).
function useFloPay(): FloPay | nullMust be called within a <FloPayProvider>.
Returns: FloPay | null
import { useFloPay } from '@flopay/react';
function MyComponent() {
const flopay = useFloPay();
const handlePay = async () => {
if (!flopay) return;
const result = await flopay.confirmPayment({
clientSecret: 'pi_xxx_secret_xxx',
});
};
return <button onClick={handlePay} disabled={!flopay}>Pay</button>;
}useElements
Returns the current FloPayElements instance, or null if the provider is still loading.
function useElements(): FloPayElements | nullMust be called within a <FloPayProvider>.
Returns: FloPayElements | null
import { useElements } from '@flopay/react';
function MyComponent() {
const elements = useElements();
useEffect(() => {
if (!elements) return;
const card = elements.getElement('card');
// ...
}, [elements]);
}useCheckout
Returns the current checkout session state. Must be called within a <CheckoutProvider> (typically rendered internally by <CheckoutForm>).
function useCheckout(): CheckoutStateCheckoutState
| Property | Type | Description |
|---|---|---|
session | CheckoutSession | null | The current checkout session, or null if not yet loaded. |
loading | boolean | Whether the session is being fetched. |
error | FloPayError | null | Error that occurred during session retrieval. |
Returns: CheckoutState
import { useCheckout } from '@flopay/react';
function OrderSummary() {
const { session, loading, error } = useCheckout();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
if (!session) return null;
return (
<div>
Total: {session.amount} {session.currency}
</div>
);
}