FloPay
Guides

SplitCardForm

Use SplitCardForm for individual card fields with optional PayPal support.

SplitCardForm

SplitCardForm renders individual card input fields (CardNumber, CardExpiry, CardCVC) with a full name input and optional PayPal button. It follows the same self-contained / delegated pattern as CheckoutForm.

Layout

The form renders in this order:

  1. PayPal button (if showPayPal is true, default)
  2. "Or pay with card" divider
  3. Card Number field
  4. Card Expiry + Card CVC (side by side)
  5. Full Name input (First + Last)
  6. Submit button

Basic Usage

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

PayPal Integration

PayPal is enabled by default (showPayPal={true}). The SplitCardForm creates a separate Stripe Elements instance for PayPal -- this is required because PayPal's ExpressCheckoutElement cannot share an Elements instance that uses paymentMethodCreation: 'manual'.

When PayPal is enabled, you must provide totalAmount and currency:

<SplitCardForm
  sessionId="sess_abc123"
  billingApiUrl="https://billing.example.com"
  totalAmount={29.99}
  currency="usd"
  showPayPal={true}
  onComplete={handleComplete}
/>

To disable PayPal:

<SplitCardForm showPayPal={false} /* ... */ />

Props Reference

PropTypeDefaultDescription
sessionIdstring--Checkout session UUID (required)
billingApiUrlstring--Billing API base URL (required)
emailstring--Customer email
userIdstring--Customer user ID
onComplete(result: PaymentResult) => void--Success callback
onError(error: FloPayError) => void--Error callback
onTokenizedBody(body: TokenizedBody) => void--Enables delegated mode
showPayPalbooleantrueShow PayPal button
totalAmountnumber--Total in dollars (required for PayPal)
currencystring--Currency code (required for PayPal)
firstNamestring--Pre-fill first name
lastNamestring--Pre-fill last name
submitLabelstring--Custom submit button text
classNamestring--CSS class for form wrapper
childrenReactNode--Custom submit button
isProcessingboolean--External processing state
errorstring | null--External error message
onFirstNameChange(value: string) => void--First name change callback
onLastNameChange(value: string) => void--Last name change callback

SplitCardForm exposes a handleNextAction method via ref, identical to CheckoutForm. Use it for 3DS handling in delegated mode.

Previous

CheckoutForm

Next

PayPal Integration

On this page