import { FloPayCheckout } from '@flopay/react';

function CheckoutPage({ sessionId }: { sessionId: string }) {
  return (
    <FloPayCheckout
      sessionId={sessionId}
      onComplete={(result) => {
        window.location.href = '/success';
      }}
      onError={(err) => {
        console.error(err.type, err.message);
      }}
    />
  );
}

<FloPayCheckout
  sessionId={sessionId}
  checkoutMode="confirm"
  confirmLabel="Complete Purchase"
  onComplete={(result) => router.push('/success')}
/>

<FloPayCheckout
  sessionId={sessionId}
  checkoutMode="confirm"
  renderConfirmButton={({ onConfirm, isProcessing }) => (
    <button onClick={onConfirm} disabled={isProcessing}>
      {isProcessing ? 'Working...' : 'Buy Now'}
    </button>
  )}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  checkoutMode="auto"
  onComplete={(result) => router.push('/success')}
  onSessionCompleted={(successUrl) => router.push(successUrl)}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  theme="modern-light"
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  theme="bold-dark"
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  theme="glass-dark"
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  theme="modern-light"
  buttonsStyles={{
    cardButton: {
      borderRadius: '12px',
      border: '2px solid #4A49FF',
      fontWeight: 700,
    },
    cardFormContainer: {
      backgroundColor: '#f8f7ff',
      borderRadius: '12px',
    },
    cardInputBorder: '#c4c3ff',
    submitButton: {
      backgroundColor: '#2d2ccc',
      borderRadius: '12px',
    },
    backButton: {
      color: '#4A49FF',
    },
    backButtonIcon: {
      backgroundColor: '#ededff',
    },
    title: {
      color: '#2d2ccc',
      fontSize: '1.2rem',
    },
  }}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  cardButtonContent={
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '0.75rem',
        width: '100%',
      }}
    >
      <span style={{ fontWeight: 700 }}>Pay by card</span>
      <span style={{ fontSize: '0.75rem', opacity: 0.7 }}>
        Visa, Mastercard, Amex
      </span>
      <span style={{ marginLeft: 'auto', fontSize: '0.7rem' }}>Secure</span>
    </div>
  }
  onComplete={handleSuccess}
/>

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

import {
  THEMES,
  resolveTheme,
  MODERN_LIGHT_APPEARANCE,
  BUTTONS_LAYOUT_MODERN_LIGHT,
} from '@flopay/shared';

// Resolve by id
const bundle = resolveTheme('modern-light');

// Or merge a bundle's buttonsLayout with custom overrides
const customLayout = {
  ...BUTTONS_LAYOUT_MODERN_LIGHT,
  cardButton: {
    ...BUTTONS_LAYOUT_MODERN_LIGHT.cardButton,
    backgroundColor: '#f0f0ff',
  },
};

<FloPayCheckout
  layout="buttons"
  createSession={{
    clientId: '18bff186-284c-483f-acee-e712f21d2b8d',
    currency: 'EUR',
    products: [{
      code: 'omni-ai-booster',
      name: 'AI Supercharger Pack',
      totalAmount: 8000,
    }],
    account: {
      userId: 'user_123',
      email: 'customer@example.com',
      firstName: 'John',
      lastName: 'Doe',
    },
    successUrl: '/success',
    cancelUrl: '/cancel',
  }}
  onComplete={(result) => window.location.href = '/success'}
  onError={(err) => console.error(err.message)}
/>

<FloPayCheckout
  sessionId={sessionId}
  layout="buttons"
  onButtonClick={(method) => {
    // method: 'card' | 'paypal' | 'apple_pay' | 'google_pay'
    window.dataLayer?.push({
      event: 'initiate_checkout',
      payment_method: method,
    });
  }}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  layout="buttons"
  createSession={{
    clientId: 'your-client-id',
    currency: 'EUR',
    products: [{ code: 'product-1', totalAmount: 29.99 }],
    account: { userId: 'user_1', email: 'test@email.com' },
    successUrl: '/success',
    cancelUrl: '/cancel',
  }}
  onBeforeButtonClick={async ({ method, createSession }) => {
    if (method !== 'card') return;

    const email = await openEmailCaptureModal({
      initialEmail: createSession?.account.email ?? '',
    });
    if (!email) return false;

    return {
      account: { email },
      tagsData: { sessionId: 'email_captured' },
    };
  }}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  onDecline={(decline) => {
    // { method, message, code?, declineCode? }
    window.dataLayer?.push({
      event: 'checkout_decline',
      ...decline,
    });
  }}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  loading={<MySkeletonLoader />}
  onComplete={handleSuccess}
/>

<FloPayCheckout
  sessionId={sessionId}
  error={(err) => (
    <div className="error-banner">
      <p>Failed to load checkout: {err.message}</p>
      <button onClick={() => window.location.reload()}>Retry</button>
    </div>
  )}
  onComplete={handleSuccess}
/>

<FloPayCheckout sessionId={sessionId} debug onComplete={handleSuccess} />

import { FloPayCheckout, CheckoutForm } from '@flopay/react';

<FloPayCheckout sessionId={sessionId}>
  <CheckoutForm
    onComplete={handleSuccess}
    layout="accordion"
    showAddress="billing"
  />
</FloPayCheckout>

import { FloPayCheckout } from '@flopay/react';

<FloPayCheckout sessionId={sessionId} onComplete={handleSuccess} />

import { loadFloPay, PaymentAPI } from '@flopay/js';
import { FloPayProvider, SplitCardForm } from '@flopay/react';

const api = new PaymentAPI('https://api.stage.flopay.com');
const session = await api.getUnifiedCheckoutSession(sessionId);
const flopay = await loadFloPay(session.data.stripe?.publishableKey);

<FloPayProvider
  flopay={flopay}
  options={{ paymentMethodCreation: 'manual', amount: 4999, currency: 'usd' }}
>
  <SplitCardForm
    sessionId={sessionId}
    email="user@example.com"
    userId="user_123"
    onComplete={handleSuccess}
  />
</FloPayProvider>