FloPay Docs

Split card checkout form with separate card number, expiry, CVC fields, name input, and optional PayPal button.

SplitCardForm

Split card checkout form that renders individual card fields (CardNumber, CardExpiry, CardCVC), a full name input, and an optional PayPal button. Matches the checkout/StripeCardForm layout.

const SplitCardForm: React.ForwardRefExoticComponent<
  SplitCardFormProps & React.RefAttributes<SplitCardFormRef>
>

Props

Name	Type	Required	Default	Description
`sessionId`	`string`	Yes	--	Checkout session ID (UUID from billing API).
`billingApiUrl`	`string`	Yes	--	Billing API base URL.
`email`	`string`	No	--	User's email (required for creating payment intents).
`userId`	`string`	No	--	User ID (required for processing payments).
`onComplete`	`(result: PaymentResult) => void`	No	--	Called when payment completes successfully.
`onError`	`(error: FloPayError) => void`	No	--	Called when a payment error occurs.
`onTokenizedBody`	`(tokenizedBody: TokenizedBody) => void`	No	--	Override: delegates backend submission to the caller.
`firstName`	`string`	No	--	First name for billing.
`lastName`	`string`	No	--	Last name for billing.
`chv`	`string`	No	--	Checkout version for A/B tracking.
`submitLabel`	`string`	No	`'CONFIRM PAYMENT'`	Label for the submit button.
`className`	`string`	No	--	Additional CSS class for the form wrapper.
`children`	`React.ReactNode`	No	--	Custom children (overrides default submit button).
`isProcessing`	`boolean`	No	--	External processing state.
`error`	`string \| null`	No	--	External error message.
`onErrorChange`	`(error: string \| null) => void`	No	--	Called when internal error state changes.
`onFirstNameChange`	`(value: string) => void`	No	--	Callback when first name changes (parsed from full name input).
`onLastNameChange`	`(value: string) => void`	No	--	Callback when last name changes (parsed from full name input).
`showPayPal`	`boolean`	No	`true`	Show PayPal button above card fields.
`totalAmount`	`number`	No	`0`	Total amount in dollars (used for PayPal Elements config).
`currency`	`string`	No	`'usd'`	Currency code (used for PayPal Elements config).

SplitCardFormRef

Methods exposed via ref for external 3DS handling.

Method	Signature	Description
`handleNextAction`	`(clientSecret: string) => Promise<void>`	Trigger 3DS authentication with the given client secret.

Layout

The component renders in this order:

PayPal button (via Stripe ExpressCheckoutElement in a separate Elements instance)
"or pay with card" divider
Card Number field
Card Expiry + CVC fields (side by side)
Full Name input
Error display
Submit button
"Secure Card Checkout" badge

Example

<FloPayProvider
  flopay={flopayPromise}
  options={{ amount: 4999, currency: 'usd', paymentMethodCreation: 'manual' }}
>
  <SplitCardForm
    sessionId="uuid-xxx"
    billingApiUrl="https://api.example.com"
    email="user@example.com"
    userId="user_1"
    totalAmount={49.99}
    currency="usd"
    onComplete={(result) => router.push('/success')}
    onFirstNameChange={setFirstName}
    onLastNameChange={setLastName}
  />
</FloPayProvider>

SplitCardForm

SplitCardForm

Props

SplitCardFormRef

Layout

Example

On this page