{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details"]},"type":"markdown"},"seo":{"title":"Card-on-file","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-on-file","__idx":0},"children":["Card-on-file"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the card-on-file 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":["At minimum, the card-on-file component can be created with default settings to display all saved card tokens:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nlet pxpCheckout = try PxpCheckout.initialize(config: CheckoutConfig(\n    environment: .test,\n    session: SessionData(\n        sessionId: \"your-session-id\",\n        hmacKey: \"your-hmac-key\",\n        encryptionKey: \"your-encryption-key\"\n    ),\n    transactionData: TransactionData(\n        amount: Decimal(10),\n        currency: \"USD\",\n        entryType: .ecom,\n        intent: TransactionIntentData(card: .authorisation),\n        merchantTransactionId: \"unique-transaction-id\",\n        merchantTransactionDate: { Date() }\n    ),\n    merchantShopperId: \"shopper-id\",\n    ownerType: \"MerchantGroup\",\n    ownerId: \"your-owner-id\"\n))\n\n// Create card-on-file component\nlet cardOnFileComponent = try pxpCheckout.create(.cardOnFile, componentConfig: CardOnFileComponentConfig()) as! CardOnFileComponent\n\n// Render component in SwiftUI\ncardOnFileComponent.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":["For more complex implementations, you can configure filtering, sorting, and display options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Create additional components for card-on-file\nvar cvcConfig = CardCvcComponentConfig(label: \"Security code\")\ncvcConfig.isRequired = true\n\nvar expiryConfig = CardExpiryDateComponentConfig(label: \"Expiry date\")\n\n// Create card-on-file with advanced configuration\nvar config = CardOnFileComponentConfig()\n\n// Filtering options\nconfig.limitTokens = 5\nconfig.filterBy = FilterByConfig(\n    excludeExpiredTokens: true,\n    schemes: [.visa, .mastercard],\n    fundingSource: \"Credit\",\n    issuerCountryCode: \"USA\",\n    ownerType: \"Consumer\"\n)\n\n// Sorting options\nconfig.orderBy = OrderByConfig(\n    expiryDate: OrderByDirectionConfig(\n        direction: \"asc\",\n        priority: 1\n    ),\n    scheme: OrderByValueConfig(\n        valuesOrder: [.visa, .mastercard, .americanExpress],\n        priority: 2\n    ),\n    fundingSource: OrderByValueConfig(\n        valuesOrder: [\"Credit\", \"Debit\"],\n        priority: 3\n    ),\n    lastUsageDate: OrderByLastUsageDateConfig(\n        direction: \"desc\",\n        orderByField: \"lastSuccessfulPurchaseDate\",\n        priority: 4\n    )\n)\n\n// UI configuration\nconfig.isExpiryDateEditable = true\nconfig.isCvcRequired = true\nconfig.allowDeleteToken = true\n\n// Nested components\nconfig.cvcComponentConfig = cvcConfig\nconfig.expiryDateComponentConfig = expiryConfig\n\nlet cardOnFileComponent = try pxpCheckout.create(.cardOnFile, componentConfig: config) as! CardOnFileComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payout support:"]}," The card-on-file component supports card payouts (disbursements) where funds are sent to a cardholder's card. Each saved card token includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastSuccessfulPayoutDate"]},", allowing you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Sort cards by most recent payout activity"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display cards familiar to payout recipients"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Build streamlined disbursement flows"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Common payout use cases include marketplace seller payments, insurance settlements, refunds, and prize distributions. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intent: TransactionIntentData(card: .payout)"]}," in your transaction data configuration."]}]},{"$$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":["limitTokens"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The maximum number of tokens to display in the component. For example, if set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["5"]}," then only the first five card tokens are displayed. 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":["filterBy"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FilterByConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The filtering options for saved card tokens. Allows you to narrow down which saved cards are displayed based on various criteria. 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":["filterBy.excludeExpiredTokens"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to exclude tokens associated with expired cards. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", cards past their expiry date are hidden from the list. 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":["filterBy.schemes"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[TokenScheme]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The list of card schemes to include. For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[.visa, .mastercard]"]}," shows only Visa and Mastercard tokens. 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":["filterBy.fundingSource"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The funding source type to include. For example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Credit\""]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Debit\""]}," filters to show only cards of that type. 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":["filterBy.issuerCountryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The issuer country code to include. Filters tokens by the country where the card was issued. 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":["filterBy.ownerType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The owner type to include. For example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Consumer\""]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Commercial\""]}," filters by card ownership type. 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":["orderBy"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The ordering options for saved card tokens. Controls how tokens are sorted and displayed. Multiple ordering rules can be applied with priority values. 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":["orderBy.expiryDate"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByDirectionConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by 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":["orderBy.expiryDate.direction"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The direction to order by expiry date.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"desc\""]}," - newest expiry dates first"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"asc\""]}," - oldest expiry dates first"]}]}," 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":["orderBy.expiryDate.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["orderBy.scheme"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByValueConfig<TokenScheme>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by card scheme. Allows custom ordering like Visa first, then Mastercard. 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":["orderBy.scheme.valuesOrder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[TokenScheme]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card scheme order. Tokens matching earlier schemes in the array appear first. 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":["orderBy.scheme.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["orderBy.fundingSource"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByValueConfig<String>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by funding source. Allows prioritising credit vs debit cards. 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":["orderBy.fundingSource.valuesOrder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[String]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The funding source order. Tokens matching earlier values appear first.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Credit\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Debit\""]}]}]}," 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":["orderBy.fundingSource.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["orderBy.ownerType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByValueConfig<String>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by owner type. Allows prioritising consumer vs commercial cards. 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":["orderBy.ownerType.valuesOrder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["[String]?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The owner type order. Tokens matching earlier values appear first.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Consumer\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Commercial\""]}]}]}," 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":["orderBy.ownerType.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["orderBy.issuerCountryCode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByDirectionConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by issuer country code. Allows alphabetical sorting by country. 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":["orderBy.issuerCountryCode.direction"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The direction to order by country code.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"desc\""]}," - reverse alphabetical"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"asc\""]}," - alphabetical"]}]}," 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":["orderBy.issuerCountryCode.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["orderBy.lastUsageDate"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["OrderByLastUsageDateConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for ordering by last usage date. Shows most/least recently used cards first. 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":["orderBy.lastUsageDate.direction"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The direction to order by last usage.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"desc\""]}," - most recent first"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"asc\""]}," - oldest first"]}]}," 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":["orderBy.lastUsageDate.orderByField"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The field to order by when sorting by last usage. Choose based on your transaction type:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"lastSuccessfulPurchaseDate\""]},":"]}," Sort by most recent purchase/authorisation (default for payment flows)",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"lastSuccessfulPayoutDate\""]},":"]}," Sort by most recent payout/disbursement (recommended for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".payout"]}," intent flows)",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"For mixed flows or when unspecified, the SDK sorts by the most recent activity across both fields. 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":["orderBy.lastUsageDate.priority"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of this ordering rule. Lower numbers are applied first. 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":["transactionInitiatorType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TransactionInitiatorType?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The transaction initiator type. Indicates whether the transaction is customer-initiated or merchant-initiated. 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":["isExpiryDateEditable"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the expiry date field can be edited by the cardholder. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", users can update the expiry date if their card has been renewed. 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":["isCvcRequired"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether CVC is required when selecting a token. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", users must enter the security code even for saved cards. This applies to all tokens. 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":["allowDeleteToken"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to allow cardholders to delete a token (previously saved card). When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", a delete button appears for each saved 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":["cvcComponentConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardCvcComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for the standalone card CVC component. Used when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isCvcRequired"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},". See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-cvc"},"children":["Card CVC"]},". 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":["expiryDateComponentConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The configuration for the standalone card expiry date component. Used when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isExpiryDateEditable"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},". See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-expiry-date"},"children":["Card expiry date"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":5},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card-on-file component renders saved cards with built-in SwiftUI styling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override the default appearance by providing custom styles, images, and text labels:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Custom text labels\nconfig.expiredText = \"Card expired\"\nconfig.validThruText = \"Valid until\"\nconfig.deleteErrorMessage = \"Unable to delete card. Please try again.\"\nconfig.deleteSuccessMessage = \"Card has been removed successfully.\"\nconfig.updateErrorMessage = \"Unable to update card information. Please try again.\"\nconfig.updateSuccessMessage = \"Card information updated successfully.\"\n\n// Custom styling\nconfig.styles = CardOnFileStyles(\n    backgroundColor: Color(.systemGray6),\n    borderColor: Color(.systemGray3),\n    borderRadius: 8,\n    padding: 20\n)\n\nconfig.inputStyles = FieldInputStyle(\n    cornerRadius: 5,\n    backgroundColor: Color(.secondarySystemBackground)\n)\n\n// Custom icons\nconfig.iconDeleteSrc = Image(systemName: \"trash\")\nconfig.iconSaveSrc = Image(systemName: \"checkmark\")\nconfig.iconCancelSrc = Image(systemName: \"xmark\")\nconfig.iconEditSrc = Image(systemName: \"pencil\")\n\n// Custom card brand images\nconfig.cardBrandImages = CardBrandImages(\n    visaSrc: Image(\"BrandVisa\"),\n    mastercardSrc: Image(\"BrandMastercard\"),\n    amexSrc: Image(\"BrandAmex\")\n)\n\nconfig.useTransparentCardBrandImage = true\n\n// Accessibility labels\nconfig.editCardInformationAccessibilityLabel = \"Edit card information button\"\nconfig.saveCardInformationAccessibilityLabel = \"Save card information button\"\nconfig.cancelEditCardInformationAccessibilityLabel = \"Cancel edit card information button\"\nconfig.deleteCardButtonAccessibilityLabel = \"Delete card button\"\nconfig.cardNumberAccessibilityLabel = \"Card number\"\nconfig.cardExpiryDateAccessibilityLabel = \"Card expiry date\"\n\n// Delete modal configuration\nconfig.deleteModal = DeleteModalConfig(\n    dialogAccessibilityLabel: \"Delete card dialog\",\n    bodyText: \"Are you sure you want to delete this payment method?\",\n    cancelButtonText: \"No, keep it\",\n    deleteButtonText: \"Yes, delete it\"\n)\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":["styles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["List container, token rows, typography, and message styles."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["List background."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["List border colour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["List corner radius."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["List inner padding."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.gap"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Spacing between token rows."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.tokenContainerStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenContainerStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Normal, selected, and expired row styling."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.cardNumberStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenTextStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Masked PAN text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.expiredTextStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenTextStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Expired label."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.validThruLabelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenTextStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["“Valid thru” label."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.expiryDateValueStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenTextStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Expiry value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.successMessageStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileMessageStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Success banner."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.errorMessageStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileMessageStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Error banner."]}]},{"$$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":["FieldInputStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Shared base for CVC and expiry inputs; per-component configs override when set."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardBrandImages?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["SwiftUI ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Image"]}," per brand (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["visaSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mastercardSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amexSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cupSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dinersSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["discoverSrc"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jcbSrc"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconDeleteSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Delete control icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconSaveSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Save control icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconCancelSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Cancel control icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconEditSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Edit control icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useTransparentCardBrandImage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Prefer transparent brand artwork. 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":["expiredText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Copy for expired cards."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validThruText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["“Valid thru” label override."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteErrorMessage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Delete failure message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteSuccessMessage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Delete success message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["updateErrorMessage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Update failure message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["updateSuccessMessage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Update success message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["DeleteModalConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Delete confirmation content and optional ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardOnFileModalStyle"]},", button styles, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconWarning"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["editCardInformationAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for edit."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveCardInformationAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for save."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cancelEditCardInformationAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for cancel."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteCardButtonAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for delete."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumberAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for masked number."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["VoiceOver label for expiry."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":7},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card-on-file component provides event handlers to manage token retrieval, rendering, updates, and deletions:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"config.onPreRenderTokens = { response in\n    response.gatewayTokens.map {\n        CardTokenMapping(id: $0.gatewayTokenId, isCvcRequired: true)\n    }\n    + response.schemeTokens.map {\n        CardTokenMapping(id: $0.schemeTokenId, isCvcRequired: true)\n    }\n}\n\nconfig.onRetrieveTokensSuccess = { response in\n    // Optional: analytics or UI state\n}\n\nconfig.onRetrieveTokensFailed = { failure in\n    // Show error UI\n}\n\nconfig.onSelectToken = { token in\n    // token.maskedPrimaryAccountNumber, token.cardScheme, etc.\n}\n\nconfig.onPreDeleteToken = { token in\n    // Return true to proceed (after your own confirmation if needed)\n    true\n}\n\nconfig.onDeleteTokenSuccess = { _ in }\nconfig.onDeleteTokenFailed = { _ in }\n\nconfig.onUpdateTokenSuccess = { _ in }\nconfig.onUpdateTokenFailed = { _ in }\n\nconfig.onValidationError = { error in\n    // e.g. invalid expiry while editing\n}\n\nconfig.tokenLabelBuilder = { token in\n    \"\\(token.cardScheme.displayName) \\(token.maskedPrimaryAccountNumber)\"\n}\n\nconfig.tokenItemBuilder = { elements in\n    AnyView(\n        HStack {\n            elements.tokenImageView\n            VStack(alignment: .leading) {\n                elements.tokenLabelView\n                elements.expiryDateView\n            }\n            Spacer()\n            elements.editButtonView\n            elements.deleteButtonView\n        }\n    )\n}\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":"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":["onPreRenderTokens: ((RetrieveCardTokensResponseSuccess) -> [CardTokenMapping])?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called to map and order tokens before UI builds. Returns an array of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardTokenMapping"]}," where each can set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," and per-token ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isCvcRequired"]},". Allows custom filtering and ordering logic."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onRetrieveTokensSuccess: ((RetrieveCardTokensResponseSuccess) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the token list is successfully retrieved from the API. Receives the response with all available tokens."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onRetrieveTokensFailed: ((RetrieveCardTokensResponseFailed) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when token list retrieval fails. Receives the failure response with error details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSelectToken: ((BaseCardToken) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when user selects a token. This includes initial auto-selection and re-selection after token deletion. Receives the selected token details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDeleteToken: ((BaseCardToken) async -> Bool)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called before a token is deleted. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to cancel deletion, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed. Use for custom confirmation flows."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenSuccess: ((DeleteCardTokenResponseSuccess) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when a token is successfully removed. Receives the deletion response."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenFailed: ((DeleteCardTokenResponseFailed) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when token deletion fails. Receives the API error details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenSuccess: ((UpdateCardTokenResponseSuccess) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when an expiry date update succeeds. Receives the update response."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenFailed: ((UpdateCardTokenResponseFailed) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when an expiry date update fails. Receives the API error details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationError: ((BaseSdkException) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when validation issues occur (for example, invalid expiry format during editing). Receives the validation exception."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenItemBuilder: ((CardTokenBuilderElements) -> AnyView)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom SwiftUI layout builder for each token row. Receives pre-built views: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenImageView"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenLabelView"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiryDateView"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["editButtonView"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteButtonView"]},". Return your custom ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnyView"]}," layout."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenLabelBuilder: ((BaseCardToken) -> String)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom label text builder for the default layout. Receives the token details and returns a single-line string."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BaseCardToken"]}," exposes fields such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maskedPrimaryAccountNumber"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryMonth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryYear"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingSource"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ownerType"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["issuerName"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["issuerCountryCode"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastSuccessfulPurchaseDate"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastSuccessfulPayoutDate"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardScheme"]},"."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For shared event patterns and types, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":9},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildContent()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns SwiftUI content for the card-on-file list:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"cardOnFileComponent.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"checkout-level-unmount","__idx":10},"children":["Checkout-level ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Releases components created from the checkout instance:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"PxpCheckout.unmount()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payment-integration","__idx":11},"children":["Payment integration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To charge a saved card, link this component to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-submit"},"children":["Card submit"]},": set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardSubmitConfig.cardOnFileComponent"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardSubmitConfig.useCardOnFile = true"]},". The submit component performs validation and reads the selected token and CVC internally — you don't need to call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getValue"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validate"]}," from your app code."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":12},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-saved-cards","__idx":13},"children":["Basic saved cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation showing saved payment methods:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CardOnFileComponentConfig()\nconfig.limitTokens = 5\nconfig.filterBy = FilterByConfig(excludeExpiredTokens: true)\n\nconfig.onSelectToken = { token in\n    print(\"Selected:\", token.maskedPrimaryAccountNumber)\n}\n\nconfig.onRetrieveTokensFailed = { _ in\n    // Show error\n}\n\nlet cardOnFile = try pxpCheckout.create(.cardOnFile, componentConfig: config) as! CardOnFileComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"filtered-and-sorted-list","__idx":14},"children":["Filtered and sorted list"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only specific card types in a custom order:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CardOnFileComponentConfig()\nconfig.filterBy = FilterByConfig(\n    excludeExpiredTokens: true,\n    schemes: [.visa, .mastercard],\n    fundingSource: \"Credit\",\n    issuerCountryCode: \"USA\"\n)\nconfig.orderBy = OrderByConfig(\n    lastUsageDate: OrderByLastUsageDateConfig(\n        orderByField: \"lastSuccessfulPurchaseDate\",\n        direction: \"desc\",\n        priority: 1\n    ),\n    scheme: OrderByValueConfig(valuesOrder: [.visa, .mastercard], priority: 2)\n)\nconfig.limitTokens = 3\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"editable-expiry-cvc-required-delete-enabled","__idx":15},"children":["Editable expiry, CVC required, delete enabled"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Allow users to edit and delete their saved cards:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var config = CardOnFileComponentConfig()\nconfig.isExpiryDateEditable = true\nconfig.isCvcRequired = true\nconfig.allowDeleteToken = true\n\nvar cvcConfig = CardCvcComponentConfig(label: \"Security code\")\ncvcConfig.applyMask = true\ncvcConfig.showMaskToggle = true\nconfig.cvcComponentConfig = cvcConfig\n\nconfig.expiryDateComponentConfig = CardExpiryDateComponentConfig(label: \"Expiry date\")\n\nconfig.onPreDeleteToken = { token in\n    // Present UIAlertController or SwiftUI confirmation; return whether to delete\n    true\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-delete-modal","__idx":16},"children":["Custom delete modal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure a custom deletion confirmation modal:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"config.deleteModal = DeleteModalConfig(\n    dialogAccessibilityLabel: \"Confirm deletion\",\n    bodyText: \"Remove this payment method?\",\n    cancelButtonText: \"Cancel\",\n    deleteButtonText: \"Delete\",\n    modalStyle: CardOnFileModalStyle(\n        backgroundColor: .white,\n        borderRadius: 12,\n        bodyPadding: 16,\n        shadowRadius: 16\n    ),\n    deleteButtonStyle: CardOnFileDeleteButtonStyle(\n        backgroundColor: .red,\n        textColor: .white,\n        height: 44,\n        borderRadius: 8\n    ),\n    cancelButtonStyle: CardOnFileCancelButtonStyle(\n        backgroundColor: .white,\n        textColor: .primary,\n        height: 44,\n        borderRadius: 8,\n        borderColor: .gray,\n        borderWidth: 1\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-token-row-swiftui","__idx":17},"children":["Custom token row (SwiftUI)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use a custom SwiftUI layout for token display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"config.tokenItemBuilder = { elements in\n    AnyView(\n        VStack(alignment: .leading, spacing: 8) {\n            HStack {\n                elements.tokenImageView\n                elements.tokenLabelView\n                Spacer()\n                elements.editButtonView\n                elements.deleteButtonView\n            }\n            elements.expiryDateView\n        }\n        .padding()\n        .background(RoundedRectangle(cornerRadius: 10).stroke(Color.gray.opacity(0.3)))\n    )\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-card-submit","__idx":18},"children":["With card submit"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Integrate card-on-file with the card submit component for payment processing:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let cofConfig = CardOnFileComponentConfig()\ncofConfig.isCvcRequired = true\nlet cof = try pxpCheckout.create(.cardOnFile, componentConfig: cofConfig) as! CardOnFileComponent\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.cardOnFileComponent = cof\nsubmitConfig.useCardOnFile = true\nsubmitConfig.submitText = \"Pay with saved card\"\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet submit = try pxpCheckout.create(.cardSubmit, componentConfig: submitConfig) as! CardSubmitComponent\n\nVStack {\n    cof.buildContent()\n    submit.buildContent()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payoutdisbursement-flow","__idx":19},"children":["Payout/disbursement flow"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display saved cards for recipients to receive funds:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let transactionData = TransactionData(\n    amount: Decimal(string: \"250.00\")!,\n    currency: \"USD\",\n    entryType: .ecom,\n    intent: TransactionIntentData(card: .payout),  // Set to payout for disbursements\n    merchantTransactionId: \"payout-\\(UUID().uuidString)\",\n    merchantTransactionDate: { Date() }\n)\n\nlet checkoutConfig = CheckoutConfig(\n    environment: .test,\n    session: sessionData,\n    transactionData: transactionData,\n    merchantShopperId: \"recipient-shopper-id\",\n    ownerType: \"MerchantGroup\",\n    ownerId: \"your-owner-id\",\n    onGetShopper: { async in TransactionShopper(id: \"recipient-shopper-id\") }\n)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\n\nvar config = CardOnFileComponentConfig()\nconfig.limitTokens = 5\n\n// Filter and sort for payout flows\nconfig.filterBy = FilterByConfig(excludeExpiredTokens: true)\n\n// Prioritise cards used for recent payouts\nconfig.orderBy = OrderByConfig(\n    lastUsageDate: OrderByLastUsageDateConfig(\n        orderByField: \"lastSuccessfulPayoutDate\",  // Sort by payout activity\n        direction: \"desc\",\n        priority: 1\n    )\n)\n\nconfig.isExpiryDateEditable = true\nconfig.isCvcRequired = true\n\nconfig.onSelectToken = { token in\n    print(\"Payout card selected:\", token.maskedPrimaryAccountNumber)\n    print(\"Last payout:\", token.lastSuccessfulPayoutDate.isEmpty ? \"None\" : token.lastSuccessfulPayoutDate)\n}\n\nconfig.onRetrieveTokensFailed = { error in\n    print(\"Failed to load payout cards:\", error.message)\n    // Show error message to user\n}\n\nlet cardOnFileComponent = try pxpCheckout.create(.cardOnFile, componentConfig: config) as! CardOnFileComponent\n\n// Continue with card submit component for payout execution...\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"success"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["orderByField: \"lastSuccessfulPayoutDate\""]}," to prioritise cards the recipient has successfully used for previous payouts. This builds trust and reduces friction by showing familiar payout destinations first."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For setup and lifecycle, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/implementation"},"children":["Implementation"]},". For validation behaviour on linked fields, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/data-validation"},"children":["Data validation"]},"."]}]}]},"headings":[{"value":"Card-on-file","id":"card-on-file","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":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Checkout-level unmount()","id":"checkout-level-unmount","depth":3},{"value":"Payment integration","id":"payment-integration","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic saved cards","id":"basic-saved-cards","depth":3},{"value":"Filtered and sorted list","id":"filtered-and-sorted-list","depth":3},{"value":"Editable expiry, CVC required, delete enabled","id":"editable-expiry-cvc-required-delete-enabled","depth":3},{"value":"Custom delete modal","id":"custom-delete-modal","depth":3},{"value":"Custom token row (SwiftUI)","id":"custom-token-row-swiftui","depth":3},{"value":"With card submit","id":"with-card-submit","depth":3},{"value":"Payout/disbursement flow","id":"payoutdisbursement-flow","depth":3}],"frontmatter":{"seo":{"title":"Card-on-file"}},"lastModified":"2026-06-12T11:56:36.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/card-on-file","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}