FloPay Docs

`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 | null

Must 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 | null

Must 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(): CheckoutState

`CheckoutState`

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>
  );
}

Hooks

`useFloPay`

`useElements`

`useCheckout`

`CheckoutState`

On this page