ACCS-205: Card Vaulting for the Payment Drop-in SDK

_dropin-enrichments/payment-services/containers.json

@@ -3,6 +3,10 @@
     "description": "Displays apple pay for the Payment Services drop-in."
   },
   "CreditCard": {
-    "description": "... See '`CardType`' from @`adobe-commerce/payment-services-sdk/payment`."
+    "description": "Renders the credit or debit card form and an optional “save this card” for signed-in shoppers. See `CardType` in `@adobe-commerce/payment-services-sdk/payment`."
+  },
+  "StoredCards": {
+    "description": "Lists vaulted (saved) cards and an optional “pay with a new card” row for checkout.",
+    "override_template": true
   }
-}
+}

_dropin-enrichments/payment-services/initialization.json

@@ -5,10 +5,10 @@
       "description": "URL for the payment or Commerce API endpoint. Required for payment processing and backend communication."
     },
     "getCustomerToken": {
-      "description": "Function that returns the current customer auth token, or null if not authenticated. Used for authenticated API requests."
+      "description": "Function that returns the current customer auth token, or `null` if the shopper is not authenticated. It’s used for authenticated GraphQL calls (such as vault token queries and vault payment orders) and to control whether the **Save this card** option appears on the CreditCard form."
     },
     "storeViewCode": {
       "description": "Store view code for the Commerce backend. Determines locale, currency, and catalog scope for API requests."
     }
   }
-}
+}

astro.config.mjs

@@ -253,49 +253,6 @@ async function config() {
     ],
 
     vite: {
-      plugins: [
-        {
-          // Patch the Vite logger after config is resolved so the filter applies
-          // to all logging paths, including environment-level loggers in Vite 6+.
-          name: 'suppress-known-build-warnings',
-          configResolved(resolvedConfig) {
-            const isKnownSafe = (msg) =>
-              typeof msg === 'string' && (
-                // Public SVG assets used in CSS url() — resolved correctly by the browser
-                // at runtime even though Vite can't resolve them at build time.
-                (msg.includes("didn't resolve at build time") && (
-                  msg.includes('hero-bg-light.svg') ||
-                  msg.includes('hero-bg-dark.svg')
-                )) ||
-                // Empty chunk from starlight-heading-badges — deduplication artifact.
-                (msg.includes('empty chunk') && msg.includes('HeadingBadgesTableOfContents')) ||
-                // Unused import noise from expressive-code packages.
-                (msg.includes('@expressive-code/plugin-text-markers') && msg.includes('never used'))
-              );
-
-            const patchLogger = (logger) => {
-              if (!logger) return;
-              for (const method of ['warn', 'warnOnce']) {
-                const original = logger[method]?.bind(logger);
-                if (original) {
-                  logger[method] = (msg, opts) => { if (!isKnownSafe(msg)) original(msg, opts); };
-                }
-              }
-            };
-
-            // Patch the root logger.
-            patchLogger(resolvedConfig.logger);
-            // Patch each environment logger (Vite 6+). Environment-level loggers are
-            // separate instances; the CSS url() resolution warning is emitted via
-            // environment.logger, so the root logger patch alone may not catch it.
-            if (resolvedConfig.environments) {
-              for (const env of Object.values(resolvedConfig.environments)) {
-                patchLogger(env.logger);
-              }
-            }
-          },
-        },
-      ],
       build: {
         chunkSizeWarningLimit: 1000, // Increase limit to 1MB to reduce noise
         rollupOptions: {
@@ -307,17 +264,21 @@ async function config() {
                 warning.source.includes('expressive-code'))) {
               return;
             }
-            // Suppress empty chunk warning from starlight-heading-badges plugin — the
-            // starlight-toc custom element it re-registers is deduplicated by Rollup.
-            if (warning.code === 'EMPTY_BUNDLE' &&
-              warning.names?.some((n) => n.includes('HeadingBadgesTableOfContents'))) {
-              return;
-            }
             warn(warning);
           }
         }
       },
       logLevel: 'warn',
+      customLogger: {
+        warn(msg, options) {
+          // Suppress specific expressive-code warnings
+          if (msg.includes('@expressive-code/plugin-text-markers') &&
+            msg.includes('never used')) {
+            return;
+          }
+          console.warn(msg, options);
+        }
+      }
     }
   });
 }

