FloPayAPI Reference@flopay/react
FloPayProvider
React context provider that supplies FloPay SDK instances and billing configuration to the component tree.
FloPayProvider
Provides FloPay SDK context to the component tree. Wrap your checkout page (or entire app) with this provider.
function FloPayProvider(props: FloPayProviderProps): React.ReactElementProps
| Name | Type | Required | Description |
|---|---|---|---|
flopay | Promise<FloPay> | FloPay | Yes | A FloPay instance or a promise that resolves to one (from loadFloPay()). |
paypalFlopay | Promise<FloPay> | FloPay | null | No | Optional Stripe FloPay instance used by the Stripe-rendered PayPal fallback. Direct PayPal does not use this prop. |
options | object | No | Provider configuration. See below. |
onInstrument | (event: FloInstrumentEvent) => void | No | Receives the versioned, privacy-safe checkout funnel and failure feed for forwarding to your own analytics. Use this when you compose the payment surfaces yourself; FloPayCheckout exposes the same prop and already forwards the instruments raised by the provider it owns. Requires SDK 1.7.0 or later. See Checkout analytics. |
children | React.ReactNode | Yes | Child components that will have access to FloPay context. |
options
| Name | Type | Description |
|---|---|---|
billingApiUrl | string | Billing API base URL. Set it here so child components do not need to repeat it. |
Behavior
- Resolves the
flopaypromise if one is passed. - Resolves and exposes the optional
paypalFlopayinstance for the Stripe-rendered PayPal fallback. - Resolves
options.billingApiUrland exposes it to child checkout components. - Forwards provider telemetry into the
onInstrumentmerchant feed.
Example
import { FloPayProvider } from '@flopay/react';
import { loadFloPay } from '@flopay/js';
const flopayPromise = loadFloPay('pk_test_...');
function App() {
return (
<FloPayProvider
flopay={flopayPromise}
options={{
billingApiUrl: 'https://api.example.com',
}}
>
<YourCheckout />
</FloPayProvider>
);
}