{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Inline Checkout Saved Cards | xMoney Documentation","description":"Save cards during inline checkout and charge stored cards with the xMoney savedCardPayment SDK flow.","llmstxt":{"hide":false,"title":"xMoney Documentation","description":"Guides and API references for integrating xMoney card and crypto payments.","sections":[{"title":"Guides","description":"Integration guides for card payments, crypto, checkout, and dashboard.","includeFiles":["guides/**/*.md"],"excludeFiles":[]},{"title":"Card API","description":"REST API reference and concepts for xMoney card payments.","includeFiles":["api/**/*.md","api/**/*.yaml"],"excludeFiles":[]},{"title":"Crypto API","description":"REST API reference and concepts for xMoney crypto payments.","includeFiles":["crypto_api/**/*.md","crypto_api/**/*.yaml"],"excludeFiles":[]},{"title":"Card Issuing API","description":"Guides and API reference for xMoney whitelabel card issuing partners.","includeFiles":["card_issuing_api/**/*.md","card_issuing_api/**/*.yaml"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"saved-cards","__idx":0},"children":["Saved Cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Inline Checkout supports two saved-card flows:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Save a card during a card payment with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentForm()"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentCard()"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Charge a previously saved card with the headless ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["savedCardPayment()"]}," SDK method."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Saved cards are represented by a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardId"]},". Store that token against your own customer record after you receive it from xMoney, then use it for later payments."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"requirements","__idx":1},"children":["Requirements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To save and reuse cards, your order payload should include:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A stable ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customer.identifier"]}," that maps to the shopper in your system."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveCard: true"]}," when you want xMoney to create a reusable card token."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A backend process that stores the returned ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardId"]}," only after server-side confirmation."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Confirm tokens server-side"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Do not rely only on browser callbacks to store or activate a saved card. Use your webhook or another trusted server-side confirmation path before making the card available for future orders."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"save-a-card-during-checkout","__idx":2},"children":["Save a card during checkout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable saved cards in the card configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const paymentForm = await window.XMoney.paymentForm({\n  container: 'xmoney-payment-form',\n  publicKey,\n  orderPayload,\n  orderChecksum,\n  card: {\n    savedCards: {\n      enabled: true,\n      optInVisible: true,\n    },\n  },\n  onPaymentComplete(transaction) {\n    handlePaymentResult(transaction)\n  },\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["savedCards.enabled"]}," controls whether returning customers can see available saved cards in the form. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["savedCards.optInVisible"]}," controls whether the shopper can see the save-card choice when entering a new card."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If your business flow requires saving a card, set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveCard: true"]}," in the server-generated order payload and make sure the customer consent text is clear in your checkout UI."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"publicKey\": \"pk_test_your_key\",\n  \"customer\": {\n    \"identifier\": \"customer-123\",\n    \"email\": \"customer@example.com\"\n  },\n  \"order\": {\n    \"orderId\": \"order-123\",\n    \"type\": \"purchase\",\n    \"amount\": 4999,\n    \"currency\": \"EUR\",\n    \"description\": \"Online order\"\n  },\n  \"cardTransactionMode\": \"authAndCapture\",\n  \"saveCard\": true\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"read-the-saved-cardid","__idx":3},"children":["Read the saved ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardId"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When tokenization succeeds, the final transaction data can include a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardId"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"externalOrderId\": \"order-123\",\n  \"transactionId\": 987654,\n  \"transactionStatus\": \"complete-ok\",\n  \"cardId\": 12345,\n  \"customerId\": 67890\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Store the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardId"]}," with the matching shopper only after you validate the final transaction status on your backend."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pay-with-a-saved-card-from-the-form","__idx":4},"children":["Pay with a saved card from the form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card.savedCards.enabled"]}," is true and saved cards are available for the customer, the embedded form can render them. The shopper can select a saved card and submit from the same secure component."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"await window.XMoney.paymentCard({\n  container: 'payment-card',\n  publicKey,\n  orderPayload,\n  orderChecksum,\n  card: {\n    savedCards: {\n      enabled: true,\n      optInVisible: false,\n    },\n  },\n  onPaymentComplete(transaction) {\n    handlePaymentResult(transaction)\n  },\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this when you still want xMoney to own the saved-card selection UI."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"headless-saved-card-payment","__idx":5},"children":["Headless saved-card payment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XMoney.savedCardPayment()"]}," when your application renders its own saved-card list and you only need the SDK to trigger the secure payment. This method does not render a visible UI."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const savedCardPayment = await window.XMoney.savedCardPayment({\n  publicKey,\n  orderPayload,\n  orderChecksum,\n  onReady() {\n    enableSavedCardButtons()\n  },\n  onPaymentProcessing(isProcessing) {\n    setSavedCardLoading(isProcessing)\n  },\n  onPaymentComplete(transaction) {\n    handlePaymentResult(transaction)\n  },\n  onError(error) {\n    showPaymentError(error?.message || 'Saved card payment failed')\n  },\n})\n\ndocument.querySelectorAll('[data-card-id]').forEach((button) => {\n  button.addEventListener('click', () => {\n    savedCardPayment.pay({\n      cardId: Number(button.dataset.cardId),\n    })\n  })\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK creates a hidden iframe automatically when no ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["container"]}," is provided. Call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["destroy()"]}," when the saved-card checkout UI is no longer active."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"savedCardPayment.destroy()\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"updating-orders","__idx":6},"children":["Updating orders"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For visible widgets, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["updateOrder()"]}," when cart totals change."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"await paymentForm.updateOrder({\n  orderPayload: nextPayload,\n  orderChecksum: nextChecksum,\n})\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["savedCardPayment()"]},", create a new instance for each new order payload before calling ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pay({ cardId })"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"3ds-for-saved-cards","__idx":7},"children":["3DS for saved cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Saved-card payments can still require 3D Secure authentication. The SDK handles the 3DS modal and final callback in the same way as new-card payments. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/inline-checkout/3ds-results"},"children":["3DS and payment results"]}," for the complete flow."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-guides","__idx":8},"children":["Related guides"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/payments/save-card-on-payment"},"children":["Save card on payment"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/inline-checkout/web-integration"},"children":["Website integration"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/inline-checkout/custom-layouts"},"children":["Custom layouts"]}]}]}]},"headings":[{"value":"Saved Cards","id":"saved-cards","depth":1},{"value":"Requirements","id":"requirements","depth":2},{"value":"Save a card during checkout","id":"save-a-card-during-checkout","depth":2},{"value":"Read the saved cardId","id":"read-the-saved-cardid","depth":2},{"value":"Pay with a saved card from the form","id":"pay-with-a-saved-card-from-the-form","depth":2},{"value":"Headless saved-card payment","id":"headless-saved-card-payment","depth":2},{"value":"Updating orders","id":"updating-orders","depth":2},{"value":"3DS for saved cards","id":"3ds-for-saved-cards","depth":2},{"value":"Related guides","id":"related-guides","depth":2}],"frontmatter":{"seo":{"title":"Inline Checkout Saved Cards | xMoney Documentation","description":"Save cards during inline checkout and charge stored cards with the xMoney savedCardPayment SDK flow."}},"lastModified":"2026-06-19T09:28:44.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/inline-checkout/saved-cards","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}