FloPay Docs

Use individual card number, expiry, and CVC fields alongside an automatic PayPal button.

The SplitCardForm renders separate card number, expiry, and CVC inputs along with a full name field. When showPayPal is enabled (the default), a PayPal button appears above the card fields. PayPal is handled automatically via Stripe's ExpressCheckoutElement.

app/checkout/page.tsx

'use client';
 
import { useMemo } from 'react';
import { loadFloPay } from '@flopay/js';
import { FloPayProvider, SplitCardForm } from '@flopay/react';
import type { PaymentResult } from '@flopay/shared';
 
const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!;
const BILLING_API_URL = process.env.NEXT_PUBLIC_BILLING_API_URL!;
 
export default function SplitCheckoutPage() {
  const sessionId = 'your-session-uuid';
  const totalAmount = 49.99;
  const currency = 'usd';
 
  const floPayPromise = useMemo(
    () => loadFloPay(PUBLISHABLE_KEY),
    [],
  );
 
  function handleComplete(result: PaymentResult) {
    if (result.status === 'succeeded') {
      window.location.href = '/success';
    }
  }
 
  return (
    <FloPayProvider
      flopay={floPayPromise}
      options={{
        amount: Math.round(totalAmount * 100),
        currency,
      }}
    >
      <SplitCardForm
        sessionId={sessionId}
        billingApiUrl={BILLING_API_URL}
        email="customer@example.com"
        userId="user_123"
        firstName="Jane"
        lastName="Doe"
        totalAmount={totalAmount}
        currency={currency}
        showPayPal={true}
        onComplete={handleComplete}
        onError={(err) => console.error('Payment error:', err.message)}
        submitLabel="Complete Purchase"
      />
    </FloPayProvider>
  );
}

The SplitCardForm renders this layout:

PayPal button (via Stripe ExpressCheckoutElement, using its own Elements instance)
"Or pay with card" divider
Card Number field
Card Expiry + CVC fields (side by side)
Full Name input
Submit button

Set showPayPal={false} to hide the PayPal button and show only card fields. The totalAmount and currency props are used to configure the PayPal Elements instance.

Split Card Fields with PayPal

On this page