astro.sidebar.mjs

@@ -145,6 +145,13 @@ export function generateSidebar() {
                 { label: 'Validate address', link: '/dropins/user-account/tutorials/validate-address/' },
               ],
             },
+            {
+              label: 'Payment Services',
+              collapsed: true,
+              items: [
+                { label: 'Vaulted cards at checkout', link: '/dropins/payment-services/tutorials/vaulted-cards-checkout/' },
+              ],
+            },
           ],
         },
         // ---------- DROP-INS Overview ----------
@@ -296,7 +303,8 @@ export function generateSidebar() {
                   items: [
                     { label: 'Overview', link: '/dropins/payment-services/containers/' },
                     { label: 'ApplePay', link: '/dropins/payment-services/containers/apple-pay/' },
-                    { label: 'CreditCard', link: '/dropins/payment-services/containers/credit-card/' }
+                    { label: 'CreditCard', link: '/dropins/payment-services/containers/credit-card/' },
+                    { label: 'StoredCards', link: '/dropins/payment-services/containers/stored-cards/' }
                   ],
                 },
               ],

package.json

@@ -118,7 +118,7 @@
     "hast-util-from-html": "^2.0.3",
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
-    "lodash": "^4.18.1",
+    "lodash": "^4.17.23",
     "lodash.escaperegexp": "^4.1.2",
     "mermaid": "^11.12.2",
     "node-html-parser": "^7.0.1",

src/components/List.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <div class="listContainer list">
@@ -35,11 +36,7 @@
     border-color: var(--sl-color-black);
     text-align: center;
     vertical-align: sub;
-    /* Inline data URI of src/components/images/adobe.svg — keeps the icon
-       self-contained so it renders in both dev and production builds without
-       any path or base-path dependency. If the source SVG changes, re-encode
-       it and update the identical copy in Vocabulary.astro as well. */
-    content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjEgMjAiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAuNDA0My4wMDc2MDk2NmMyLjE1MDQgMCA0LjMwMDgtLjAyMTMwMDg2IDYuNDUwNC4wMDczNzMzNCAxLjQ5NTIuMDE5NjYyNCAyLjU4Ljc1ODYzOCAzLjIzMiAyLjE0MDczNy4yMTYuNDU3MTUuMzA2NC45NDk1My4zMDY0IDEuNDU5MTEtLjAwMDggNC4yNTE5OC4wMDI0IDguNTAzOTctLjAwMTYgMTIuNzU1OTctLjAwMjQgMi4wMDE0LTEuNTQyNCAzLjYxMDUtMy41MDI0IDMuNjE3OC00LjMyNjQuMDE1Ni04LjY1MjgzLjAxNDgtMTIuOTc5MjMgMC0xLjk2NTYxLS4wMDY1LTMuNTA4MDExLTEuNjE0Ny0zLjUxMTIxMS0zLjYzMjYtLjAwNjQtNC4yMzg5LS4wMDcyLTguNDc3NzIgMC0xMi43MTU3OC4wMDQtMi4wMzE3NyAxLjU3NDQwMS0zLjYyODUxNCAzLjU1NTIxMS0zLjYzMTc5MTA4IDIuMTUwNC0uMDAzMjc3MDUgNC4zLS4wMDA4MTkyNiA2LjQ1MDQzLS4wMDA4MTkyNnoiIGZpbGw9IiNlYjEwMDAiLz48cGF0aCBkPSJtNy44NjQ3IDE1LjM5OGMtMS4xMjY2OSAwLTIuMjUzMzggMC0zLjM4MDA3IDAtLjQyNjc2IDAtLjU0OTgyLS4xOTM5LS4zODMxMy0uNjAwNiAxLjQ1MjIyLTMuNTQzNyAyLjkwNDQ0LTcuMDg2NDQgNC4zNTY2Ni0xMC42MjkyMy4xNzM2Ny0uNDIzNjMuMzI5ODktLjUyOTA5Ljc4MzctLjUyOTA5Ljc2OTc0IDAgMS41NDAzNC4wMDUzNiAyLjMxMDE0LS4wMDI2OC4zNjY1LS4wMDM1OC41OTYuMTU2NC43MzkyLjUwNDk2IDEuNDYxOCAzLjU1NTMgMi45Mjk3IDcuMTA3MDQgNC4zOTU5IDEwLjY2MDU0LjE2NjcuNDA0LjA0MTkuNTk2MS0uMzg4NC41OTctLjc4NDUuMDAwOS0xLjU2OTEtLjAwNzEtMi4zNTI4LjAwMzYtLjM0NDguMDA0NS0uNTU1MS0uMTQyMS0uNjkwNC0uNDY2NS0uODk4OS0yLjE2ODMtMS44MDU2LTQuMzMyLTIuNzE0MS02LjQ5NTc1LS4wMzMyLS4wNzg2NS0uMTA0OC0uMTQxMjEtLjE1OC0uMjEwOTItLjA1NTkuMDY2MTQtLjEzMzUuMTI0MjMtLjE2NS4yMDEwOS0uNTUyMzkgMS4zMzYxNC0xLjA5ODcyIDIuNjc0OTgtMS42NDU5MiA0LjAxMzc4LS4xMTUyLjI4MDYtLjA3OTQyLjMzNy4yMTQ2OS4zMzc4LjU2Mzc5LjAwMDkgMS4xMjY2OS4wMDYzIDEuNjg5NjMtLjAwMjYuMjA1OS0uMDAyNy4zMzI1LjA3NDEuNDE1NC4yNjgxLjI1MDUuNTg4MS41MTQgMS4xNzA4Ljc2NzEgMS43NTcxLjE1NDUuMzU3NS4wMDc5LjU5MzQtLjM3MDkuNTk0My0xLjE0MDYuMDAyNy0yLjI4MjE3LjAwMDktMy40MjI4My4wMDA5eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
+    content: url(/src/components/images/adobe.svg);
     margin-top: 0;
     margin-bottom: 0;
     margin-right: 1rem;

