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
AVS
Drop-in snippet
import { FloPayCheckout } from '@flopay/react'
import { configureFlopay } from '@flopay/shared'

configureFlopay({ environment: 'production' })

export function Checkout() {
	return (
		<FloPayCheckout
			theme={"classic"}
			layout={"default"}
			createSession={{
				"clientId": "YOUR_CLIENT_ID",
				"currency": "EUR",
				"products": [
					{
						"type": "item",
						"code": "demo_item_green_pot",
						"name": "Green Pot",
						"totalAmount": 12.95,
						"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'
			}}
		/>
	)
}