FloPay Docs

PayPalButton

Standalone PayPal button that handles the full PayPal payment flow including intent creation, confirmation, and redirect resume.

function PayPalButton(props: PayPalButtonProps): React.ReactElement

PayPal requires its own FloPayProvider -- it cannot share the same Stripe Elements instance as card fields when they use paymentMethodCreation: 'manual'. Use a separate provider with paymentMethodCreation: 'auto' (or unset).

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.
`userId`	`string`	No	--	User ID for processing payments.
`firstName`	`string`	No	--	First name for billing.
`lastName`	`string`	No	--	Last name for billing.
`chv`	`string`	No	--	Checkout version for tracking.
`onTokenizedBody`	`(body: TokenizedBody) => void`	No	--	Called with tokenized data after PayPal authorization. If omitted, processes payment internally.
`onComplete`	`() => void`	No	--	Called on successful payment (self-contained mode).
`onErrorChange`	`(error: string \| null) => void`	No	--	Called when an error occurs.
`isProcessing`	`boolean`	No	`false`	External processing state.

Example

{/* Card fields provider */}
<FloPayProvider
  flopay={flopay}
  options={{ amount: 4999, currency: 'usd', paymentMethodCreation: 'manual' }}
>
  <SplitCardForm ... />
</FloPayProvider>

{/* PayPal provider (separate instance) */}
<FloPayProvider
  flopay={flopay}
  options={{ amount: 4999, currency: 'usd', paymentMethodCreation: 'auto' }}
>
  <PayPalButton
    sessionId="uuid-xxx"
    billingApiUrl="https://api.example.com"
    email="user@example.com"
    userId="user_1"
    onComplete={() => router.push('/success')}
    onErrorChange={(err) => setError(err)}
  />
</FloPayProvider>

Flow

User clicks the PayPal button.
A PaymentIntent is created via POST /v1/checkouts/payments/intents.
Payment is confirmed via flopay.confirmPayment() -- may redirect to PayPal.
After redirect return, the component detects payment_intent URL parameters and resumes the flow.
On success, calls onTokenizedBody (delegated mode) or processPayment (self-contained mode) — which posts to POST /v1/checkouts/sessions/{sessionId}/process.

Requires the x-checkout-session-token header — the session nonce returned by the create call. See Checkout session token.

PayPalButton

PayPalButton

Important

Props

Example

Flow

On this page