Pre-fill billing address checkbox

Learn about customisation options for the pre-fill billing address checkbox.

Styling

const prefillBillingAddressCheckboxConfig: PrefillBillingAddressCheckboxComponentConfig = {
  label: string,
  labelStyles: {
    checked: {
      color: string,
      fontWeight: string,
      fontSize: string
    },
    unchecked: {
      color: string,
      fontSize: string
    }
  },
  checked: boolean,
  checkedColor: string,
  tabIndex: number,
  countrySelectionComponent: CountrySelectionComponent,
  postcodeComponent: PostcodeComponent,
  addressComponent: AddressComponent
};

Property	Description
`label` string	The text label to display next to the pre-fill billing address checkbox.
`labelStyles` object	Custom styles for the pre-fill billing address checkbox's label.
`labelStyles.checked` CssProperties	Details about the styles to apply the checkbox is checked.
`labelStyles.checked.color` string	The HEX colour code of the text.
`labelStyles.checked.fontWeight` string	The weight of the font.
`labelStyles.checked.fontSize` string	The size of the font.
`labelStyles.unchecked` CssProperties	Details about the styles to apply when the checkbox is unchecked.
`labelStyles.unchecked.color` string	The HEX colour code of the text.
`labelStyles.unchecked.fontSize` string	The size of the font.
`checked` boolean	The initial state of the checkbox.
`checkedColor` string	The HEX colour code of the checkbox, when checked.
`tabIndex` number	The tab index of the component.
`countrySelectionComponent` CountrySelectionComponent	Configuration for the country selection component. See Country selection.
`postcodeComponent` PostcodeComponent	Configuration for the postcode component. See Postcode.
`addressComponent` AddressComponent	Configuration for the address component. See Address.

Example

const prefillBillingAddressCheckboxConfig: PrefillBillingAddressCheckboxComponentConfig = {
  label: "Use shipping address for billing",
  checked: false,
  checkedColor: "#007bff",
  tabIndex: 5,  
  labelStyles: {
    checked: {
      color: "#007bff",
      fontWeight: "500"
    },
    unchecked: {
      color: "#666666",
      fontWeight: "normal"
    }
  },
  countrySelectionComponent: countryComponent,
  postcodeComponent: postcodeComponent,
  addressComponent: addressComponent, 
  onChange: (event) => {
    console.log("Prefill checkbox changed:", event.target.checked);
  },
  onFocus: (event) => {
    console.log("Prefill checkbox focused");
  },
  onBlur: (event) => {
    console.log("Prefill checkbox blurred");
  },
  onValidationPassed: (data) => {
    console.log("Prefill checkbox validation passed");
  },
  onValidationFailed: (data) => {
    console.log("Prefill checkbox validation failed:", data);
  }
};

Pre-fill billing address checkbox

Styling

Example

Was this helpful?