Skip to main content

SecureFieldsFieldConfig

Configuration for each individual iframe field.

Properties​

ariaLabel?​

optional ariaLabel?: string;

(Optional) ARIA label for accessibility.

brandLabels?​

optional brandLabels?: Partial<Record<Brand, string>>;

Card number field only: overrides the displayed name of one or more card brands, in the in-field badge and in the co-badge list drawn inside the frame.

Hosted form mode fills this in for you from hostedForm.brandLabels.

brandSelectorLabel?​

optional brandSelectorLabel?: string;

Card number field only: accessible name of the co-badge brand list drawn inside the frame, read by screen readers. Defaults to 'Card brand'; pass a translated label.

Hosted form mode fills this in for you from hostedForm.explicitBrandText.

description?​

optional description?: string;

(Optional) Help text for the field, such as the expected format, exposed to screen readers as the input's description from inside the frame.

Hosted form mode fills this in for you from the tooltip texts in hostedForm.

errorMessages?​

optional errorMessages?: Partial<Record<"length" | "none" | "format" | "empty" | "expired", string>>;

(Optional) The message to announce for each validation error the field can raise.

A screen reader reading the input cannot reach error text you render on your own page, because the input lives in a cross-origin iframe. Supplying the messages here lets the field announce the right one from inside the frame, where aria-describedby can reach it.

Hosted form mode fills this in for you from the texts in hostedForm.

Example​

errorMessages: {
  empty: 'The card number is required',
  format: 'The card number is invalid',
}

iframeTitle?​

optional iframeTitle?: string;

(Optional) Title attribute for the iframe for accessibility.

placeholder?​

optional placeholder?: string;

(Optional) Placeholder text for the input field.

target​

target: string;

The ID of the container element where the iframe will be rendered.