Skip to main content

SecureFieldsHostedFieldsConfig

Hosted fields mode: one iframe per card field, each rendered into a target element you provide and laid out by your own markup.

Properties​

brands​

brands: Brand[];

Eligible card networks for the vault form.

brandSelector?​

optional brandSelector?: boolean;

Enable or disable the brand selector feature. When enabled, a brand selector UI will be displayed to the user. If disabled,

  • you can listen the brandDetected event to get the detected brand(s).
  • you must provide the selectedNetwork parameter when calling the submit method.

fields​

fields: object;

Targets and labels for the iframe fields. The 'cvv' field is required; 'cardNumber' is optional.

NameType
cardNumber?SecureFieldsFieldConfig
cvvSecureFieldsFieldConfig
expDate?SecureFieldsFieldConfig
holderName?SecureFieldsFieldConfig

lang?​

optional lang?: string;

(Optional) Language of the card fields, as a BCP 47 tag (e.g. 'fr', 'en-GB'), so screen readers pronounce their names and messages correctly. Defaults to the page's <html lang>, then 'en'.

mode?​

optional mode?: "hosted_fields";

Optional and defaults to 'hosted_fields', so an existing integration needs no change.

styles?​

optional styles?: object;

Applicable styles for the iframe fields. You can specify pseudo classes

NameType
fontSrc?string
inputSecureFieldsStyles & object

Example​

styles: {
  fontSrc: 'https://example.com/fonts.css',
  input: {
    fontSize: '16px',
    color: '#333',
    ':focus': {
      color: '#000',
    },
    '::placeholder': {
      color: '#999',
    },
  },
}

CSS pseudoclasses supported:

  • :empty
  • :focus
  • :valid
  • :invalid
  • :autocomplete // alias for :-webkit-autofill
  • ::placeholder

threeDS?​

optional threeDS?: SecureFieldsThreeDSConfig;

Runs the 3DS sequence inside submit(). See SecureFieldsThreeDSConfig.