{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"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 about customisation options for the card-on-file component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":1},"children":["Styling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val cardOnFileComponentConfig = CardOnFileComponentConfig(\n    style = CardOnFileStyle?,\n    deleteModal = DeleteModalConfig,\n    cvcComponentConfig = CardCvcComponentConfig?,\n    expiryDateComponentConfig = CardExpiryDateComponentConfig?,\n    onTokenSelected = ((CardToken) -> Unit)?,\n    onPreRenderTokens = ((RetrieveCardTokensResponseSuccess) -> List<CardTokenMapping>)?,\n    onRetrieveTokensFailed = ((RetrieveCardTokensResponseFailed) -> Unit)?,\n    onDeleteTokenSuccess = ((DeleteCardTokenResponseSuccess) -> Unit)?,\n    onDeleteTokenFailed = ((DeleteCardTokenResponseFailed) -> Unit)?,\n    onPreDeleteToken = ((BaseTokenData) -> CompletableDeferred<Boolean>)?,\n    onUpdateTokenFailed = ((UpdateCardTokenResponseFailed) -> Unit)?,\n    onUpdateTokenSuccess = ((UpdateCardTokenResponseSuccess) -> Unit)?,\n    onTokensLoaded = ((List<CardToken>) -> Unit)?,\n    tokenLabelBuilder = ((CardToken) -> String)?,\n    tokenItemBuilder = ((@Composable (TokenBuilderLayoutScope.() -> Unit))?,\n    limitTokens = Int?,\n    filter = CardTokenFilter,\n    order = CardTokenOrder,\n    isExpiryDateEditable = Boolean,\n    isCvcRequired = Boolean,\n    allowDeleteToken = Boolean,\n    validThruText = String,\n    expiredText = String,\n    deleteErrorMessage = String?,\n    deleteSuccessMessage = String?,\n    updateErrorMessage = String?,\n    updateSuccessMessage = String?,\n    cardBrandImages = CardBrandImages?,\n    useTransparentCardBrandImage = Boolean,\n    editCardInformationAriaLabel = String,\n    saveCardInformationAriaLabel = String,\n    cancelEditCardInformationAriaLabel = String,\n    deleteCardButtonAriaLabel = String,\n    cardNumberAriaLabel = String,\n    cardExpiryDateAriaLabel = String,\n    iconDelete = Int,\n    iconSave = Int,\n    iconCancel = Int,\n    iconEdit = Int,\n    notificationConfig = NotificationConfig\n)\n","lang":"kotlin"},"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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Component styling configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Delete modal configuration with dialog text and styling."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["CVC input component configuration for secure card selection. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-cvc"},"children":["Card CVC"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Expiry date input component configuration for card updates. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-expiry-date"},"children":["Card expiry date"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The maximum number of tokens to display."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["filter"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenFilter"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Filter options for card tokens. Defaults to default filter."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["order"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardTokenOrder"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Order/sorting options for card tokens. Defaults to default order."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isExpiryDateEditable"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the expiry date field can be edited. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isCvcRequired"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether CVC is required when selecting a token. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowDeleteToken"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to allow users to delete tokens. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The \"Valid Thru\" label text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Valid Thru\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The expired card text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Expired\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The card deletion failure message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The card deletion success message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The card update failure message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["The card update success message."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Custom card brand images configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useTransparentCardBrandImage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to use transparent card brand images. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["editCardInformationAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Edit card information aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveCardInformationAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Save card information aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cancelEditCardInformationAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cancel edit aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteCardButtonAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Delete card button aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumberAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card number aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card expiry date aria label for accessibility."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconDelete"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The delete button icon resource. Defaults to a delete icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconSave"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The save button icon resource. Defaults to a save icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconCancel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The cancel button icon resource. Defaults to a cancel icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconEdit"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The edit button icon resource. Defaults to an edit icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["notificationConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NotificationConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Notification configuration for user feedback."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"delete-modal-configuration","__idx":2},"children":["Delete modal configuration"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"data class DeleteModalConfig(\n    var deleteConfirmText: String = \"Are you sure you want to delete this card?\",\n    var deleteConfirmButtonText: String = \"Delete\",\n    var deleteCancelButtonText: String = \"Cancel\",\n    var dialogStyles: CardOnFileStyle.DialogStyles = CardOnFileStyle.DialogStyles()\n)\n","lang":"kotlin"},"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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteConfirmText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The confirmation text displayed in the modal."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteConfirmButtonText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The confirm button text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteCancelButtonText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The cancel button text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dialogStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardOnFileStyle.DialogStyles"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dialog-related styling configuration."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"callbacks","__idx":3},"children":["Callbacks"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"data class CardOnFileComponentConfig(\n    val onFocus: (() -> Unit)? = null,\n    val onBlur: (() -> Unit)? = null,\n    val onFocusChange: ((Boolean) -> Unit)? = null,\n    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,\n    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,\n    val onTokenSelected: ((CardToken) -> Unit)? = null,\n    val onPreRenderTokens: ((RetrieveCardTokensResponseSuccess) -> List<CardTokenMapping>)? = null,\n    val onRetrieveTokensFailed: ((RetrieveCardTokensResponseFailed) -> Unit)? = null,\n    val onDeleteTokenSuccess: ((DeleteCardTokenResponseSuccess) -> Unit)? = null,\n    val onDeleteTokenFailed: ((DeleteCardTokenResponseFailed) -> Unit)? = null,\n    val onPreDeleteToken: ((BaseTokenData) -> CompletableDeferred<Boolean>)? = null,\n    val onUpdateTokenFailed: ((UpdateCardTokenResponseFailed) -> Unit)? = null,\n    val onUpdateTokenSuccess: ((UpdateCardTokenResponseSuccess) -> Unit)? = null,\n    val onTokensLoaded: ((List<CardToken>) -> Unit)? = null,\n    val tokenLabelBuilder: ((CardToken) -> String)? = null,\n    val tokenItemBuilder: ((@Composable (TokenBuilderLayoutScope.() -> Unit))? = null\n)\n","lang":"kotlin"},"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":{"data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus: (() -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the component receives focus. Inherited from BaseFieldComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onBlur: (() -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the component loses focus. Inherited from BaseFieldComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocusChange: ((Boolean) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the component's focus state changes. Inherited from BaseFieldComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationPassed: ((List<ValidationResult>) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when validation passes. Inherited from BaseFieldComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed: ((List<ValidationResult>) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when validation fails. Inherited from BaseFieldComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onTokenSelected: ((CardToken) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when a card token is selected."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreRenderTokens: ((RetrieveCardTokensResponseSuccess) -> List<CardTokenMapping>)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for custom token processing before rendering."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onRetrieveTokensFailed: ((RetrieveCardTokensResponseFailed) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for token retrieval failure."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenSuccess: ((DeleteCardTokenResponseSuccess) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for successful token deletion."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenFailed: ((DeleteCardTokenResponseFailed) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for failed token deletion."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDeleteToken: ((BaseTokenData) -> CompletableDeferred<Boolean>)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for pre-deletion confirmation callback."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenFailed: ((UpdateCardTokenResponseFailed) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for failed token update."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenSuccess: ((UpdateCardTokenResponseSuccess) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for successful token update."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onTokensLoaded: ((List<CardToken>) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when tokens are loaded."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenLabelBuilder: ((CardToken) -> String)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom function for building token labels."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenItemBuilder: ((@Composable (TokenBuilderLayoutScope.() -> Unit))?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom Composable for building token item layouts."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about callbacks, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When integrating card-on-file with card submit for payment processing, you can use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCustomValidation"]}," callback to implement custom business rule validation before submission. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-submit"},"children":["Card submit"]}," for details."]}]},{"$$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 = IntentType.Payout"]}," in your transaction data configuration."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":4},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"import com.pxp.checkout.components.cardonfile.CardOnFileComponent\nimport com.pxp.checkout.components.cardonfile.CardOnFileComponentConfig\nimport com.pxp.checkout.components.cardonfile.DeleteModalConfig\nimport com.pxp.checkout.components.cardcvc.CardCvcComponentConfig\nimport com.pxp.checkout.components.cardexpirydate.CardExpiryDateComponentConfig\nimport com.pxp.checkout.models.CardTokenFilter\nimport com.pxp.checkout.models.CardTokenOrder\nimport com.pxp.checkout.styles.CardOnFileStyle\n\n// Optional: Configure CVC component for secure card selection\nval cvcConfig = CardCvcComponentConfig(\n    label = \"CVC\",\n    placeholder = \"123\",\n    showMaskToggle = false\n)\n\n// Optional: Configure expiry date component for card updates\nval expiryConfig = CardExpiryDateComponentConfig(\n    label = \"Expiry Date\",\n    placeholder = \"MM/YY\"\n)\n\n// Optional: Configure delete modal\nval deleteModalConfig = DeleteModalConfig(\n    deleteConfirmText = \"Are you sure you want to remove this payment method?\",\n    deleteConfirmButtonText = \"Remove Card\",\n    deleteCancelButtonText = \"Keep Card\"\n)\n\n// Optional: Configure filtering and sorting\nval tokenFilter = CardTokenFilter(\n    excludeExpired = true,\n    includeBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD)\n)\n\nval tokenOrder = CardTokenOrder(\n    sortByLastUsed = true,\n    sortByExpiryDate = false\n)\n\n// Optional: Create custom styling\nval customStyle = CardOnFileStyle(\n    cardBackground = Color.White,\n    cardBorder = Color.Gray,\n    cardRadius = 12.dp,\n    spacing = 16.dp\n)\n\nval config = CardOnFileComponentConfig(\n    // Component integrations\n    cvcComponentConfig = cvcConfig,\n    expiryDateComponentConfig = expiryConfig,\n    \n    // UI configuration\n    deleteModal = deleteModalConfig,\n    limitTokens = 5,\n    \n    // Data management\n    filter = tokenFilter,\n    order = tokenOrder,\n    \n    // Feature toggles\n    isExpiryDateEditable = true,\n    isCvcRequired = true,\n    allowDeleteToken = true,\n    \n    // Custom text labels\n    validThruText = \"Valid Until\",\n    expiredText = \"Card Expired\",\n    \n    // Styling\n    style = customStyle,\n    useTransparentCardBrandImage = true,\n    \n    // Event handlers\n    onTokenSelected = { token ->\n        println(\"Card selected: •••• ${token.lastFourDigits}\")\n    },\n    \n    onTokensLoaded = { tokens ->\n        println(\"Loaded ${tokens.size} saved cards\")\n    },\n    \n    onPreRenderTokens = { response ->\n        // Custom processing of tokens before display\n        response.data.map { token ->\n            CardTokenMapping(\n                token = token,\n                displayLabel = \"${token.scheme} •••• ${token.lastFourDigits}\"\n            )\n        }\n    },\n    \n    onRetrieveTokensFailed = { error ->\n        println(\"Failed to load saved cards: ${error.message}\")\n    },\n    \n    onPreDeleteToken = { tokenData ->\n        // Show custom confirmation dialog\n        val deferred = CompletableDeferred<Boolean>()\n        // Simulate user confirmation\n        deferred.complete(true)\n        deferred\n    },\n    \n    onDeleteTokenSuccess = { response ->\n        println(\"Card successfully deleted\")\n    },\n    \n    onDeleteTokenFailed = { error ->\n        println(\"Failed to delete card: ${error.message}\")\n    },\n    \n    onUpdateTokenSuccess = { response ->\n        println(\"Card updated successfully\")\n    },\n    \n    onUpdateTokenFailed = { error ->\n        println(\"Failed to update card: ${error.message}\")\n    },\n    \n    // Custom token label builder\n    tokenLabelBuilder = { token ->\n        \"${token.scheme.uppercase()} ending in ${token.lastFourDigits}\"\n    },\n    \n    // Accessibility labels\n    editCardInformationAriaLabel = \"Edit payment method\",\n    deleteCardButtonAriaLabel = \"Delete payment method\",\n    cardNumberAriaLabel = \"Card number\",\n    cardExpiryDateAriaLabel = \"Expiration date\"\n)\n\nval cardOnFileComponent = checkout.createComponent<CardOnFileComponent, CardOnFileComponentConfig>(\n    type = ComponentType.CARD_ON_FILE,\n    config = config\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payoutdisbursement-flow","__idx":5},"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":"kotlin","header":{"controls":{"copy":{}}},"source":"val transactionData = TransactionData(\n    amount = 250.00,\n    currency = \"USD\",\n    entryType = EntryType.Ecom,\n    intent = IntentType.Payout,  // Set to Payout for disbursements\n    merchantTransactionId = \"payout-${System.currentTimeMillis()}\",\n    merchantTransactionDate = Date()\n)\n\nval config = CardOnFileComponentConfig(\n    limitTokens = 5,\n    \n    // Filter and sort for payout flows\n    filter = CardTokenFilter(\n        excludeExpired = true\n    ),\n    \n    // Prioritize cards used for recent payouts\n    order = CardTokenOrder(\n        sortByField = LastUsageField.PAYOUT_DATE,  // Sort by payout activity\n        direction = SortDirection.DESC\n    ),\n    \n    isExpiryDateEditable = true,\n    isCvcRequired = true,\n    allowDeleteToken = false,\n    \n    onTokenSelected = { token ->\n        Log.d(\"Payout\", \"Card selected: ${token.lastFourDigits}\")\n        Log.d(\"Payout\", \"Last payout: ${token.lastSuccessfulPayoutDate}\")\n    },\n    \n    onTokensLoaded = { tokens ->\n        Log.d(\"Payout\", \"Loaded ${tokens.size} payout cards\")\n    },\n    \n    onRetrieveTokensFailed = { error ->\n        Log.e(\"Payout\", \"Failed to load cards: ${error.message}\")\n        showErrorMessage(\"Unable to load saved cards\")\n    }\n)\n\nval cardOnFileComponent = checkout.createComponent<CardOnFileComponent, CardOnFileComponentConfig>(\n    type = ComponentType.CARD_ON_FILE,\n    config = config\n)\n\n// Continue with card submit component for payout execution...\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sortByField = LastUsageField.PAYOUT_DATE"]}," to prioritise cards the recipient has successfully used for previous payouts. This builds trust and reduces friction by showing familiar payout destinations first."]}]}]},"headings":[{"value":"Card-on-file","id":"card-on-file","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Delete modal configuration","id":"delete-modal-configuration","depth":2},{"value":"Callbacks","id":"callbacks","depth":2},{"value":"Example","id":"example","depth":2},{"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/android/card/card-on-file","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}