{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Country selection","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":"country-selection","__idx":0},"children":["Country selection"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the country selection 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 country selection component displays a searchable drop-down for selecting a country. 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 = CountrySelectionComponentConfig(\n    label: \"Country\",\n    placeholder: \"Select country\"\n)\n\nlet country = try pxpCheckout.create(.countrySelection, componentConfig: config) as! CountrySelectionComponent\n\ncountry.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise the dropdown styling, validation messages, and event handlers:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CountrySelectionComponentConfig(\n    label: \"Country\",\n    placeholder: \"Search or select\",\n    guideText: \"Billing country\",\n    noCountryText: \"No matching country\",\n    validations: CountrySelectionValidationResource(CS01: \"Select a country\"),\n    dropdownStyles: CountrySelectionDropdownStyles(\n        maxHeight: 280,\n        cornerRadius: 8,\n        selectedOptionStyle: CountrySelectionOptionStyle(\n            backgroundColor: Color.blue.opacity(0.12),\n            textColor: .primary\n        ),\n        unselectedOptionStyle: CountrySelectionOptionStyle(\n            verticalPadding: 10,\n            horizontalPadding: 12\n        ),\n        emptyStateStyle: CountrySelectionOptionStyle(\n            textColor: .secondary\n        )\n    ),\n    onChange: { /* selection changed */ },\n    onValidationFailed: { _ in }\n)\n\nconfig.componentStyles = FieldStyle(cornerRadius: 8)\nconfig.displayValidIcon = true\nconfig.validationOnChange = true\n\nlet country = try pxpCheckout.create(.countrySelection, componentConfig: config) as! CountrySelectionComponent\n","lang":"swift"},"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":"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":["CountrySelectionValidationResource?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom validation messages for CS01 error code. Overrides SDK default message. 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":["noCountryText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The message displayed when search matches no country. Shown in the dropdown when the user's search query has no results. Defaults to SDK localisation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdownStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CountrySelectionDropdownStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The dropdown panel and option styling. Controls the appearance of the country selection dropdown menu. 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":["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 no country is selected. Displayed in the dropdown trigger. 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 accessibility label for the control. 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 country selection component, this is always ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and can't be changed. A country must be selected before the payment can be submitted."]}]},{"$$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 message 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 invalid state 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 state 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 show 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 show the invalid 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 on each change. 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":"dropdown-styles","__idx":4},"children":["Dropdown styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise the dropdown panel and option rows:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"countryselectiondropdownstyles","__idx":5},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CountrySelectionDropdownStyles"]}]},{"$$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":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The dropdown panel background colour. 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":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The panel border colour. 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":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The panel border width in points. 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":["cornerRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The panel corner radius in points. 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":["shadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ShadowStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The panel shadow configuration. Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["radius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["x"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["y"]},". 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":["maxHeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The maximum scroll height in points. Limits the vertical size of the dropdown list. 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":["selectedOptionStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CountrySelectionOptionStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The styling for the currently selected option. 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":["unselectedOptionStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CountrySelectionOptionStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The styling for unselected options in the dropdown. 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":["emptyStateStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CountrySelectionOptionStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The styling for empty search state display. Shown when no countries match the search query. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"countryselectionoptionstyle","__idx":6},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CountrySelectionOptionStyle"]}]},{"$$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":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The option row background colour. 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":["textColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The country name text colour. 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":["font"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The country name font. 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":["horizontalPadding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The row horizontal padding in points. 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":["verticalPadding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The row vertical padding in points. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The country selection component provides event handlers for user interaction and validation:"]},{"$$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: (() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the selection changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus: (() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the field gains focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onBlur: (() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the field loses focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationPassed: (([ValidationResult]) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when validation passes. Receives an array of validation results."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed: (([ValidationResult]) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when validation fails. Receives an array of validation results containing error details."]}]}]}]}]},{"$$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 country selection component validates user 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":["CS01"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Required but no country selected"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Please select country\""]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Validation triggers based on your configuration (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnBlur"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnChange"]},"). Override the default message 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 country selection dropdown:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"country.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":"custom-dropdown-styling","__idx":12},"children":["Custom dropdown styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure custom styling for the dropdown panel and options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CountrySelectionComponentConfig(label: \"Country\")\nconfig.dropdownStyles = CountrySelectionDropdownStyles(\n    maxHeight: 200,\n    borderColor: Color(.separator),\n    borderWidth: 1,\n    selectedOptionStyle: CountrySelectionOptionStyle(\n        backgroundColor: .blue.opacity(0.1),\n        textColor: .primary\n    )\n)\nlet country = try pxpCheckout.create(.countrySelection, componentConfig: config) as! CountrySelectionComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-billing-address","__idx":13},"children":["With billing address"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use in combination with other billing fields:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let country = try pxpCheckout.create(\n    .countrySelection,\n    componentConfig: CountrySelectionComponentConfig(label: \"Country\")\n) as! CountrySelectionComponent\n\nlet postcode = try pxpCheckout.create(\n    .postcode,\n    componentConfig: PostcodeComponentConfig(label: \"Postcode\")\n) as! PostcodeComponent\n\nlet address = try pxpCheckout.create(\n    .address,\n    componentConfig: AddressComponentConfig(label: \"Address\")\n) as! AddressComponent\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.avsRequest = true\nsubmitConfig.billingAddressComponents = BillingAddressComponents(\n    countrySelectionComponent: country,\n    postcodeComponent: postcode,\n    addressComponent: address\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this component in ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/billing-address"},"children":["Billing address"]}," or wider address flows. For validation details, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/data-validation"},"children":["Data validation"]},"."]}]}]},"headings":[{"value":"Country selection","id":"country-selection","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":"Dropdown styles","id":"dropdown-styles","depth":3},{"value":"CountrySelectionDropdownStyles","id":"countryselectiondropdownstyles","depth":4},{"value":"CountrySelectionOptionStyle","id":"countryselectionoptionstyle","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":"Custom dropdown styling","id":"custom-dropdown-styling","depth":3},{"value":"With billing address","id":"with-billing-address","depth":3}],"frontmatter":{"seo":{"title":"Country selection"}},"lastModified":"2026-05-18T12:08:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/country-selection","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}