Styling

const billingAddressConfig: BillingAddressComponentConfig = {
  styles: {
    input: ComponentStyles,
    label: ComponentStyles
  },
  fields: {
    countrySelection: {
      containerId: string,
      tabIndex: number,
      validationOnChange: boolean,
      displayRequiredIcon: boolean,
      dropdownStyles: dropdownStyles,
      dropdownOptionStyles: dropdownOptionStyles,
      invalidIconSrc: string
    },
    postcode: {
      containerId: string,
      tabIndex: number,
      validationOnChange: boolean,
      displayInvalidIcon: boolean,
      invalidIconSrc: string
    },
    address: {
      containerId: string,
      tabIndex: number,
      validationOnChange: boolean,
      onValidationFailed: (data) => {console.log(string, data);
    },
    prefillBillingAddressCheckbox: {
      containerId: string,
      checked: boolean
    }
  },
  allowPrefillBillingAddress: boolean,
  displayRequiredIcon: boolean
};

Parameter	Description
`styles` object	Custom styles for the component and its sub-elements.
`fields` object	Configuration for the individual fields within the billing address component. Each field can have its own specific settings, including container IDs and validation rules.
`fields.countrySelection` object	Configuration for the country selection drop-down field. This inherits properties from the `CountrySelectionComponentConfig` file.
`fields.postcode` object	Configuration for the postcode input field. This inherits properties from the `PostcodeComponentConfig` file.
`fields.address` object	Configuration for the address input field. This inherits properties from the `AddressComponentConfig` file.
`prefillBillingAddressCheckbox` object	Configuration for the checkbox to pre-fill the billing address fields with the shipping address details. This inherits properties from the `PrefillBillingAddressCheckboxComponentConfig` file. See Pre-fill billing address checkbox.
`allowPrefillBillingAddress` boolean	Whether to allow pre-filling of the billing address fields with the shipping address details. If set to`true`, the cardholder is given the option to use their shipping address for billing.
`displayRequiredIcon` boolean	Whether to display a required icon for all required fields.

Callbacks

const cardCvcConfig: CardCvcComponentConfig = {
  onChange: (event: InputEvent) => void,
  onFocus: (event: FocusEvent) => void,
  onBlur: (event: FocusEvent) => void,
  onValidationPassed: (data: ValidationResult[]) => void,
  onValidationFailed: (data: ValidationResult[]) => void
};

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

ℹ️
For more information about callbacks, see Events.

Example

const billingAddressConfig: BillingAddressComponentConfig = {
  allowPrefillBillingAddress: true,
  displayRequiredIcon: true,
  styles: {
    base: {
      padding: "16px",
      border: "1px solid #e0e0e0",
      borderRadius: "8px"
    }
  },
  fields: {
    countrySelection: {
      containerId: "country-container",
      required: true,
      onChange: (event) => {
        console.log("Country changed:", event.target.value);
      },
      onValidationPassed: (data) => {
        console.log("Country valid");
      }
    },
    address: {
      containerId: "address-container",
      placeholder: "Street address",
      required: true,
      inputStyles: {
        base: {
          padding: "12px",
          border: "1px solid #ccc"
        },
        invalid: {
          borderColor: "#ff3333"
        }
      },
      onChange: (event) => {
        console.log("Address changed");
      },
      onBlur: (event) => {
        console.log("Address blurred");
      },
      onValidationFailed: (data) => {
        console.log("Address validation failed");
      }
    },
    postcode: {
      containerId: "postcode-container",
      placeholder: "Postal code",
      required: true,
      onChange: (event) => {
        console.log("Postcode changed");
      },
      onValidationPassed: (data) => {
        console.log("Postcode valid");
      }
    },
    prefillBillingAddressCheckbox: {
      containerId: "prefill-container",
      checked: false
    }
  }
};