Reference

import AddressComponentConfig from "@pxpio/web-components-sdk/src/components/addressComponents/types/AddressComponentConfig";

const addressConfig: AddressComponentConfig = {
  inputAttributes: InputAttributes,
  required: boolean,
  placeholder: string,
  componentStyles: ComponentStyles,
  inputStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  label: string,
  labelStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  labelPosition: string,
  invalidTextStyles: CSSProperties,
  invalidTextPosition: string,
  guideText: string,
  validations: {},
  invalidIconSrc: string,
  validIconSrc: string,
  displayValidIcon: boolean,
  displayInvalidIcon: boolean,
  tooltipAriaLabel: string,
  ariaLabel: string,
  displayRequiredIcon: boolean,
  allowToCopyPaste: boolean,
  validationOnBlur: boolean,
  validationOnChange: boolean,
  tabIndex: number,
  onChange: (event: InputEvent) => void,
  onFocus: (event: FocusEvent) => void,
  onBlur: (event: FocusEvent) => void,
  onValidationPassed: (data: ValidationResult[]) => void,
  onValidationFailed: (data: ValidationResult[]) => void
};

const address = pxpCheckoutSdk.create("address");

Properties

Property	Description
`inputAttributes` InputAttributes	Additional HTML input attributes.
`required` boolean	Whether the field is required for submission.
`placeholder` string	The placeholder text to display when the field is empty.
`componentStyles` ComponentStyles	Container styles.
`inputStyles` StateStyles	Style for input field in various states.
`label` string	The input label's text.
`labelStyles` StateStyles	The label styling, based on the state.
`labelPosition` string (enum)	The position of the label, relative to the input field. Possible values: `above` `below` `left` `right`
`invalidTextStyles` CSSProperties	Style for validation message text.
`invalidTextPosition` string (enum)	The position of the invalida text message, relative to the input field. Possible values: `above` `below` `left` `right`
`guideText` string	The helper text to display below the input field.
`validations` T	Validation rules to apply to the input field.
`invalidIconSrc` string	The URL for the icon shown on invalid input.
`validIconSrc` string	The URL for the icon shown on valid input.
`displayValidIcon` boolean	Whether to display a success icon. Defaults to `true`.
`displayInvalidIcon` boolean	Whether to display an error icon. Defaults to `true`.
`tooltipAriaLabel` string	The aria label for the tooltip.
`ariaLabel` string	The aria label for the field component.
`displayRequiredIcon` boolean	Whether to display a required icon. Defaults to `true`.
`allowToCopyPaste` boolean	Whether to allow copy/paste in the input fields.
`validationOnBlur` boolean	Whether to run validation when input loses focus.
`validationOnChange` boolean	Whether to run validation as a value changes.
`tabIndex` number	The tab index of the input element.

Callbacks

Callback	Description
`onChange: (event: InputEvent) => void`	Callback function triggered when the input value changes.
`onFocus: (event: FocusEvent) => void`	Callback function triggered when the input receives focus.
`onBlur: (event: FocusEvent) => void`	Callback function triggered when the input loses focus.
`onValidationPassed: (data: ValidationResult[]) => void`	Callback function triggered when all validation passes.
`onValidationFailed: (data: ValidationResult[]) => void`	Callback function triggered when any validation fails.

Example

import AddressComponentConfig from "@pxpio/web-components-sdk/src/components/addressComponents/types/AddressComponentConfig";

const addressConfig: AddressComponentConfig = {
  required: true,
  placeholder: "Enter value",
  label: "Example label",
  guideText: "This is a guide",
  validationOnBlur: true,
  validationOnChange: true
}

const address = pxpCheckoutSdk.create("address");