{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Card expiry date","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":"card-expiry-date","__idx":0},"children":["Card expiry date"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the card expiry date 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 card expiry date component collects the card's expiration date. 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 = CardExpiryDateComponentConfig(\n    label: \"Expiry date\",\n    placeholder: \"MM/YY\"\n)\n\nlet expiry = try pxpCheckout.create(.cardExpiryDate, componentConfig: config) as! CardExpiryDateComponent\n\nexpiry.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 format, validation messages, hint icons, and styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CardExpiryDateComponentConfig(\n    label: \"Expiry\",\n    placeholder: \"MM/YY\",\n    guideText: \"Use the date printed on your card\",\n    defaultValue: nil,\n    numberOfMonthExpired: 0,\n    formatOptions: .mmYY,\n    validations: CardExpiryDateValidationResource(\n        ED01: \"Expiry date is required\",\n        ED02: \"Month must be between 01 and 12\",\n        ED03: \"Year is not valid\",\n        ED04: \"Card has expired\",\n        ED05: \"Use the format MM/YY\"\n    ),\n    showHintIcon: true,\n    showTooltip: false,\n    validationOnBlur: true,\n    validationOnChange: false\n)\n\nconfig.componentStyles = FieldStyle(cornerRadius: 8)\nconfig.displayValidIcon = true\n\nlet expiry = try pxpCheckout.create(.cardExpiryDate, componentConfig: config) as! CardExpiryDateComponent\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":["defaultValue"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The pre-filled display value. When set, the field initially shows this expiry date. 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":["numberOfMonthExpired"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The additional months after printed expiry before treating the card as expired. Extends the validation grace period beyond the printed date. 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":["formatOptions"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateFormatOption?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The display and validation format. Options: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmYY"]}," (12/25), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmYYYY"]}," (12/2025), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmDashYY"]}," (12-25), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmDotYY"]}," (12.25). 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":["validations"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateValidationResource?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom validation messages for ED01-ED05 error codes. Overrides SDK default messages. 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":["shouldEncrypt"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to encrypt the value when read. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", the expiry date is encrypted before transmission. 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":["showHintIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to show a hint icon beside the field. Helps users locate the expiry date on their card. 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":["showTooltip"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to show tooltip behaviour with the hint. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", displays additional information when the hint icon is tapped. 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":["hintIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom hint icon image. 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":["tooltipIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom tooltip trigger image. 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":["maskHiddenIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The icon when value is masked. 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":["maskVisibleIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The icon when value is visible. 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":["onPaste"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler called when user pastes 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":["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 accessibility label for the input. 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 card expiry date component, this is always ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and can't be changed. The expiry date field is always required for payment processing."]}]},{"$$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":"format-options","__idx":4},"children":["Format options"]},{"$$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":"CardExpiryDateFormatOption"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardExpiryDateFormatOption"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Example"},"children":["Example"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Separator"},"children":["Separator"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Max length"},"children":["Max length"]}]}]},{"$$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":[".mmYY"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["12/25"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["5"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmYYYY"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["12/2025"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["7"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmDashYY"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["12-25"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["5"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mmDotYY"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["12.25"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["."]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["5"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":5},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card expiry date 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 field value 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 all validation checks pass. 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":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPaste: (() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when user pastes into the field."]}]}]}]}]},{"$$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":6},"children":["Validation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card expiry date 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":"code","attributes":{},"children":["ED01"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Contains non-numeric characters"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Expiry date must contain only digits\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ED02"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Invalid month (not between 01-12)"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Invalid month. Please enter a month between 01 and 12\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ED03"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Format doesn't match selected pattern"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Invalid expiry date format. Please use\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ED04"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Card has expired"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"The card expiry date you entered has already passed. Please enter a valid expiration date\""]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ED05"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Empty value"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["\"Please enter expiry date\""]}]}]}]}]},{"$$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 default messages using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validations"]}," property. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberOfMonthExpired"]}," to extend the grace period beyond the printed expiry date."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":7},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":8},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildContent()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns SwiftUI content for the expiry date field:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"expiry.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":9},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"four-digit-year","__idx":10},"children":["Four-digit year"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use a four-digit year format:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = CardExpiryDateComponentConfig(\n    label: \"Expiry\",\n    placeholder: \"MM/YYYY\",\n    formatOptions: .mmYYYY\n)\nlet expiry = try pxpCheckout.create(.cardExpiryDate, componentConfig: config) as! CardExpiryDateComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":11},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure custom input and border styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var cfg = CardExpiryDateComponentConfig(label: \"Expires\", formatOptions: .mmYY)\ncfg.inputStyles = FieldInputStateStyles(\n    base: FieldInputStyle(cornerRadius: 8, borderWidth: 1, borderColor: Color(.separator)),\n    invalid: FieldInputStyle(borderColor: .red)\n)\nlet expiry = try pxpCheckout.create(.cardExpiryDate, componentConfig: cfg) as! CardExpiryDateComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateComponent"]}," into ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-submit"},"children":["Card submit"]},", or use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/new-card"},"children":["New card"]},", to include expiry in payment flows. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/data-validation"},"children":["Data validation"]},"."]}]}]},"headings":[{"value":"Card expiry date","id":"card-expiry-date","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":"Format options","id":"format-options","depth":3},{"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":"Four-digit year","id":"four-digit-year","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3}],"frontmatter":{"seo":{"title":"Card expiry date"}},"lastModified":"2026-05-18T12:08:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/card-expiry-date","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}