{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Billing address","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"billing-address","__idx":0},"children":["Billing address"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the billing address component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":1},"children":["Styling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const billingAddressConfig: BillingAddressComponentConfig = {\n  styles: {\n    input: ComponentStyles,\n    label: ComponentStyles\n  },\n  fields: {\n    countrySelection: {\n      containerId: string,\n      tabIndex: number,\n      validationOnChange: boolean,\n      displayRequiredIcon: boolean,\n      dropdownStyles: dropdownStyles,\n      dropdownOptionStyles: dropdownOptionStyles,\n      invalidIconSrc: string\n    },\n    postcode: {\n      containerId: string,\n      tabIndex: number,\n      validationOnChange: boolean,\n      displayInvalidIcon: boolean,\n      invalidIconSrc: string\n    },\n    address: {\n      containerId: string,\n      tabIndex: number,\n      validationOnChange: boolean,\n      onValidationFailed: (data) => {console.log(string, data);\n    },\n    prefillBillingAddressCheckbox: {\n      containerId: string,\n      checked: boolean\n    }\n  },\n  allowPrefillBillingAddress: boolean,\n  displayRequiredIcon: boolean\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styles for the component and its sub-elements."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the individual fields within the billing address component. Each field can have its own specific settings, including container IDs and validation rules."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fields.countrySelection"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the country selection drop-down field. This inherits properties from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CountrySelectionComponentConfig"]}," file."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fields.postcode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the postcode input field. This inherits properties from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PostcodeComponentConfig"]}," file."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fields.address"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the address input field. This inherits properties from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AddressComponentConfig"]}," file."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["prefillBillingAddressCheckbox"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the checkbox to pre-fill the billing address fields with the shipping address details. This inherits properties from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PrefillBillingAddressCheckboxComponentConfig"]}," file. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/pre-fill-billing-address-checkbox"},"children":["Pre-fill billing address checkbox"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowPrefillBillingAddress"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to allow pre-filling of the billing address fields with the shipping address details. If set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", the cardholder is given the option to use their shipping address for billing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayRequiredIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display a required icon for all required fields."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"callbacks","__idx":2},"children":["Callbacks"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardCvcConfig: CardCvcComponentConfig = {\n  onChange: (event: InputEvent) => void,\n  onFocus: (event: FocusEvent) => void,\n  onBlur: (event: FocusEvent) => void,\n  onValidationPassed: (data: ValidationResult[]) => void,\n  onValidationFailed: (data: ValidationResult[]) => void\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onChange: (event: InputEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the input value changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus: (event: FocusEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the input receives focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onBlur: (event: FocusEvent) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when the input loses focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationPassed: (data: ValidationResult[]) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when all validations pass."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed: (data: ValidationResult[]) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when any validation fails."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about callbacks, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":3},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const billingAddressConfig: BillingAddressComponentConfig = {\n  allowPrefillBillingAddress: true,\n  displayRequiredIcon: true,\n  styles: {\n    base: {\n      padding: \"16px\",\n      border: \"1px solid #e0e0e0\",\n      borderRadius: \"8px\"\n    }\n  },\n  fields: {\n    countrySelection: {\n      containerId: \"country-container\",\n      required: true,\n      onChange: (event) => {\n        console.log(\"Country changed:\", event.target.value);\n      },\n      onValidationPassed: (data) => {\n        console.log(\"Country valid\");\n      }\n    },\n    address: {\n      containerId: \"address-container\",\n      placeholder: \"Street address\",\n      required: true,\n      inputStyles: {\n        base: {\n          padding: \"12px\",\n          border: \"1px solid #ccc\"\n        },\n        invalid: {\n          borderColor: \"#ff3333\"\n        }\n      },\n      onChange: (event) => {\n        console.log(\"Address changed\");\n      },\n      onBlur: (event) => {\n        console.log(\"Address blurred\");\n      },\n      onValidationFailed: (data) => {\n        console.log(\"Address validation failed\");\n      }\n    },\n    postcode: {\n      containerId: \"postcode-container\",\n      placeholder: \"Postal code\",\n      required: true,\n      onChange: (event) => {\n        console.log(\"Postcode changed\");\n      },\n      onValidationPassed: (data) => {\n        console.log(\"Postcode valid\");\n      }\n    },\n    prefillBillingAddressCheckbox: {\n      containerId: \"prefill-container\",\n      checked: false\n    }\n  }\n};\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Billing address","id":"billing-address","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Callbacks","id":"callbacks","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Billing address"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/billing-address","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}