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 RefreshSessionButton({ sessionId }: { sessionId: string }) {
const flopay = useFloPay();
const handleRefresh = async () => {
if (!flopay) return;
const session = await flopay.retrieveSession(sessionId);
console.log(session.status);
};
return <button onClick={handleRefresh} disabled={!flopay}>Refresh session</button>;
}useCheckout
Returns the current checkout session state. Must be called within the checkout context rendered by <FloPayCheckout>.
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>
);
}