Custom Theme

import {
  DEFAULT_APPEARANCE,
  FLAT_APPEARANCE,
  NIGHT_APPEARANCE,
} from '@flopay/shared';
 
// DEFAULT_APPEARANCE
// theme: 'default'
// colorPrimary: '#4A49FF', colorBackground: '#FFFFFF',
// colorText: '#262833', colorDanger: '#DF1B41',
// borderRadius: '8px', fontFamily: 'Poppins, system-ui, sans-serif'
 
// FLAT_APPEARANCE
// theme: 'flat'
// Same as default but with borderRadius: '4px'
 
// NIGHT_APPEARANCE
// theme: 'night'
// colorPrimary: '#7B7BFF', colorBackground: '#1A1A2E',
// colorText: '#E0E0E0', colorDanger: '#FF6B6B'

'use client';
 
import { useMemo } from 'react';
import { loadFloPay } from '@flopay/js';
import { FloPayProvider, CheckoutForm } from '@flopay/react';
import type { FloPayAppearance } from '@flopay/shared';
 
const customAppearance: FloPayAppearance = {
  theme: 'default',
  variables: {
    colorPrimary: '#0F766E',
    colorBackground: '#F0FDFA',
    colorText: '#134E4A',
    colorDanger: '#DC2626',
    borderRadius: '12px',
    fontFamily: '"Inter", system-ui, sans-serif',
    fontSizeBase: '15px',
    spacingUnit: '5px',
  },
  rules: {
    '.Input': {
      border: '2px solid #99F6E4',
      padding: '12px',
      transition: 'border-color 0.2s',
    },
    '.Input:focus': {
      border: '2px solid #0F766E',
      boxShadow: '0 0 0 3px rgba(15, 118, 110, 0.15)',
    },
    '.Label': {
      fontWeight: '600',
      fontSize: '13px',
      textTransform: 'uppercase',
      letterSpacing: '0.05em',
    },
    '.Error': {
      color: '#DC2626',
      fontSize: '13px',
    },
  },
};
 
export default function ThemedCheckoutPage() {
  const floPayPromise = useMemo(
    () => loadFloPay(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!),
    [],
  );
 
  return (
    <FloPayProvider
      flopay={floPayPromise}
      options={{
        appearance: customAppearance,
        currency: 'usd',
        amount: 2999,
      }}
    >
      <CheckoutForm
        sessionId="your-session-uuid"
        billingApiUrl={process.env.NEXT_PUBLIC_BILLING_API_URL!}
        email="customer@example.com"
        onComplete={(result) => console.log('Paid!', result)}
        submitLabel="Subscribe"
      />
    </FloPayProvider>
  );
}