# Billing address

Learn about customisation options for the billing address component.

## Styling


```typescript
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](/guides/components/web/card/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


```typescript
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](/guides/components/web/card/events).

## Example


```typescript
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
    }
  }
};
```