UI Styling

Match the checkout to your brand with the style object. It mirrors the styling options in your dashboard and is applied on top of them. Pass it via the style property of the @orchestrapay/react embed (or as the style data- attribute on the vanilla JS iframe).

The style object

themeoptional, 'default' | 'minimalist' | 'detached'

A preset theme to start from.

poweredByoptional, boolean

Show or hide the "Powered by Orchestrapay" branding.

custom.baseoptional, object

CSS declarations applied to all elements. See the accepted properties below.

custom.invalidoptional, object

CSS declarations applied when validation fails. Accepts the same properties as custom.base.

custom.rulesoptional, object

Per-element CSS rules with interaction states (base, hover, focus, selected, disabled, active). See the accepted properties below.

custom.base and custom.invalid

Global declarations applied to every element (custom.invalid only while a field is in its validation-error state). Keys use the semantic property names below; any property not on this list is ignored.

Typography

fontFamilyfontSizefontSmoothingfontStylefontVariantfontWeightletterSpacinglineHeighttextAligntextDecorationtextShadowtextTransform

Colors (semantic)

fontColorPrimaryfontColorSecondarybackgroundPrimarybackgroundSecondaryiconColor

Border

borderColorborderWidthborderStyleborderRadius

You can also target these pseudo-elements:

::placeholder::selection:-webkit-autofill

custom.rules

Fine-grained rules targeting individual form elements, each with optional interaction states (base, hover, focus, selected, disabled, active). Unlike custom.base, rules use standard CSS property names. Accepted properties:

Colors (standard CSS)

backgroundColorcoloraccentColor

Typography (standard CSS)

fontFamilyfontSizefontStylefontVariantfontWeightletterSpacinglineHeighttextAligntextDecorationtextShadowtextTransform

Border (standard CSS)

borderColorborderWidthborderStyleborderRadius

Layout

widthheightminWidthminHeightmaxWidthmaxHeight

Spacing

marginmarginTopmarginRightmarginBottommarginLeftpaddingpaddingToppaddingRightpaddingBottompaddingLeft

Display

displayvisibilityopacity

Border (granular)

borderTopLeftRadiusborderTopRightRadiusborderBottomLeftRadiusborderBottomRightRadiusborderTopborderRightborderBottomborderLeft

Outline

outlineoutlineWidthoutlineStyleoutlineColoroutlineOffset

Positioning

positionzIndex

Flexbox

flexDirectionjustifyContentalignItemsgap