Customize the appearance of FloPay payment elements with themes and CSS variables.

Theming

FloPay provides a FloPayAppearance configuration that controls the visual style of payment elements. Three built-in themes are available, and you can customize individual variables.

Built-in Themes

DEFAULT_APPEARANCE

import { DEFAULT_APPEARANCE } from '@flopay/shared';
 
// {
//   theme: 'default',
//   variables: {
//     colorPrimary: '#4A49FF',
//     colorBackground: '#FFFFFF',
//     colorText: '#262833',
//     colorDanger: '#DF1B41',
//     borderRadius: '8px',
//     fontFamily: 'Poppins, system-ui, sans-serif',
//     fontSizeBase: '16px',
//     spacingUnit: '4px',
//   },
// }

FLAT_APPEARANCE

Minimal borders and shadows with tighter border radius:

import { FLAT_APPEARANCE } from '@flopay/shared';
 
// {
//   theme: 'flat',
//   variables: {
//     ...DEFAULT_APPEARANCE.variables,
//     borderRadius: '4px',
//   },
// }

NIGHT_APPEARANCE

Dark background with adjusted colors:

import { NIGHT_APPEARANCE } from '@flopay/shared';
 
// {
//   theme: 'night',
//   variables: {
//     colorPrimary: '#7B7BFF',
//     colorBackground: '#1A1A2E',
//     colorText: '#E0E0E0',
//     colorDanger: '#FF6B6B',
//     borderRadius: '8px',
//     fontFamily: 'Poppins, system-ui, sans-serif',
//     fontSizeBase: '16px',
//     spacingUnit: '4px',
//   },
// }

Applying a Theme

Pass the appearance to FloPayProvider options or to loadFloPay:

import { NIGHT_APPEARANCE } from '@flopay/shared';
import { loadFloPay } from '@flopay/js';
import { FloPayProvider, CheckoutForm } from '@flopay/react';
 
const flopayPromise = loadFloPay('pk_test_...');
 
function DarkCheckout() {
  return (
    <FloPayProvider
      flopay={flopayPromise}
      options={{
        appearance: NIGHT_APPEARANCE,
        paymentMethodCreation: 'manual',
      }}
    >
      <CheckoutForm sessionId="..." billingApiUrl="..." onComplete={handleComplete} />
    </FloPayProvider>
  );
}

Custom Appearance

Create your own appearance by defining the variables you want to override:

import type { FloPayAppearance } from '@flopay/shared';
 
const customAppearance: FloPayAppearance = {
  theme: 'default',
  variables: {
    colorPrimary: '#0066FF',
    colorBackground: '#F8F9FA',
    colorText: '#333333',
    colorDanger: '#CC0000',
    borderRadius: '12px',
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSizeBase: '14px',
    spacingUnit: '6px',
  },
};

Variable Reference

Variable	Type	Description
`colorPrimary`	CSS color	Primary/accent color for buttons and focus states
`colorBackground`	CSS color	Background color of input fields
`colorText`	CSS color	Text color for labels and input values
`colorDanger`	CSS color	Error message and validation state color
`borderRadius`	CSS length	Border radius for inputs and buttons
`fontFamily`	CSS font-family	Font stack for all text
`fontSizeBase`	CSS length	Base font size
`spacingUnit`	CSS length	Base spacing unit for padding and margins

The appearance is passed through to the underlying Stripe Elements configuration. Stripe maps these variables to its own theming system.

Buttons Layout Slots

When you use FloPayCheckout with layout="buttons", the expanded card form also supports content slots for the card button, back button label, and title:

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  cardButtonContent="Pay by card"
  cardBackButtonContent=""
  cardTitleContent="Enter card details"
  onComplete={handleSuccess}
/>

Pass any ReactNode to these props. Passing '' removes the text completely. The demo /theme playground includes controls for these slot props alongside the existing buttonsStyles options.

Theming

On this page