@W-20448811 Shopper can manually enter OTP in login flows

e2e/tests/desktop/extra-features.spec.js

@@ -38,17 +38,49 @@ test('Verify passwordless login request', async ({page}) => {
         '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
     )
 
+    // Verify the passwordless login request
     expect(interceptedRequest).toBeTruthy()
     expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
+    let postData = interceptedRequest.postData()
     expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+    let params = new URLSearchParams(postData)
 
     expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
     expect(params.get('mode')).toBe('email')
     expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+    await page.route(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+        (route) => {
+            interceptedRequest = route.request()
+            route.continue()
+        }
+    )
+
+    // Wait for OTP input fields to appear and fill the 8-digit code
+    const otpCode = '12345678' // Replace with actual OTP code
+    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+    await otpInputs.first().waitFor()
+
+    // Fill each input field with one digit
+    for (let i = 0; i < 8; i++) {
+        await otpInputs.nth(i).fill(otpCode[i])
+    }
+
+    await page.waitForResponse(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+    )
+
+    // Verify the passwordless login token request
+    expect(interceptedRequest).toBeTruthy()
+    expect(interceptedRequest.method()).toBe('POST')
+    postData = interceptedRequest.postData()
+    expect(postData).toBeTruthy()
+    params = new URLSearchParams(postData)
+    expect(params.get('pwdless_login_token')).toBe(otpCode)
+    expect(params.get('hint')).toBe('pwdless_login')
 })
 
 test('Verify password reset request', async ({page}) => {

e2e/tests/mobile/extra-features.spec.js

@@ -40,17 +40,49 @@ test('Verify passwordless login request on mobile', async ({page}) => {
         '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/login'
     )
 
+    // Verify the passwordless login request
     expect(interceptedRequest).toBeTruthy()
     expect(interceptedRequest.method()).toBe('POST')
 
-    const postData = interceptedRequest.postData()
+    let postData = interceptedRequest.postData()
     expect(postData).toBeTruthy()
 
-    const params = new URLSearchParams(postData)
+    let params = new URLSearchParams(postData)
 
     expect(params.get('user_id')).toBe(config.PWA_E2E_USER_EMAIL)
     expect(params.get('mode')).toBe('email')
     expect(params.get('channel_id')).toBe(config.EXTRA_FEATURES_E2E_RETAIL_APP_HOME_SITE)
+
+    await page.route(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token',
+        (route) => {
+            interceptedRequest = route.request()
+            route.continue()
+        }
+    )
+
+    // Wait for OTP input fields to appear and fill the 8-digit code
+    const otpCode = '12345678' // Replace with actual OTP code
+    const otpInputs = page.locator('input[inputmode="numeric"][maxlength="1"]')
+    await otpInputs.first().waitFor()
+
+    // Fill each input field with one digit
+    for (let i = 0; i < 8; i++) {
+        await otpInputs.nth(i).fill(otpCode[i])
+    }
+
+    await page.waitForResponse(
+        '**/mobify/slas/private/shopper/auth/v1/organizations/*/oauth2/passwordless/token'
+    )
+
+    // Verify the passwordless login token request
+    expect(interceptedRequest).toBeTruthy()
+    expect(interceptedRequest.method()).toBe('POST')
+    postData = interceptedRequest.postData()
+    expect(postData).toBeTruthy()
+    params = new URLSearchParams(postData)
+    expect(params.get('pwdless_login_token')).toBe(otpCode)
+    expect(params.get('hint')).toBe('pwdless_login')
 })
 
 test('Verify password reset request on mobile (extra features enabled)', async ({page}) => {

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v5.0.0-dev (Jan 28, 2026)
+- Upgrade to commerce-sdk-isomorphic v5.0.0 and introduce Payment Instrument SCAPI integration [#3552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3552)
+
 ## v4.4.0-dev (Dec 17, 2025)
 - [Bugfix]Ensure code_verifier can be optional in resetPassword call [#3567](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3567)
 - [Improvement] Strengthening typescript types on custom endpoint options and fetchOptions types [#3589](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3589)

packages/commerce-sdk-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "4.4.0-dev",
+  "version": "5.0.0-dev",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -40,7 +40,7 @@
     "version": "node ./scripts/version.js"
   },
   "dependencies": {
-    "commerce-sdk-isomorphic": "4.2.0",
+    "commerce-sdk-isomorphic": "5.0.0-preview.1",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^4.0.0"
   },

packages/commerce-sdk-react/src/auth/index.ts

@@ -96,10 +96,19 @@ type AuthorizePasswordlessParams = {
     userid: string
     mode?: 'email' | 'callback'
     locale?: string
+    /** When true, SLAS will register the customer as part of the passwordless flow */
+    register_customer?: boolean | string
+    /** Optional registration details forwarded to SLAS when register_customer=true */
+    first_name?: string
+    last_name?: string
+    email?: string
+    phone_number?: string
 }
 
 type GetPasswordLessAccessTokenParams = {
     pwdlessLoginToken: string
+    /** When true, SLAS will register the customer if not already registered */
+    register_customer?: boolean | string
 }
 
 /**
@@ -125,6 +134,8 @@ type AuthDataKeys =
     | typeof DWSID_COOKIE_NAME
     | 'code_verifier'
     | 'uido'
+    | 'idp_refresh_token'
+    | 'dnt'
 
 type AuthDataMap = Record<
     AuthDataKeys,
@@ -1283,7 +1294,19 @@ class Auth {
                 ...(usid && {usid}),
                 ...(parameters.locale && {locale: parameters.locale}),
                 userid: parameters.userid,
-                mode
+                mode,
+                ...(parameters.register_customer !== undefined && {
+                    registerCustomer:
+                        typeof parameters.register_customer === 'boolean'
+                            ? parameters.register_customer
+                            : parameters.register_customer === 'true'
+                            ? true
+                            : false
+                }),
+                ...(parameters.last_name && {lastName: parameters.last_name}),
+                ...(parameters.email && {email: parameters.email}),
+                ...(parameters.first_name && {firstName: parameters.first_name}),
+                ...(parameters.phone_number && {phoneNumber: parameters.phone_number})
             }
         })
         if (res && res.status !== 200) {
@@ -1299,14 +1322,22 @@ class Auth {
     async getPasswordLessAccessToken(parameters: GetPasswordLessAccessTokenParams) {
         const pwdlessLoginToken = parameters.pwdlessLoginToken || ''
         const dntPref = this.getDnt({includeDefaults: true})
+        const usid = this.get('usid')
         const token = await helpers.getPasswordLessAccessToken({
             slasClient: this.client,
             credentials: {
                 clientSecret: this.clientSecret
             },
             parameters: {
                 pwdlessLoginToken,
-                dnt: dntPref !== undefined ? String(dntPref) : undefined
+                dnt: dntPref !== undefined ? String(dntPref) : undefined,
+                ...(usid && {usid}),
+                ...(parameters.register_customer !== undefined && {
+                    register_customer:
+                        typeof parameters.register_customer === 'boolean'
+                            ? String(parameters.register_customer)
+                            : parameters.register_customer
+                })
             }
         })
         const isGuest = false

packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts

@@ -67,6 +67,36 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
             ]
         }
     },
+    updateCustomerPaymentInstrument(customerId, {parameters}, response) {
+        const newParams = {...parameters}
+        return {
+            update: [
+                {
+                    queryKey: getCustomerPaymentInstrument.queryKey(newParams)
+                },
+                {
+                    queryKey: getCustomer.queryKey(newParams),
+                    updater: createUpdateFunction((customer: Customer) => {
+                        if (!customer.paymentInstruments) return customer
+                        const idx = customer.paymentInstruments.findIndex(
+                            ({paymentInstrumentId}) =>
+                                paymentInstrumentId === parameters.paymentInstrumentId
+                        )
+                        if (idx >= 0) {
+                            customer.paymentInstruments[idx] = response as any
+                            // If this instrument is now default, unset others
+                            if ((response as any)?.default) {
+                                customer.paymentInstruments = customer.paymentInstruments.map(
+                                    (pi, i) => (i === idx ? pi : {...pi, default: false})
+                                ) as any
+                            }
+                        }
+                        return customer
+                    })
+                }
+            ]
+        }
+    },
     createCustomerPaymentInstrument(customerId, {parameters}, response) {
         const newParams = {...parameters, paymentInstrumentId: response.paymentInstrumentId}
         return {

packages/commerce-sdk-react/src/hooks/ShopperCustomers/index.test.ts

@@ -18,6 +18,7 @@ describe('Shopper Customers hooks', () => {
         // or add it to the `expected` array with a comment explaining "TODO" or "never" (and why).
         expect(unimplemented).toEqual([
             'getExternalProfile', // TODO: Implement when the endpoint exits closed beta
+            'getPublicProductListItems', // TODO: Implement when the endpoint exits closed beta
             'registerExternalProfile' // TODO: Implement when the endpoint exits closed beta
         ])
     })

packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.test.ts

@@ -54,7 +54,8 @@ const basePaymentInstrument: ShopperCustomersTypes.CustomerPaymentInstrument = {
     paymentBankAccount: {},
     paymentCard: {cardType: 'fake'},
     paymentInstrumentId: 'paymentInstrumentId',
-    paymentMethodId: 'paymentMethodId'
+    paymentMethodId: 'paymentMethodId',
+    default: false
 }
 const baseCustomer: RequireKeys<
     ShopperCustomersTypes.Customer,
@@ -176,6 +177,50 @@ describe('ShopperCustomers mutations', () => {
             expect(result.current.mutation.data).toBeUndefined()
             assertRemoveQuery(result.current.query)
         })
+        test('`updateCustomerPaymentInstrument` updates cache on success', async () => {
+            // 0. Setup
+            const customer = baseCustomer
+            const oldData = basePaymentInstrument
+            const newData: ShopperCustomersTypes.CustomerPaymentInstrument = {
+                ...basePaymentInstrument,
+                default: true
+            }
+            const options = createOptions<'updateCustomerPaymentInstrument'>({
+                // Only updating default flag for this test
+                default: true as any
+            })
+
+            mockQueryEndpoint(customersEndpoint, customer) // getCustomer
+            mockQueryEndpoint(customersEndpoint, oldData) // getCustomerPaymentInstrument
+            mockMutationEndpoints(customersEndpoint, newData) // this mutation
+            mockQueryEndpoint(customersEndpoint, {test: 'this should not get used'}) // getCustomer refetch
+            mockQueryEndpoint(customersEndpoint, {test: 'this should not get used'}) // getCustomerPaymentInstrument refetch
+
+            const {result} = renderHookWithProviders(() => ({
+                customer: queries.useCustomer(queryOptions),
+                mutation: useShopperCustomersMutation('updateCustomerPaymentInstrument'),
+                query: queries.useCustomerPaymentInstrument(queryOptions)
+            }))
+
+            // 1. Populate cache with initial data
+            await waitAndExpectSuccess(() => result.current.customer)
+            await waitAndExpectSuccess(() => result.current.query)
+            expect(result.current.customer.data).toEqual(customer)
+            expect(result.current.query.data).toEqual(oldData)
+
+            // 2. Do update mutation
+            act(() => result.current.mutation.mutate(options))
+            await waitAndExpectSuccess(() => result.current.mutation)
+            expect(result.current.mutation.data).toEqual(newData)
+            // query updated
+            assertUpdateQuery(result.current.query, newData)
+            // customer cache updated (instrument replaced)
+            const expectedCustomer = {
+                ...customer,
+                paymentInstruments: [newData]
+            }
+            assertUpdateQuery(result.current.customer, expectedCustomer as any)
+        })
         test('`removeCustomerAddress` updates cache on success', async () => {
             // 0. Setup
             const customer = baseCustomer

packages/commerce-sdk-react/src/hooks/ShopperCustomers/mutation.ts

@@ -73,6 +73,11 @@ export const ShopperCustomersMutations = {
      * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `createCustomerPaymentInstrument` endpoint.
      */
     CreateCustomerPaymentInstrument: 'createCustomerPaymentInstrument',
+    /**
+     * Updates a customer's payment instrument.
+     * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `updateCustomerPaymentInstrument` endpoint.
+     */
+    UpdateCustomerPaymentInstrument: 'updateCustomerPaymentInstrument',
     /**
      * Deletes a customer's payment instrument.
      * @returns A TanStack Query mutation hook for interacting with the Shopper Customers `deleteCustomerPaymentInstrument` endpoint.

packages/commerce-sdk-react/src/hooks/ShopperExperience/index.test.ts

@@ -11,6 +11,12 @@ import * as queries from './query'
 describe('Shopper Experience hooks', () => {
     test('all endpoints have hooks', () => {
         const unimplemtented = getUnimplementedEndpoints(ShopperExperience, queries)
-        expect(unimplemtented).toEqual([])
+        expect(unimplemtented).toEqual([
+            'getContent', //TODO: implement later
+            'getContentFolder', //TODO: implement later
+            'getContentFolders', //TODO: implement later
+            'getMultipleContent', //TODO: implement later
+            'searchContent' //TODO: implement later
+        ])
     })
 })