src/components/Vocabulary.astro

@@ -56,11 +56,7 @@ const { columns = 1 } = Astro.props;
     border-color: var(--sl-color-black);
     text-align: center;
     vertical-align: sub;
-    /* Inline data URI of src/components/images/adobe.svg — keeps the icon
-       self-contained so it renders in both dev and production builds without
-       any path or base-path dependency. If the source SVG changes, re-encode
-       it and update the identical copy in List.astro as well. */
-    content: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjEgMjAiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAuNDA0My4wMDc2MDk2NmMyLjE1MDQgMCA0LjMwMDgtLjAyMTMwMDg2IDYuNDUwNC4wMDczNzMzNCAxLjQ5NTIuMDE5NjYyNCAyLjU4Ljc1ODYzOCAzLjIzMiAyLjE0MDczNy4yMTYuNDU3MTUuMzA2NC45NDk1My4zMDY0IDEuNDU5MTEtLjAwMDggNC4yNTE5OC4wMDI0IDguNTAzOTctLjAwMTYgMTIuNzU1OTctLjAwMjQgMi4wMDE0LTEuNTQyNCAzLjYxMDUtMy41MDI0IDMuNjE3OC00LjMyNjQuMDE1Ni04LjY1MjgzLjAxNDgtMTIuOTc5MjMgMC0xLjk2NTYxLS4wMDY1LTMuNTA4MDExLTEuNjE0Ny0zLjUxMTIxMS0zLjYzMjYtLjAwNjQtNC4yMzg5LS4wMDcyLTguNDc3NzIgMC0xMi43MTU3OC4wMDQtMi4wMzE3NyAxLjU3NDQwMS0zLjYyODUxNCAzLjU1NTIxMS0zLjYzMTc5MTA4IDIuMTUwNC0uMDAzMjc3MDUgNC4zLS4wMDA4MTkyNiA2LjQ1MDQzLS4wMDA4MTkyNnoiIGZpbGw9IiNlYjEwMDAiLz48cGF0aCBkPSJtNy44NjQ3IDE1LjM5OGMtMS4xMjY2OSAwLTIuMjUzMzggMC0zLjM4MDA3IDAtLjQyNjc2IDAtLjU0OTgyLS4xOTM5LS4zODMxMy0uNjAwNiAxLjQ1MjIyLTMuNTQzNyAyLjkwNDQ0LTcuMDg2NDQgNC4zNTY2Ni0xMC42MjkyMy4xNzM2Ny0uNDIzNjMuMzI5ODktLjUyOTA5Ljc4MzctLjUyOTA5Ljc2OTc0IDAgMS41NDAzNC4wMDUzNiAyLjMxMDE0LS4wMDI2OC4zNjY1LS4wMDM1OC41OTYuMTU2NC43MzkyLjUwNDk2IDEuNDYxOCAzLjU1NTMgMi45Mjk3IDcuMTA3MDQgNC4zOTU5IDEwLjY2MDU0LjE2NjcuNDA0LjA0MTkuNTk2MS0uMzg4NC41OTctLjc4NDUuMDAwOS0xLjU2OTEtLjAwNzEtMi4zNTI4LjAwMzYtLjM0NDguMDA0NS0uNTU1MS0uMTQyMS0uNjkwNC0uNDY2NS0uODk4OS0yLjE2ODMtMS44MDU2LTQuMzMyLTIuNzE0MS02LjQ5NTc1LS4wMzMyLS4wNzg2NS0uMTA0OC0uMTQxMjEtLjE1OC0uMjEwOTItLjA1NTkuMDY2MTQtLjEzMzUuMTI0MjMtLjE2NS4yMDEwOS0uNTUyMzkgMS4zMzYxNC0xLjA5ODcyIDIuNjc0OTgtMS42NDU5MiA0LjAxMzc4LS4xMTUyLjI4MDYtLjA3OTQyLjMzNy4yMTQ2OS4zMzc4LjU2Mzc5LjAwMDkgMS4xMjY2OS4wMDYzIDEuNjg5NjMtLjAwMjYuMjA1OS0uMDAyNy4zMzI1LjA3NDEuNDE1NC4yNjgxLjI1MDUuNTg4MS41MTQgMS4xNzA4Ljc2NzEgMS43NTcxLjE1NDUuMzU3NS4wMDc5LjU5MzQtLjM3MDkuNTk0My0xLjE0MDYuMDAyNy0yLjI4MjE3LjAwMDktMy40MjI4My4wMDA5eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
+    content: url(/src/components/images/adobe.svg);
     margin-top: 0;
     margin-bottom: 0;
     margin-right: 1rem;

