HeadlessHostedInput

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

Hide Methods

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

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

Show 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.

Show 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.

Show 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.

Show Types

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.