{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details"]},"type":"markdown"},"seo":{"title":"Postcode","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":"postcode","__idx":0},"children":["Postcode"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the postcode component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode component captures postal or ZIP codes. At minimum, you can create it with a label:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nlet config = PostcodeComponentConfig(\n    label: \"Postcode\",\n    placeholder: \"Enter postcode\"\n)\n\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n\npostcode.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode field allows alphanumeric characters, spaces, and hyphens. Other characters are stripped. Values are trimmed and capped at 10 characters."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise field labels, validation messages, and styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = PostcodeComponentConfig(\n    label: \"ZIP / Postcode\",\n    placeholder: \"e.g. SW1A 1AA\",\n    guideText: \"Use the format for your region\",\n    validations: PostcodeValidationResource(\n        PC01: \"Enter a postcode\",\n        PC02: \"Postcode is too long\"\n    ),\n    onValidationFailed: { results in }\n)\n\nconfig.componentStyles = FieldStyle(cornerRadius: 8)\nconfig.displayValidIcon = true\nconfig.validationOnChange = true\n\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":4},"children":["Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise validation messages and field behaviour:"]},{"$$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":"Property"},"children":["Property"]},{"$$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":["validations"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PostcodeValidationResource?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom validation error messages. Overrides SDK default messages for PC01 and PC02 error codes. Defaults to SDK localisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The field label text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The placeholder text shown when the field is empty. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The helper text displayed below the field. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The VoiceOver accessibility label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isRequired"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the field is required. For the postcode component, this is always ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and can't be changed. Validation fails if the field is empty."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["componentStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The container styling. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},". Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelFont"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueFont"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cornerRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["margin"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textAlignment"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shadow"]}," (ShadowStyle), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}," (IconStyle), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelSpacing"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldInputStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The input styling for different states. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},". States: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]}," (default unfocused), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," (focused), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]}," (has valid value), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]}," (has invalid value). Each state supports: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cornerRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minHeight"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldLabelStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label styling by state. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},". States: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]}," (default), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," (focused), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]}," (has valid value), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]}," (has invalid value). Each state supports: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},". Additional property: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minWidth"]}," (CGFloat? - default: 80)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelPosition"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["LabelPosition?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label position relative to input. Options: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["above"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["below"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidTextStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldMessageStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The error text styling. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},". Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidTextPosition"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TextPosition?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The error message placement. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideTextStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldMessageStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The guide text styling. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},". Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom error icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom valid icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayValidIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display the valid icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayInvalidIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display the error icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tooltipAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The tooltip accessibility label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display the required indicator. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowToCopyPaste"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to allow copy and paste. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnBlur"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to validate when the field loses focus. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnChange"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to validate as the user types. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isDisabled"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the field is disabled. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"validation-messages","__idx":5},"children":["Validation messages"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override default validation error messages:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"postcodevalidationresource","__idx":6},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PostcodeValidationResource"]}]},{"$$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":"Property"},"children":["Property"]},{"$$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":["PC01"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Required. The message displayed when the field is empty but required."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PC02"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Required. The message displayed when the postcode exceeds 10 characters."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure callbacks to respond to field events:"]},{"$$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":"Property"},"children":["Property"]},{"$$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"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the postcode value changes. Triggered as the user types or when the value is set programmatically. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the field gains focus. Triggered when the user taps into the field. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onBlur"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the field loses focus. Triggered when the user taps outside the field or moves to another field. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationPassed"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(([ValidationResult]) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when validation passes. Receives an array of validation results. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(([ValidationResult]) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when validation fails. Receives an array of validation results containing error details. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about event patterns, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"validation","__idx":8},"children":["Validation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode field validates input against the following rules:"]},{"$$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":"Code"},"children":["Code"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Condition"},"children":["Condition"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Default message"},"children":["Default message"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PC01"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The field is empty but required"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Please enter postcode\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PC02"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The postcode exceeds 10 characters"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"The postcode exceeded maximum length\""]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK automatically strips non-alphanumeric characters (except spaces and hyphens), trims whitespace, and enforces the 10-character maximum. Validation triggers based on your configuration (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnBlur"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnChange"]},"). Override default messages using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validations"]}," property."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":9},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":10},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildContent()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns SwiftUI content for the postcode field:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"postcode.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":11},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-postcode-field","__idx":12},"children":["Basic postcode field"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple postcode field with default settings:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PostcodeComponentConfig(label: \"Postcode\")\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-custom-styling","__idx":13},"children":["With custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply custom styling to the field:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = PostcodeComponentConfig(label: \"Postal code\")\nconfig.inputStyles = FieldInputStateStyles(\n    base: FieldInputStyle(\n        cornerRadius: 6,\n        borderWidth: 1,\n        borderColor: Color(.separator)\n    ),\n    active: FieldInputStyle(\n        borderColor: .accentColor,\n        borderWidth: 2\n    )\n)\nconfig.displayValidIcon = true\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-validation-callbacks","__idx":14},"children":["With validation callbacks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Handle validation events:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = PostcodeComponentConfig(label: \"Postcode\")\nconfig.onValidationPassed = { results in\n    print(\"Postcode is valid\")\n}\nconfig.onValidationFailed = { results in\n    print(\"Postcode validation failed\")\n}\nconfig.validationOnChange = true\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-custom-error-messages","__idx":15},"children":["With custom error messages"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Override default validation messages:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PostcodeComponentConfig(\n    label: \"Postcode\",\n    validations: PostcodeValidationResource(\n        PC01: \"Please enter your postcode\",\n        PC02: \"Postcode must be 10 characters or less\"\n    )\n)\nlet postcode = try pxpCheckout.create(.postcode, componentConfig: config) as! PostcodeComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"inside-billing-address","__idx":16},"children":["Inside billing address"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode component is typically used inside the billing address component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var postcodeConfig = PostcodeComponentConfig(\n    label: \"Postcode\",\n    placeholder: \"Enter postcode\"\n)\n\nlet config = BillingAddressComponentConfig(\n    fields: BillingAddressComponentFields(\n        postcode: postcodeConfig\n    )\n)\n\nlet billing = try pxpCheckout.create(.billingAddress, componentConfig: config) as! BillingAddressComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-pre-fill-from-shipping","__idx":17},"children":["With pre-fill from shipping"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The postcode field works with the pre-fill billing address checkbox. When the checkbox is enabled, it copies the shipping postcode into this field:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let checkoutConfig = CheckoutConfig(\n    environment: .test,\n    session: sessionData,\n    transactionData: transactionData,\n    merchantShopperId: \"shopper-1\",\n    ownerId: \"owner-id\",\n    onGetShippingAddress: {\n        ShippingAddress(\n            countryCode: \"GB\",\n            postalCode: \"SW1A 1AA\",\n            address: \"10 Downing Street\"\n        )\n    }\n)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\nlet billing = try pxpCheckout.create(.billingAddress, componentConfig: BillingAddressComponentConfig()) as! BillingAddressComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For billing address integration, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/billing-address"},"children":["Billing address"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/pre-fill-billing-address-checkbox"},"children":["Pre-fill billing address checkbox"]},". For AVS and submit workflows, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-submit"},"children":["Card submit"]},"."]}]}]},"headings":[{"value":"Postcode","id":"postcode","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Configuration","id":"configuration","depth":2},{"value":"Validation messages","id":"validation-messages","depth":3},{"value":"PostcodeValidationResource","id":"postcodevalidationresource","depth":4},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Validation","id":"validation","depth":2},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic postcode field","id":"basic-postcode-field","depth":3},{"value":"With custom styling","id":"with-custom-styling","depth":3},{"value":"With validation callbacks","id":"with-validation-callbacks","depth":3},{"value":"With custom error messages","id":"with-custom-error-messages","depth":3},{"value":"Inside billing address","id":"inside-billing-address","depth":3},{"value":"With pre-fill from shipping","id":"with-pre-fill-from-shipping","depth":3}],"frontmatter":{"seo":{"title":"Postcode"}},"lastModified":"2026-05-18T11:50:15.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/postcode","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}