API GuideDashboard
Home
Payments
Automation
Observability
Reconciliation
Payment Methods
Fraud Providers
SDK Reference
Changelog

The hosted input instances inside the object returned by a CardPaymentMethodManager's createHostedInputs function.

render
(container: string, options: HeadlessHostedInputOptions) => Promise<void>

Render the input field in the specified container with the given options.

HeadlessHostedInputOptions
placeholder
string
Optional placeholder text to display in the input element.
ariaLabel
string
Optional text for the input's aria-label attribute to improve accessibility.
style
CheckoutStyle

A CheckoutStyle object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on Styling Inputs for Drop-in, HeadlessHostedInput accepts the same configuration.

getOptions
() => HeadlessHostedInputOptions

Get the current options for the input field.

HeadlessHostedInputOptions
placeholder
string
Optional placeholder text to display in the input element.
ariaLabel
string
Optional text for the input's aria-label attribute to improve accessibility.
style
CheckoutStyle

A CheckoutStyle object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on Styling Inputs for Drop-in, HeadlessHostedInput accepts the same configuration.

setOptions
(options: HeadlessHostedInputOptions) => void

Set the options for the input field.

HeadlessHostedInputOptions
placeholder
string
Optional placeholder text to display in the input element.
ariaLabel
string
Optional text for the input's aria-label attribute to improve accessibility.
style
CheckoutStyle

A CheckoutStyle object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on Styling Inputs for Drop-in, HeadlessHostedInput accepts the same configuration.

addEventListener
(event: EventTypes, callback: EventListener) => void
Add an event listener to the input field.
EventTypes
"blur" | "change" | "click" | "close" | "error" | "focus"
EventListener
(event?: Event) => void
focus
() => void
Set the focus on the input field.
blur
() => void
Remove the focus from the input field.
setDisabled
(status: boolean) => void
Set the disabled status of the input field.