{"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":"typescript","header":{"controls":{"copy":{}}},"source":"import PxpCheckout from '@pxp-io/web-components-sdk';\n\nconst pxpCheckout = PxpCheckout.initialize({\n session: {\n sessionId: 'your-session-id',\n hmacKey: 'your-hmac-key',\n encryptionKey: 'your-encryption-key'\n },\n environment: 'production',\n transactionData: {\n amount: 1000,\n currency: 'USD',\n entryType: 'Ecom',\n intent: {\n card: 'Authorisation'\n },\n merchantTransactionId: 'unique-transaction-id',\n merchantTransactionDate: () => new Date().toISOString()\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n ownerType: 'MerchantGroup',\n ownerId: 'your-owner-id'\n});\n\n// Create card-on-file component\nconst cardOnFileComponent = pxpCheckout.create('card-on-file', {});\n\n// Mount component\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"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":"typescript","header":{"controls":{"copy":{}}},"source":"// Create additional components for card-on-file\nconst cardCvc = pxpCheckout.create('card-cvc', {\n label: \"Security code\",\n required: true\n});\n\nconst cardExpiry = pxpCheckout.create('card-expiry-date', {\n label: \"Expiry date\"\n});\n\n// Create card-on-file with advanced configuration\nconst cardOnFileComponent = pxpCheckout.create('card-on-file', {\n // Filtering options\n limitTokens: 5,\n filterBy: {\n excludeExpiredTokens: true,\n schemes: [\"Visa\", \"Mastercard\"],\n fundingSource: \"Credit\",\n issuerCountryCode: \"USA\",\n ownerType: \"Consumer\"\n },\n \n // Sorting options\n orderBy: {\n expiryDate: { \n direction: \"asc\",\n priority: 1\n },\n scheme: { \n valuesOrder: [\"Visa\", \"Mastercard\", \"Amex\"],\n priority: 2\n },\n fundingSource: { \n valuesOrder: [\"Credit\", \"Debit\"],\n priority: 3\n },\n lastUsageDate: { \n direction: \"desc\",\n orderByField: \"lastSuccessfulPurchaseDate\",\n priority: 4\n }\n },\n \n // UI configuration\n isExpiryDateEditable: true,\n isCvcRequired: true,\n allowDeleteToken: true,\n \n // Nested components\n cvcComponentConfig: {\n required: true,\n label: \"Security code\",\n applyMask: true,\n showMaskToggle: true\n },\n expiryDateComponentConfig: {\n label: \"Expiry date\",\n formatOptions: \"MM/YY\"\n }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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: { card: IntentType.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":["number"]}]},{"$$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":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details about the filtering options. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to exclude tokens associated with expired cards. 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":["string[]"]}]},{"$$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\"]"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details about the ordering options. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by expiry date. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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.",{"$$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"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["asc"]}]}]}," Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by card scheme. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card scheme. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by funding source. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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.",{"$$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":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by owner type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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.",{"$$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":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by issuer country code. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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.",{"$$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"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["asc"]}]}]}," Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details for ordering by last usage date. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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.",{"$$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"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["asc"]}]}]}," Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["IntentType.Payout"]}," 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":["null"]},"."]}]},{"$$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":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The priority of the ordering option. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["Transaction initiator type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the expiry date field can be edited by the cardholder. 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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether CVC is required when selecting a token. 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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to allow cardholders to delete a token (previously 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":["Configuration for the standalone card CVC component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-cvc"},"children":["Card CVC"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["Configuration for the standalone card expiry date component. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-expiry-date"},"children":["Card expiry date"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$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 these default styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const defaultCardOnFileStyles = {\n container: {\n display: 'flex',\n flexDirection: 'column',\n gap: '12px',\n width: '100%'\n },\n \n tokenItem: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '16px',\n backgroundColor: '#ffffff',\n border: '1px solid #dee2e6',\n borderRadius: '8px',\n cursor: 'pointer'\n },\n \n cardBrandImage: {\n width: '40px',\n height: 'auto'\n },\n \n cardDetails: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4px'\n },\n \n expiredText: {\n color: '#dc3545',\n fontSize: '12px',\n fontWeight: '500'\n },\n \n validThruText: {\n color: '#6c757d',\n fontSize: '12px'\n }\n};\n","lang":"typescript"},"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":["id"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Unique identifier for the component element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS class name applied to the component. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenItemClass"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom class for the token item. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$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":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n // Custom text labels\n expiredText: \"Card expired\",\n validThruText: \"Valid until\",\n deleteErrorMessage: \"Unable to delete card. Please try again.\",\n deleteSuccessMessage: \"Card has been removed successfully.\",\n updateErrorMessage: \"Unable to update card information. Please try again.\",\n updateSuccessMessage: \"Card information updated successfully.\",\n \n // Custom styling\n styles: {\n backgroundColor: '#f8f9fa',\n border: '1px solid #dee2e6',\n borderRadius: '8px',\n padding: '20px'\n },\n \n inputStyles: {\n borderRadius: '5px',\n backgroundColor: '#ffffff'\n },\n \n tokenItemClass: \"custom-token-item-class\",\n \n // Custom icons\n iconDeleteSrc: \"https://example.com/icons/delete.svg\",\n iconSaveSrc: \"https://example.com/icons/save.svg\",\n iconCancelSrc: \"https://example.com/icons/cancel.svg\",\n iconEditSrc: \"https://example.com/icons/edit.svg\",\n \n // Custom card brand images\n cardBrandImages: {\n visaSrc: \"https://example.com/brands/visa-logo.png\",\n mastercardSrc: \"https://example.com/brands/mastercard-logo.png\",\n amexSrc: \"https://example.com/brands/amex-logo.png\",\n cupSrc: \"https://example.com/brands/cup-logo.png\",\n dinersSrc: \"https://example.com/brands/diners-logo.png\",\n discoverSrc: \"https://example.com/brands/discover-logo.png\",\n jcbSrc: \"https://example.com/brands/jcb-logo.png\"\n },\n \n useTransparentCardBrandImage: true,\n \n // Accessibility labels\n editCardInformationAriaLabel: \"Edit card information button\",\n saveCardInformationAriaLabel: \"Save card information button\",\n cancelEditCardInformationAriaLabel: \"Cancel edit card information button\",\n deleteCardButtonAriaLabel: \"Delete card button\",\n cardNumberAriaLabel: \"Card number\",\n cardExpiryDateAriaLabel: \"Card expiry date\",\n \n // Delete modal configuration\n deleteModal: {\n dialogAriaLabel: \"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 class: \"custom-modal-class\"\n },\n \n // Message styling\n successMessageClass: \"alert alert-success\",\n errorMessageClass: \"alert alert-danger\"\n});\n","lang":"typescript"},"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":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styling for the component container. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom input styles. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenItemClass"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom class for the token item. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Details about the card brand images. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.visaSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the Visa card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.mastercardSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the Mastercard card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.amexSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the Amex card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.cupSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the CUP card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.dinersSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the Diners card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.discoverSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the Discover card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.jcbSrc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the JCB card brand image. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for your custom delete icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for your custom save icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for your custom cancel icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for your custom edit icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"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":["The text to display for expired cards. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Expired\""]},"."]}]},{"$$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":["The text to display for the \"valid thru\" label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Valid thru\""]},"."]}]},{"$$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":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal.dialogAriaLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The aria label for the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal.bodyText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The body text for the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal.cancelButtonText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cancel button text for the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal.deleteButtonText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The delete button text for the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deleteModal.class"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The name of the class associated with the deletion modal. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["The error message to display when a card deletion fails. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["The success message to display when a card deletion is successful. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["The error message to display when a card update fails. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$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":["The success message to display when a card update is successful. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["successMessageClass"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The name of the CSS class to apply to success messages. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorMessageClass"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The name of the CSS class to apply to error messages. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the edit card information button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the save card information button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the cancel edit information button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the delete card button. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the card number. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":["The aria label for the card expiry date. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]},"."]}]}]}]}]},{"$$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":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => {\n // Filter tokens before rendering\n return data.gatewayTokens\n .filter(token => token.issuerCountryCode === 'USA')\n .map(token => ({\n id: token.gatewayTokenId,\n isCvcRequired: true\n }));\n },\n \n onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => {\n console.error('Failed to retrieve tokens:', data.errorMessage);\n showErrorMessage('Unable to load saved cards');\n },\n \n onSelectToken: (token: BaseCardToken) => {\n console.log('Token selected:', token);\n console.log('Selected card:', token.maskedPrimaryAccountNumber);\n },\n \n onPreDeleteToken: (token: BaseCardToken) => {\n return new Promise((resolve) => {\n const confirmed = confirm(\n `Are you sure you want to delete card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`\n );\n resolve(confirmed);\n });\n },\n \n onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => {\n console.log('Token deleted successfully:', data);\n showSuccessMessage('Card removed successfully');\n refreshTokenList();\n },\n \n onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => {\n console.error('Delete failed:', data);\n showErrorMessage('Failed to delete card. Please try again.');\n },\n \n onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => {\n console.log('Token updated successfully:', data);\n showSuccessMessage('Card information updated');\n },\n \n onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => {\n console.error('Update failed:', data);\n showErrorMessage('Failed to update card information');\n },\n \n tokenItemBuilder: (elementIds: TokenBuilderElementIds) => {\n return `\n
\n
\n
\n
\n
\n
\n `;\n },\n \n tokenLabelBuilder: (token: BaseCardToken) => {\n return `${token.maskedPrimaryAccountNumber} - ${token.issuerName}`;\n }\n});\n","lang":"typescript"},"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: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for pre-processing tokens before rendering. Allows custom filtering and mapping of token data."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when token retrieval from the API fails."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSelectToken: (token: BaseCardToken) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler triggered when a token is selected by the user."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPreDeleteToken: (token: BaseCardToken) => Promise"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for before token deletion. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to proceed, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," to cancel."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for after a token is successfully deleted."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when token deletion fails."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for after a token is successfully updated."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Event handler for when a token update fails."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenItemBuilder: (elementIds: TokenBuilderElementIds) => string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom HTML builder for token item layout. Returns an HTML string with specific element IDs."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tokenLabelBuilder: (token: BaseCardToken) => string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom label builder for token display text."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about event data structures and usage patterns, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card-on-file component provides methods for lifecycle management:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":9},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount(containerId)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mounts the component to the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"cardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":10},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the component from the DOM and cleans up resources:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"cardOnFileComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":11},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-saved-cards-display","__idx":12},"children":["Basic saved cards display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A straightforward implementation showing saved payment methods:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n limitTokens: 5,\n filterBy: {\n excludeExpiredTokens: true\n },\n \n onSelectToken: (token) => {\n console.log('Card selected:', token.maskedPrimaryAccountNumber);\n },\n \n onRetrieveTokensFailed: (error) => {\n console.error('Failed to load cards:', error);\n showErrorMessage('Unable to load saved cards');\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"filtered-and-sorted-cards","__idx":13},"children":["Filtered and sorted cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only specific card types in a custom order:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n // Show only Visa and Mastercard credit cards\n filterBy: {\n excludeExpiredTokens: true,\n schemes: [\"Visa\", \"Mastercard\"],\n fundingSource: \"Credit\",\n issuerCountryCode: \"USA\"\n },\n \n // Sort by most recently used\n orderBy: {\n lastUsageDate: { \n direction: \"desc\",\n orderByField: \"lastSuccessfulPurchaseDate\",\n priority: 1\n },\n scheme: { \n valuesOrder: [\"Visa\", \"Mastercard\"],\n priority: 2\n }\n },\n \n limitTokens: 3,\n \n onPreRenderTokens: (data) => {\n // Additional custom filtering if needed\n return data.gatewayTokens\n .filter(token => token.fundingSource === 'Credit')\n .map(token => ({\n id: token.gatewayTokenId,\n isCvcRequired: true\n }));\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"editable-cards-with-cvc-requirement","__idx":14},"children":["Editable cards with CVC requirement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Allow users to edit and delete their saved cards:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n isExpiryDateEditable: true,\n isCvcRequired: true,\n allowDeleteToken: true,\n \n cvcComponentConfig: {\n required: true,\n label: \"Security code\",\n applyMask: true,\n showMaskToggle: true,\n labelPosition: \"left\",\n errorMessage: \"Please enter a valid security code\",\n inputStyles: {\n base: {\n color: \"#333\",\n fontSize: \"16px\"\n }\n }\n },\n \n expiryDateComponentConfig: {\n label: \"Expiry date\",\n labelPosition: \"left\",\n formatOptions: \"MM/YY\",\n inputStyles: {\n base: {\n color: \"#333\",\n fontSize: \"16px\"\n }\n }\n },\n \n onSelectToken: (token) => {\n console.log('Card selected:', token);\n // Validate CVC when card is selected\n },\n \n onPreDeleteToken: (token) => {\n return new Promise((resolve) => {\n const confirmed = confirm(\n `Delete card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`\n );\n resolve(confirmed);\n });\n },\n \n onDeleteTokenSuccess: (data) => {\n showSuccessMessage('Card deleted successfully');\n },\n \n onDeleteTokenFailed: (error) => {\n showErrorMessage('Failed to delete card');\n },\n \n onUpdateTokenSuccess: (data) => {\n showSuccessMessage('Card updated successfully');\n },\n \n onUpdateTokenFailed: (error) => {\n showErrorMessage('Failed to update card');\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styled-cards-with-branding","__idx":15},"children":["Custom styled cards with branding"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fully customised appearance with branded images and styles:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n limitTokens: 5,\n filterBy: {\n excludeExpiredTokens: true\n },\n \n // Custom card brand images\n cardBrandImages: {\n visaSrc: \"https://example.com/images/visa-logo.png\",\n mastercardSrc: \"https://example.com/images/mastercard-logo.png\",\n amexSrc: \"https://example.com/images/amex-logo.png\"\n },\n \n // Custom text labels\n expiredText: \"Card expired\",\n validThruText: \"Valid until\",\n deleteSuccessMessage: \"Payment method removed\",\n updateSuccessMessage: \"Card details updated\",\n \n // Custom styling\n styles: {\n backgroundColor: '#f8f9fa',\n border: '1px solid #dee2e6',\n borderRadius: '8px',\n padding: '20px'\n },\n \n inputStyles: {\n borderRadius: '5px',\n backgroundColor: '#ffffff'\n },\n \n tokenItemClass: \"custom-payment-card\",\n \n // Custom icons\n iconDeleteSrc: \"https://example.com/icons/delete.svg\",\n iconEditSrc: \"https://example.com/icons/edit.svg\",\n iconSaveSrc: \"https://example.com/icons/save.svg\",\n iconCancelSrc: \"https://example.com/icons/cancel.svg\",\n \n useTransparentCardBrandImage: true,\n \n // Custom delete modal\n deleteModal: {\n dialogAriaLabel: \"Delete payment method\",\n bodyText: \"Are you sure you want to remove this payment method?\",\n cancelButtonText: \"No, keep it\",\n deleteButtonText: 'Yes, remove it',\n class: \"custom-delete-modal\"\n },\n \n successMessageClass: \"alert alert-success\",\n errorMessageClass: \"alert alert-danger\",\n \n // Accessibility\n editCardInformationAriaLabel: \"Edit payment method\",\n saveCardInformationAriaLabel: \"Save changes\",\n cancelEditCardInformationAriaLabel: \"Cancel editing\",\n deleteCardButtonAriaLabel: \"Remove payment method\",\n \n onSelectToken: (token) => {\n console.log('Selected:', token.maskedPrimaryAccountNumber);\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-token-layout","__idx":16},"children":["Custom token layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use custom HTML builders to create a unique token display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n tokenItemBuilder: (elementIds) => {\n return `\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n `;\n },\n \n tokenLabelBuilder: (token) => {\n const lastFour = token.maskedPrimaryAccountNumber.slice(-4);\n const expiryDate = token.expiryDate;\n return `\n
\n ${token.scheme} •••• ${lastFour}\n
\n Expires ${expiryDate}\n
\n `;\n },\n \n onSelectToken: (token) => {\n console.log('Selected token:', token);\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"enterprise-implementation-with-all-features","__idx":17},"children":["Enterprise implementation with all features"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive implementation with filtering, sorting, editing, and complete event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardOnFileComponent = pxpCheckout.create('card-on-file', {\n // Filtering and limiting\n limitTokens: 10,\n filterBy: {\n excludeExpiredTokens: true,\n schemes: [\"Visa\", \"Mastercard\", \"Amex\"],\n fundingSource: \"Credit\"\n },\n \n // Multi-level sorting\n orderBy: {\n lastUsageDate: { \n direction: \"desc\",\n orderByField: \"lastSuccessfulPurchaseDate\",\n priority: 1\n },\n expiryDate: { \n direction: \"asc\",\n priority: 2\n },\n scheme: { \n valuesOrder: [\"Visa\", \"Mastercard\", \"Amex\"],\n priority: 3\n }\n },\n \n // Feature flags\n isExpiryDateEditable: true,\n isCvcRequired: true,\n allowDeleteToken: true,\n \n // Nested component configuration\n cvcComponentConfig: {\n required: true,\n label: \"CVV/CVC\",\n applyMask: true,\n showMaskToggle: true,\n labelPosition: \"left\",\n inputStyles: {\n base: { fontSize: \"16px\", color: \"#333\" }\n }\n },\n \n expiryDateComponentConfig: {\n label: \"Expiry\",\n formatOptions: \"MM/YY\",\n labelPosition: \"left\",\n inputStyles: {\n base: { fontSize: \"16px\", color: \"#333\" }\n }\n },\n \n // Comprehensive event handling\n onPreRenderTokens: (data) => {\n console.log('Retrieved tokens:', data.gatewayTokens.length);\n \n // Apply business logic filtering\n return data.gatewayTokens\n .filter(token => {\n // Only show cards from specific issuers\n return ['USA', 'CAN', 'GBR'].includes(token.issuerCountryCode);\n })\n .map(token => ({\n id: token.gatewayTokenId,\n isCvcRequired: token.scheme !== 'Amex' // Amex doesn't require CVC\n }));\n },\n \n onRetrieveTokensFailed: (error) => {\n console.error('Token retrieval failed:', error);\n logErrorToService(error);\n showUserMessage('Unable to load payment methods', 'error');\n },\n \n onSelectToken: (token) => {\n console.log('Token selected:', token);\n trackAnalyticsEvent('payment_method_selected', {\n scheme: token.scheme,\n fundingSource: token.fundingSource\n });\n },\n \n onPreDeleteToken: async (token) => {\n const lastFour = token.maskedPrimaryAccountNumber.slice(-4);\n const confirmed = await showCustomConfirmDialog({\n title: 'Remove Payment Method',\n message: `Remove card ending in ${lastFour}?`,\n confirmText: 'Remove',\n cancelText: 'Keep'\n });\n return confirmed;\n },\n \n onDeleteTokenSuccess: (data) => {\n console.log('Token deleted:', data);\n showUserMessage('Payment method removed', 'success');\n trackAnalyticsEvent('payment_method_deleted');\n refreshPaymentMethods();\n },\n \n onDeleteTokenFailed: (error) => {\n console.error('Delete failed:', error);\n showUserMessage('Unable to remove payment method', 'error');\n logErrorToService(error);\n },\n \n onUpdateTokenSuccess: (data) => {\n console.log('Token updated:', data);\n showUserMessage('Payment method updated', 'success');\n trackAnalyticsEvent('payment_method_updated');\n },\n \n onUpdateTokenFailed: (error) => {\n console.error('Update failed:', error);\n showUserMessage('Unable to update payment method', 'error');\n logErrorToService(error);\n },\n \n // Custom styling\n styles: {\n backgroundColor: '#ffffff',\n border: '1px solid #e5e7eb',\n borderRadius: '12px',\n padding: '24px',\n boxShadow: '0 1px 3px rgba(0,0,0,0.1)'\n },\n \n cardBrandImages: {\n visaSrc: \"https://cdn.example.com/brands/visa.svg\",\n mastercardSrc: \"https://cdn.example.com/brands/mastercard.svg\",\n amexSrc: \"https://cdn.example.com/brands/amex.svg\"\n },\n \n deleteModal: {\n dialogAriaLabel: \"Remove payment method confirmation\",\n bodyText: \"This payment method will be permanently removed.\",\n cancelButtonText: \"Cancel\",\n deleteButtonText: 'Remove',\n class: \"enterprise-delete-modal\"\n },\n \n successMessageClass: \"toast toast-success\",\n errorMessageClass: \"toast toast-error\"\n});\n\ncardOnFileComponent.mount('payment-methods-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payoutdisbursement-flow","__idx":18},"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":"typescript","header":{"controls":{"copy":{}}},"source":"const pxpCheckout = PxpCheckout.initialize({\n session: {\n sessionId: 'your-session-id',\n hmacKey: 'your-hmac-key',\n encryptionKey: 'your-encryption-key'\n },\n environment: 'production',\n transactionData: {\n amount: 250.00,\n currency: 'USD',\n entryType: 'Ecom',\n intent: {\n card: IntentType.Payout // Set to Payout for disbursements\n },\n merchantTransactionId: 'payout-' + Date.now(),\n merchantTransactionDate: () => new Date().toISOString()\n },\n kountDisabled: false, // OPTIONAL: Set to true to disable Kount fraud detection\n ownerType: 'MerchantGroup',\n ownerId: 'your-owner-id'\n});\n\nconst cardOnFileComponent = pxpCheckout.create('card-on-file', {\n limitTokens: 5,\n \n // Filter and sort for payout flows\n filterBy: {\n excludeExpiredTokens: true\n },\n \n // Prioritize cards used for recent payouts\n orderBy: {\n lastUsageDate: { \n direction: \"desc\",\n orderByField: \"lastSuccessfulPayoutDate\", // Sort by payout activity\n priority: 1\n }\n },\n \n isExpiryDateEditable: true,\n isCvcRequired: true,\n \n onSelectToken: (token) => {\n console.log('Payout card selected:', token.maskedPrimaryAccountNumber);\n console.log('Last payout:', token.lastSuccessfulPayoutDate);\n },\n \n onRetrieveTokensFailed: (error) => {\n console.error('Failed to load payout cards:', error);\n showErrorMessage('Unable to load saved cards. Please try again.');\n }\n});\n\ncardOnFileComponent.mount('card-on-file-container');\n\n// Continue with card submit component for payout execution...\n","lang":"typescript"},"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 more information about integration and events, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/events"},"children":["Events"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/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":"mount(containerId)","id":"mountcontainerid","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic saved cards display","id":"basic-saved-cards-display","depth":3},{"value":"Filtered and sorted cards","id":"filtered-and-sorted-cards","depth":3},{"value":"Editable cards with CVC requirement","id":"editable-cards-with-cvc-requirement","depth":3},{"value":"Custom styled cards with branding","id":"custom-styled-cards-with-branding","depth":3},{"value":"Custom token layout","id":"custom-token-layout","depth":3},{"value":"Enterprise implementation with all features","id":"enterprise-implementation-with-all-features","depth":3},{"value":"Payout/disbursement flow","id":"payoutdisbursement-flow","depth":3}],"frontmatter":{"seo":{"title":"Card-on-file"}},"lastModified":"2026-05-19T09:47:25.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/card-on-file","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}