W-20975340: Display SPM at checkout

Author: rasbhat

packages/template-retail-react-app/app/hooks/use-current-customer.js

@@ -14,7 +14,15 @@ import {useCustomer, useCustomerId, useCustomerType} from '@salesforce/commerce-
 export const useCurrentCustomer = () => {
     const customerId = useCustomerId()
     const {isRegistered, isGuest, customerType} = useCustomerType()
-    const query = useCustomer({parameters: {customerId}}, {enabled: !!customerId && isRegistered})
+    const query = useCustomer(
+        {
+            parameters: {
+                customerId,
+                expand: ['paymentmethodreferences']
+            }
+        },
+        {enabled: !!customerId && isRegistered}
+    )
     const value = {
         ...query,
         data: {

packages/template-retail-react-app/app/pages/checkout/partials/sf-payments-sheet.jsx

@@ -48,6 +48,7 @@ import {
     buildTheme,
     getSFPaymentsInstrument,
     createPaymentInstrumentBody,
+    transformPaymentMethodReferences,
     getClientSecret
 } from '@salesforce/retail-react-app/app/utils/sf-payments-utils'
 import logger from '@salesforce/retail-react-app/app/utils/logger-instance'
@@ -486,27 +487,44 @@ const SFPaymentsSheet = forwardRef((props, ref) => {
         confirmPayment
     }))
 
+    const savedPaymentMethods = useMemo(() => {
+        if (!customer?.paymentMethodReferences || !paymentConfig?.paymentMethodSetAccounts) {
+            return []
+        }
+        return transformPaymentMethodReferences(
+            customer.paymentMethodReferences,
+            paymentConfig.paymentMethodSetAccounts
+        )
+    }, [customer?.paymentMethodReferences, paymentConfig?.paymentMethodSetAccounts])
+
     useEffect(() => {
         if (sfp && metadata && containerElementRef.current && paymentConfig) {
+            const paymentMethodSetAccounts = (paymentConfig.paymentMethodSetAccounts || []).map(
+                (account) => ({
+                    ...account,
+                    gatewayId: account.gatewayId || account.accountId
+                })
+            )
+
             const paymentMethodSet = {
                 paymentMethods: paymentConfig.paymentMethods,
-                paymentMethodSetAccounts: paymentConfig.paymentMethodSetAccounts
+                paymentMethodSetAccounts: paymentMethodSetAccounts
             }
 
             config.current = {
                 theme: buildTheme(),
                 actions: {
                     createIntent: createPaymentInstrument,
-                    onClick: () => {} // No-op: return empty function since its not applicable and SDK proceeds immediately
+                    onClick: () => {}
                 },
                 options: {
                     useManualCapture: !cardCaptureAutomatic,
                     returnUrl: `${window.location.protocol}//${window.location.host}/checkout/payment-processing`,
                     showSaveForFutureUsageCheckbox: !!(
                         customer?.isRegistered && customer?.customerId
                     ),
-                    // Suppress "Make payment method default" checkbox since we don't support default SPM yet
-                    showSaveAsDefaultCheckbox: false
+                    showSaveAsDefaultCheckbox: false,
+                    savedPaymentMethods: savedPaymentMethods
                 }
             }
 
@@ -549,7 +567,9 @@ const SFPaymentsSheet = forwardRef((props, ref) => {
         containerElementRef.current,
         paymentConfig,
         cardCaptureAutomatic,
-        customer?.isRegistered
+        customer?.isRegistered,
+        customer?.customerId,
+        savedPaymentMethods
     ])
 
     useEffect(() => {

packages/template-retail-react-app/app/utils/sf-payments-utils.js

@@ -278,6 +278,82 @@ export const createPaymentInstrumentBody = ({
     }
 }
 
+/**
+ * Transforms payment method references from API format to SF Payments SDK format.
+ * @param {Array} paymentMethodReferences - Array of payment method references
+ * @param {Array} paymentMethodSetAccounts - Array of payment method set accounts
+ * @returns {Array} Transformed payment method references for SF Payments SDK
+ */
+export const transformPaymentMethodReferences = (
+    paymentMethodReferences,
+    paymentMethodSetAccounts = []
+) => {
+    if (!paymentMethodReferences || !Array.isArray(paymentMethodReferences)) {
+        return []
+    }
+
+    return paymentMethodReferences
+        .map((pmr) => {
+            const generateDisplayName = () => {
+                if (pmr.brand && pmr.last4) {
+                    const brandName = pmr.brand.charAt(0).toUpperCase() + pmr.brand.slice(1)
+                    return `${brandName} •••• ${pmr.last4}`
+                }
+                if (pmr.type === 'card' && pmr.last4) {
+                    return `Card •••• ${pmr.last4}`
+                }
+                if (pmr.type === 'sepa_debit' && pmr.last4) {
+                    return `Account ending in ${pmr.last4}`
+                }
+                return 'Saved Payment Method'
+            }
+
+            // Determine gatewayId for SDK matching
+            if (
+                !pmr.accountId ||
+                !paymentMethodSetAccounts ||
+                !Array.isArray(paymentMethodSetAccounts)
+            ) {
+                return null
+            }
+
+            const matchingAccount = paymentMethodSetAccounts.find(
+                (account) => account.accountId === pmr.accountId
+            )
+            if (!matchingAccount) {
+                return null
+            }
+
+            const gatewayId = matchingAccount.gatewayId || matchingAccount.accountId
+
+            if (!gatewayId || typeof gatewayId !== 'string') {
+                return null
+            }
+
+            return {
+                accountId: pmr.accountId || null,
+                name: generateDisplayName(),
+                status: 'Active',
+                isDefault: false,
+                type: pmr.type || null,
+                accountHolderName: null,
+                id: pmr.id || null,
+                gatewayTokenId: pmr.id || null,
+                usageType: 'OffSession',
+                gatewayId: gatewayId,
+                gatewayCustomerId: null,
+                last4: pmr.last4 || null,
+                network: pmr.brand || null,
+                issuer: null,
+                expiryMonth: null,
+                expiryYear: null,
+                bankName: null,
+                savedByMerchant: false
+            }
+        })
+        .filter((spm) => spm !== null)
+}
+
 /**
  * Returns a theme object containing CSS information for use with SF Payments components.
  * @param {*} options - theme override options