src/content/docs/dropins-b2b/requisition-list/containers/requisition-list-selector.mdx

@@ -26,7 +26,8 @@ The `RequisitionListSelector` container provides the following configuration opt
 | `sku` | `string` | Yes | Specifies the product SKU to add to the selected requisition list. Required to identify the exact product variant being added. Must match a valid product SKU in your catalog. |
 | `selectedOptions` | `string[]` | No | Provides an array of selected product option IDs for configurable products. Captures variant selections such as size, color, or other configurable attributes. Required for configurable products to identify the specific variant being added. |
 | `quantity` | `number` | No | Sets the quantity of the product to add to the requisition list. Defaults to 1 if not specified. Use to allow bulk additions or pre-populate quantities from previous orders or saved preferences. |
-| `beforeAddProdToReqList` | `function` | No | Callback function to handle validation before the Add to Requisition List dropdown opens when the button is clicked. Use to validate if the product can be added directly (for example, check if a configurable product needs options selected) and redirect to the product detail page if needed. If the callback throws an error or rejects, the dropdown will not open, enabling patterns like redirecting complex products to their detail pages. |
+| `matchBySKU` | `boolean` | No | Controls how the active state is determined. When set to `true`, it checks only the product SKU. When set to `false`, it checks both the SKU and selected configurable option UIDs. The default is `true` (SKU-only). Use `false` on product detail pages (PDP) for configurable products so the button is active only for the exact variant (matching SKU and selected options). Use `true` on product listing pages (PLP), where specific variants aren’t selected. |
+| `beforeAddProdToReqList` | `function` | No | Callback function that runs before the **Add to Requisition List** dropdown opens. Use it to validate whether the product can be added directly (for example, ensuring required options are selected). If validation fails—by throwing or rejecting—the dropdown will not open, allowing you to handle cases like redirecting configurable products to the product detail page. |
 | `initialData` | `object` | No | Preloaded data for the model before backend data is fetched. Use for testing, SSR, or improving initial load. |
 
 </TableWrapper>

