Reference

import BillingAddressComponentConfig from "@pxpio/web-components-sdk/src/components/billingAddressComponents/types/BillingAddressComponentConfig";

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
};
  
const billingAddress = pxpCheckoutSdk.create("billing-address");

Properties

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 reference.
`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.

Example

const billingAddressConfig: BillingAddressComponentConfig = {
  styles: {
    input: {
      border: "1px solid #ccc",
      padding: "8px",
      borderRadius: "4px"
    },
    label: {
      color: "#333",
      fontSize: "14px",
      marginBottom: "4px"
    }
  },
  fields: {
    countrySelection: {
      containerId: "country-selection-container",
      tabIndex: 1,
      validationOnChange: true,
      displayRequiredIcon: true,
      dropdownStyles: {
        backgroundColor: "#ffffff",
        border: "1px solid #ddd"
      },
      dropdownOptionStyles: {
        selected: {
          backgroundColor: "#f0f0f0"
        },
        hover: {
          backgroundColor: "#e8e8e8"
        }
      },
      invalidIconSrc: "https://example.com/invalid-icon.png"
    },
    postcode: {
      containerId: "postcode-container",
      tabIndex: 2,
      validationOnChange: true,
      displayInvalidIcon: true,
      invalidIconSrc: "https://example.com/invalid-icon.png"
    },
    address: {
      containerId: "address-container",
      tabIndex: 3,
      validationOnChange: true,
      onValidationFailed: (data) => {
        console.log("Address validation failed:", data);
      }
    },
    prefillBillingAddressCheckbox: {
      containerId: "prefill-checkbox-container",
      checked: false
    }
  },
  allowPrefillBillingAddress: true,
  displayRequiredIcon: true
};

const billingAddress = pxpCheckoutSdk.create("billing-address");