FloPay Docs

React context provider that supplies the FloPay SDK and Elements instances 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.ReactElement

Props

Name	Type	Required	Description
`flopay`	`Promise<FloPay> \| FloPay`	Yes	A `FloPay` instance or a promise that resolves to one (from `loadFloPay()`).
`options`	`object`	No	Configuration applied when creating the elements group. See below.
`children`	`React.ReactNode`	Yes	Child components that will have access to FloPay context.

`options`

Name	Type	Description
`locale`	`string`	Locale code (e.g. `"en"`).
`appearance`	`FloPayAppearance`	Appearance overrides for elements.
`clientSecret`	`string`	Client secret for the PaymentIntent or SetupIntent.
`amount`	`number`	Total amount in smallest currency unit (cents). Used when no `clientSecret`.
`currency`	`string`	ISO 4217 currency code (lowercase). Used when no `clientSecret`.
`paymentMethodCreation`	`'manual' \| 'auto'`	How payment methods are created. `'manual'` (default for cards) or `'auto'` (needed for PayPal).

Behavior

Resolves the flopay promise if one is passed.
Creates a FloPayElements group once the FloPay instance is ready.
Recreates elements when appearance, clientSecret, amount, or currency changes.
Cleans up elements on unmount.

Example

import { FloPayProvider } from '@flopay/react';
import { loadFloPay } from '@flopay/js';
 
const flopayPromise = loadFloPay('pk_test_...');
 
function App() {
  return (
    <FloPayProvider
      flopay={flopayPromise}
      options={{
        amount: 4999,
        currency: 'usd',
        appearance: { theme: 'default' },
      }}
    >
      <CheckoutForm sessionId="uuid" billingApiUrl="https://api.example.com" />
    </FloPayProvider>
  );
}

FloPayProvider

FloPayProvider

Props

options

Behavior

Example

On this page

`options`