FloPay Docs

A complete React checkout page using FloPayProvider and CheckoutForm for a self-contained payment flow.

The simplest way to accept payments with FloPay. The CheckoutForm component handles the entire lifecycle internally: card tokenization, PaymentIntent creation, 3DS confirmation, and backend submission. You just handle the success callback.

app/checkout/page.tsx

'use client';
 
import { useMemo } from 'react';
import { loadFloPay } from '@flopay/js';
import { FloPayProvider, CheckoutForm } from '@flopay/react';
import type { PaymentResult } from '@flopay/shared';
 
const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!;
const BILLING_API_URL = process.env.NEXT_PUBLIC_BILLING_API_URL!;
 
export default function CheckoutPage() {
  const sessionId = 'your-session-uuid'; // from URL params or server
  const customerEmail = 'customer@example.com';
 
  const floPayPromise = useMemo(
    () => loadFloPay(PUBLISHABLE_KEY),
    [],
  );
 
  function handleComplete(result: PaymentResult) {
    if (result.status === 'succeeded') {
      window.location.href = '/success';
    }
  }
 
  return (
    <FloPayProvider
      flopay={floPayPromise}
      options={{ currency: 'usd', amount: 4999 }}
    >
      <CheckoutForm
        sessionId={sessionId}
        billingApiUrl={BILLING_API_URL}
        email={customerEmail}
        userId="user_123"
        onComplete={handleComplete}
        onError={(err) => console.error('Payment failed:', err.message)}
        submitLabel="Pay $49.99"
        showAddress="billing"
        layout="auto"
      />
    </FloPayProvider>
  );
}

When a clientSecret is available from your session, pass it via FloPayProvider options instead of amount/currency:

<FloPayProvider
  flopay={floPayPromise}
  options={{ clientSecret: session.clientSecret }}
>

The CheckoutForm internally handles:

Validating and tokenizing the card
Creating a PaymentIntent via the billing API
Confirming the payment (including 3DS challenges)
Calling processPayment on the backend
Retrying 3DS if the backend returns 3ds_required

Basic Card Payment

On this page