src/content/docs/dropins-b2b/requisition-list/functions.mdx

@@ -232,7 +232,8 @@ Returns the requisition lists for the logged-in user.
 ```ts
 const getRequisitionLists = async (
   currentPage?: number,
-  pageSize?: number
+  pageSize?: number,
+  listItemsPageSize?: number
 ): Promise<RequisitionList[] | null>
 ```
 
@@ -242,6 +243,7 @@ const getRequisitionLists = async (
 |---|---|---|---|
 | `currentPage` | `number` | No | The page number for pagination (1-indexed). Used to navigate through multiple pages of requisition lists. |
 | `pageSize` | `number` | No | The number of requisition lists to return per page. Controls how many lists appear on each page. |
+| `listItemsPageSize` | `number` | No | Sets the number of items loaded per GraphQL request (default: 100). If a list exceeds this, additional requests are made automatically so all items are available to the user. |
 
 </TableWrapper>
 

src/content/docs/dropins/all/introduction.mdx

@@ -23,7 +23,7 @@ Drop-in components are full-featured shopping components (not primitives like Ca
 | [Cart](/dropins/cart/) | Summary of items in the cart; view and manage cart contents, update quantities, and proceed to checkout. |
 | [Checkout](/dropins/checkout/) | Streamlined process for completing a purchase: shipping and payment information, order review, and confirmation. |
 | [Order](/dropins/order/) | Tools and containers to manage and display order-related data across pages; supports customer accounts and guest workflows. |
-| [Payment Services](/dropins/payment-services/) | Renders the credit card form and Apple Pay button for payment details; supports credit/debit cards and Apple Pay. |
+| [Payment Services](/dropins/payment-services/) | Renders the credit card form and Apple Pay button for payment details; supports credit/debit cards and Apple Pay. Vaulted (saved) cards are available for signed-in shoppers when the integration enables vaulting. |
 | [Personalization](/dropins/personalization/) | Displays content conditionally based on Adobe Commerce customer groups, segments, and cart price rules. |
 | [Product Details](/dropins/product-details/) | Detailed product information: SKUs, pricing, descriptions, options; supports internationalization and accessibility. |
 | [Product Discovery](/dropins/product-discovery/) | Search results, category listings, and faceted navigation so customers can find and explore products. |

src/content/docs/dropins/index.mdx

@@ -17,7 +17,7 @@ Drop-ins are pre-built, customizable UI components that provide complete commerc
 | [Cart overview](/dropins/cart/) | Provides editable controls to help you view, update, and merge the products in your cart and mini-cart, including image thumbnails, pricing. |
 | [Checkout overview](/dropins/checkout/) | Provides customizable controls to help complete a purchase. |
 | [Order overview](/dropins/order/) | Provides tools to manage and display order-related data across various pages and scenarios. |
-| [Payment Services overview](/dropins/payment-services/) | Renders the credit card form and the Apple Pay button. |
+| [Payment Services overview](/dropins/payment-services/) | Renders the credit card form and the Apple Pay button. Vaulted (saved) cards are available for signed-in shoppers when the integration enables them. |
 | [Personalization overview](/dropins/personalization/) | Provides tools to display content conditionally, based on Adobe Commerce customer groups, segments, and cart price rules. |
 | [Product details page overview](/dropins/product-details/) | Renders detailed information about your products, including descriptions, specifications, options, pricing, and images. |
 | [Product Discovery overview](/dropins/product-discovery/) | Enables you to display and customize product search results, category listings, and faceted navigation. |

src/content/docs/dropins/payment-services/containers/apple-pay.mdx

@@ -9,11 +9,6 @@ import { Aside } from '@astrojs/starlight/components';
 import TableWrapper from '@components/TableWrapper.astro';
 
 
-
-<div style="background-color: var(--sl-color-blue-low); border-left: 4px solid var(--sl-color-blue); padding: 0.75rem 1rem; border-radius: 0.25rem; margin: 1rem 0;">
-<strong>Version: 3.1.0</strong>
-</div>
-
 ## Configuration
 
 The `ApplePay` container provides the following configuration options: