FloPay
Getting started

React Quick Start

Build your first checkout form with FloPay in a React application.

React Quick Start

This guide walks through a minimal working checkout using @flopay/react.

Prerequisites

  • Packages installed (Installation)
  • A checkout session ID from the billing API

The simplest way to add payments — one component, one prop:

import { FloPayCheckout } from '@flopay/react';
 
export default function CheckoutPage() {
  return (
    <FloPayCheckout
      sessionId="sess_abc123"
      onComplete={(result) => {
        console.log('Payment succeeded:', result);
        window.location.href = '/success';
      }}
      onError={(error) => {
        console.error('Payment failed:', error.message);
      }}
    />
  );
}

That's the entire integration. FloPayCheckout handles everything:

  1. Fetches the checkout session from the billing API
  2. Detects the payment provider and extracts the publishable key
  3. Initializes the FloPay SDK automatically
  4. Renders a SplitCardForm with card fields + PayPal
  5. Injects customer data (email, userId) from the session
  6. Runs the full payment flow: tokenize → create intent → confirm → process → 3DS retry
  7. Calls onComplete with the PaymentResult

billingApiUrl defaults to the shared constant. You only need to pass it if your billing API is at a different URL.

Next Steps

Advanced: Manual Provider Setup

For full control over provider initialization, you can set up FloPayProvider manually:

import { loadFloPay } from '@flopay/js';
import { FloPayProvider, CheckoutForm } from '@flopay/react';
 
const flopayPromise = loadFloPay('pk_test_your_publishable_key');
 
export default function CheckoutPage() {
  return (
    <FloPayProvider
      flopay={flopayPromise}
      options={{ paymentMethodCreation: 'manual' }}
    >
      <CheckoutForm
        sessionId="sess_abc123"
        email="customer@example.com"
        onComplete={(result) => {
          console.log('Payment succeeded:', result);
        }}
        onError={(error) => {
          console.error('Payment failed:', error.message);
        }}
      />
    </FloPayProvider>
  );
}

Use this when you need to:

  • Control the Stripe publishable key explicitly
  • Pass custom element options (clientSecret, amount, currency)
  • Use the FloPay SDK outside of React
  • Render multiple form components in custom layouts

Previous

Installation

Next

Node.js Quick Start

On this page