Theme Playground

One theme prop drives FloPayCheckout and FloPayAutomaticPaymentButton. Pick a theme, optionally layer Customise overrides on top, copy the snippet.

Theme
Layout
Card field order (vault)
Customise
Overrides layer on top of the chosen theme — explicit values win.
colorPrimary
colorPrimaryHover
colorBackground
colorText
borderRadius
Gateways
Enabled Stripe payment methods (card, Apple Pay, Google Pay, Cash App Pay, Klarna, …) come live from gateways.stripe.enabledPaymentMethods on the session response.
submitLabel
Session creation
On (the SDK default), the session is created as a lightweight shell and the card form mounts before buyer, product and coupon data are attached in the background. Turn it off to send deferDataAttachment: false and use the original one-shot create — same session and result, one request. Full checkout mode only.
AVS
Drop-in snippet
import { FloPayCheckout } from '@flopay/react'
import { configureFlopay } from '@flopay/shared'

configureFlopay({ environment: 'production' })

export function Checkout() {
	return (
		<FloPayCheckout
			theme={"modern-light"}
			layout={"default"}
			createSession={{
				"clientId": "YOUR_CLIENT_ID",
				"currency": "EUR",
				"products": [
					{
						"code": "demo_item_green_pot",
						"quantity": 1
					}
				],
				"account": {
					"userId": "theme-preview",
					"email": "theme-preview@flopay.com",
					"firstName": "Theme",
					"lastName": "Preview",
					"country": "ES"
				},
				"successUrl": "https://your-app.com/success",
				"cancelUrl": "https://your-app.com/checkout"
			}}
			onComplete={(result) => {
				window.location.href = '/success'
			}}
		/>
	)
}