PaymentsElementInitConfig

PaymentsElementInitConfig object

Configuration options for initializing the PaymentsElement, including session token, appearance customization, lifecycle event handlers, payment method configurations, and element reference.

Property Type Required Description

ref any | string required Reference to the HTML element where the payment methods selector will be mounted.

sessionToken string required Payment session token obtained from the Adumo API to initialize the payment flow.

appearance object optional Appearance customization for the payments UI components.

▶ 4 properties

Property Type Required Description

settings object optional Component-level behavioural configuration that is not expressible through CSS.

▶ 2 properties

Property	Type	Required	Description
`cardExpiryInputType`	`"dropdown"` \| `"text"`	optional	Controls how the card expiry is captured. Options: dropdown (separate month and year pickers), text (a single typed MM / YY field).
`inputLabelType`	`"float-in"` \| `"float-on"` \| `"float-over"` \| `"ifta"`	optional	Controls how input labels animate relative to the input field. Options: float-in (shrinks inside on focus), float-on (sits on border, moves up), float-over (floats above on focus), ifta (in-field top-aligned).

styles object optional Per-component CSS overrides keyed by selector name.

▶ 127 properties

Property	Type	Required
`Button`	`Styles`	optional
`ButtonPrimary`	`Styles`	optional
`ButtonPrimaryFocused`	`Styles`	optional
`ButtonPrimaryHovered`	`Styles`	optional
`ButtonProgressSpinner`	`Styles`	optional
`CardExpiryInput`	`Styles`	optional
`CardExpiryInputField`	`Styles`	optional
`CardFieldsButtonPrimary`	`Styles`	optional
`CardFieldsDropdownInput`	`Styles`	optional
`CardFieldsForm`	`Styles`	optional
`CardFieldsHeading`	`Styles`	optional
`CardFieldsInfoBlock`	`Styles`	optional
`CardFieldsInfoIcon`	`Styles`	optional
`CardFieldsInput`	`Styles`	optional
`CardFieldsInputContainer`	`Styles`	optional
`CardFieldsInputContainerError`	`Styles`	optional
`CardFieldsInputErrorText`	`Styles`	optional
`CardFieldsInputField`	`Styles`	optional
`CardFieldsPayNowButton`	`Styles`	optional
`CardFieldsSaveCardToggle`	`Styles`	optional
`CardFieldsSavedCardsIcon`	`Styles`	optional
`CardNumberInput`	`Styles`	optional
`CardNumberInputField`	`Styles`	optional
`CardNumberInputMenu`	`Styles`	optional
`CardNumberItem`	`Styles`	optional
`CardNumberItemContainer`	`Styles`	optional
`CardNumberItemDeleteConfirmText`	`Styles`	optional
`CardNumberItemDeleteConfirmTextFocused`	`Styles`	optional
`CardNumberItemDeleteIcon`	`Styles`	optional
`CardNumberItemDeleteIconFocused`	`Styles`	optional
`CardNumberItemDeleteIconHovered`	`Styles`	optional
`CardNumberItemDetails`	`Styles`	optional
`CardNumberItemDetailsFocused`	`Styles`	optional
`CardNumberItemExpiry`	`Styles`	optional
`CardNumberItemExpiryFocused`	`Styles`	optional
`CardNumberItemExpiryHovered`	`Styles`	optional
`CardNumberItemFocused`	`Styles`	optional
`CardNumberItemLogo`	`Styles`	optional
`CardNumberItemNumber`	`Styles`	optional
`CardNumberItemNumberFocused`	`Styles`	optional
`CardNumberItemSpinner`	`Styles`	optional
`CardNumberItemSpinnerFocused`	`Styles`	optional
`Dialog`	`Styles`	optional
`DialogBackdrop`	`Styles`	optional
`DialogBody`	`Styles`	optional
`DialogCloseButton`	`Styles`	optional
`DialogCloseButtonIcon`	`Styles`	optional
`DialogCloseButtonIconHovered`	`Styles`	optional
`DialogHeader`	`Styles`	optional
`DialogHeaderTitle`	`Styles`	optional
`DropdownContainer`	`Styles`	optional
`DropdownEditableInputField`	`Styles`	optional
`DropdownErrorText`	`Styles`	optional
`DropdownInput`	`Styles`	optional
`DropdownInputContainer`	`Styles`	optional
`DropdownInputContainerError`	`Styles`	optional
`DropdownInputField`	`Styles`	optional
`DropdownInputIcon`	`Styles`	optional
`DropdownItem`	`Styles`	optional
`DropdownItemFocused`	`Styles`	optional
`DropdownItemHovered`	`Styles`	optional
`DropdownItemSelected`	`Styles`	optional
`DropdownItemSelectedFocused`	`Styles`	optional
`DropdownItemSelectedHovered`	`Styles`	optional
`DropdownLabel`	`Styles`	optional
`DropdownMenu`	`Styles`	optional
`Input`	`Styles`	optional
`InputClearIcon`	`Styles`	optional
`InputClearIconHovered`	`Styles`	optional
`InputContainer`	`Styles`	optional
`InputContainerError`	`Styles`	optional
`InputContainerErrorFocusedWithin`	`Styles`	optional
`InputContainerErrorHovered`	`Styles`	optional
`InputContainerFocusedWithin`	`Styles`	optional
`InputContainerHovered`	`Styles`	optional
`InputErrorText`	`Styles`	optional
`InputField`	`Styles`	optional
`InputPlaceholder`	`Styles`	optional
`Label`	`Styles`	optional
`LabelError`	`Styles`	optional
`LabelFloating`	`Styles`	optional
`LabelHovered`	`Styles`	optional
`Link`	`Styles`	optional
`LinkHovered`	`Styles`	optional
`MobicredLoginButtonPrimary`	`Styles`	optional
`MobicredLoginForm`	`Styles`	optional
`MobicredLoginHeading`	`Styles`	optional
`MobicredLoginInput`	`Styles`	optional
`MobicredLoginInputContainer`	`Styles`	optional
`MobicredLoginInputContainerError`	`Styles`	optional
`MobicredLoginInputErrorText`	`Styles`	optional
`MobicredLoginRegistrationLink`	`Styles`	optional
`MobicredLoginRegistrationText`	`Styles`	optional
`MobicredOtpButtonPrimary`	`Styles`	optional
`MobicredOtpCountdownText`	`Styles`	optional
`MobicredOtpCountdownTime`	`Styles`	optional
`MobicredOtpForm`	`Styles`	optional
`MobicredOtpHeading`	`Styles`	optional
`MobicredOtpInput`	`Styles`	optional
`MobicredOtpInputContainer`	`Styles`	optional
`MobicredOtpInputContainerError`	`Styles`	optional
`MobicredOtpInputErrorText`	`Styles`	optional
`MobicredOtpResendLink`	`Styles`	optional
`MobicredOtpResendText`	`Styles`	optional
`OttVoucherButtonPrimary`	`Styles`	optional
`OttVoucherForm`	`Styles`	optional
`OttVoucherFormLogo`	`Styles`	optional
`OttVoucherInput`	`Styles`	optional
`OttVoucherInputContainer`	`Styles`	optional
`OttVoucherInputContainerError`	`Styles`	optional
`OttVoucherInputErrorText`	`Styles`	optional
`OttVoucherInstruction`	`Styles`	optional
`OttVoucherPayNowButton`	`Styles`	optional
`OttVoucherSubmitError`	`Styles`	optional
`ProgressSpinner`	`Styles`	optional
`Toggle`	`Styles`	optional
`ToggleLabel`	`Styles`	optional
`ToggleSwitch`	`Styles`	optional
`ToggleSwitchChecked`	`Styles`	optional
`ToggleSwitchFocused`	`Styles`	optional
`TransactionAmountInput`	`Styles`	optional
`TransactionAmountInputContainer`	`Styles`	optional
`TransactionAmountInputField`	`Styles`	optional
`TransactionAmountItem`	`Styles`	optional
`TransactionAmountItemSelected`	`Styles`	optional
`TransactionAmountMenu`	`Styles`	optional
`ZapperPaymentContainer`	`Styles`	optional

