import { loadFloPay } from '@flopay/js';
import { FloPayProvider, CheckoutForm } from '@flopay/react';
 
const flopayPromise = loadFloPay('pk_test_...');
 
function Checkout() {
  return (
    <FloPayProvider flopay={flopayPromise} options={{ paymentMethodCreation: 'manual' }}>
      <CheckoutForm
        sessionId="sess_abc123"
        billingApiUrl="https://billing.example.com"
        email="user@example.com"
        userId="user_1"
        onComplete={(result) => {
          window.location.href = '/success';
        }}
        onError={(error) => {
          console.error(error.type, error.message);
        }}
      />
    </FloPayProvider>
  );
}

import { useRef } from 'react';
import { CheckoutForm, type CheckoutFormRef } from '@flopay/react';
 
function DelegatedCheckout() {
  const formRef = useRef<CheckoutFormRef>(null);
  const [processing, setProcessing] = useState(false);
 
  const handleTokenized = async (tokenizedBody: TokenizedBody) => {
    setProcessing(true);
    const res = await fetch('/api/my-payment', {
      method: 'POST',
      body: JSON.stringify(tokenizedBody),
    });
    const data = await res.json();
 
    if (data.type === '3ds_required') {
      await formRef.current?.handleNextAction(data.threeDSecureToken);
    }
    setProcessing(false);
  };
 
  return (
    <CheckoutForm
      ref={formRef}
      sessionId="sess_abc123"
      billingApiUrl="https://billing.example.com"
      onTokenizedBody={handleTokenized}
      isProcessing={processing}
    />
  );
}