theme "light" | "dark" optional Built-in theme to use as a baseline. Explicit variables, styles, and settings override theme defaults.

variables object optional Global design tokens exposed as CSS custom properties on the element container.

▶ 16 properties

Property	Type	Required	Description
`borderRadius`	`string` \| `number`	optional	Global corner radius applied to inputs, buttons, and cards.
`boxShadow`	`string`	optional	Default box shadow.
`colorBackgroundPrimary`	`string`	optional	Primary surface/background colour.
`colorBackgroundSecondary`	`string`	optional	Secondary surface colour used for cards and grouped areas.
`colorError`	`string`	optional	Colour applied to error states and validation messages.
`colorFocused`	`string`	optional	Colour applied to focused input borders and focus rings.
`colorLabel`	`string`	optional	Default colour for input labels.
`colorOutline`	`string`	optional	Outline/border colour for inputs.
`colorPlaceholder`	`string`	optional	Colour for input placeholder text.
`colorPrimary`	`string`	optional	Primary brand accent colour used for buttons and interactive elements.
`colorSelected`	`string`	optional	Colour applied to selected/active elements.
`colorText`	`string`	optional	Default text colour.
`fontFamily`	`string`	optional	Font stack for all text.
`fontSizeBase`	`string`	optional	Base font size.
`paddingHorizontalInput`	`string` \| `number`	optional	Horizontal padding inside input fields.
`spacingUnit`	`string` \| `number`	optional	Base spacing unit used for consistent margins and gaps between elements.

onCancel (response: PaymentsSessionResponse) => void optional Callback invoked when the payment process is canceled by the user.

onError (response: PaymentsSessionResponse) => void optional Callback invoked when an error occurs during payment processing.

onFailure (response: PaymentsSessionResponse) => void optional Callback invoked when a payment transaction fails.

onReady (actions: PaymentsElementActions) => void optional Callback invoked when the payments element is fully initialized and ready, providing access to element actions.

onSuccess (response: PaymentsSessionResponse) => void optional Callback invoked when a payment transaction completes successfully.

paymentMethods object optional Optional payment method-specific configurations for Card and APMs

▶ 6 properties

Property	Type	Required
`Card`	`CardPaymentInitConfig`	optional
`MasterPass`	`MasterPassPaymentInitConfig`	optional
`Mobicred`	`MobicredPaymentInitConfig`	optional
`OttVoucher`	`OttVoucherPaymentInitConfig`	optional
`Ozow`	`OzowPaymentInitConfig`	optional
`Zapper`	`ZapperPaymentInitConfig`	optional

PaymentsElementInitConfig object

On this page: