diff --git a/packages/commerce-sdk-react/CHANGELOG.md b/packages/commerce-sdk-react/CHANGELOG.md index d46fa3833f..92ad74a14c 100644 --- a/packages/commerce-sdk-react/CHANGELOG.md +++ b/packages/commerce-sdk-react/CHANGELOG.md @@ -1,6 +1,7 @@ ## v5.1.0-dev - Add Page Designer Support [#3727](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3727) - Bump commerce-sdk-isomorphic to 5.1.0 [#3725](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725) +- Update ShopperBasketsV2 hooks documentation and query keys - Add Node 24 support. Drop Node 16 support. [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652) - Add Shopper Consents API support [#3674](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3674) diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/cache.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/cache.ts index b93b2eec07..a3920bef94 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/cache.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/cache.ts @@ -183,7 +183,7 @@ export const cacheUpdateMatrix: CacheUpdateMatrix = { ], remove: [ // We want to fuzzy match all queryKeys with `basketId` in their path - // [`/commerce-sdk-react,/organizations/,${organization},/baskets/,${basketId}`] + // [`/commerce-sdk-react,/organizations/,${organization},/baskets/v2/,${basketId}`] {queryKey: getBasket.path(parameters)} ] } diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.test.ts index 3d193a3168..6d4e40c2f5 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.test.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.test.ts @@ -10,7 +10,7 @@ import {cacheUpdateMatrix} from './cache' import {ShopperBasketsMutations as mutations} from './mutation' import * as queries from './query' -describe('Shopper Baskets hooks', () => { +describe('Shopper Baskets V2 hooks', () => { test('all endpoints have hooks', () => { // unimplemented = SDK method exists, but no query hook or value in mutations enum const unimplemented = getUnimplementedEndpoints(ShopperBasketsV2, queries, mutations) diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.ts index 1413649783..b0c2870fd2 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/index.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2023, Salesforce, Inc. + * Copyright (c) 2026, Salesforce, Inc. * All rights reserved. * SPDX-License-Identifier: BSD-3-Clause * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.test.ts index ab7abe381a..a56a85d6dd 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.test.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.test.ts @@ -203,7 +203,7 @@ const emptyResponseTestCases = [ // Most test cases only apply to non-empty response test cases, some (error handling) can include deleteBasket const allTestCases = [...nonEmptyResponseTestCases, ...emptyResponseTestCases] -describe('ShopperBaskets mutations', () => { +describe('ShopperBasketsV2 mutations', () => { const storedCustomerIdKey = `customer_id_${DEFAULT_TEST_CONFIG.siteId}` beforeAll(() => { // Make sure we don't accidentally overwrite something before setting up our test state diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.ts index 5db11d1348..dec02f7fd0 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/mutation.ts @@ -15,8 +15,8 @@ const CLIENT_KEY = CLIENT_KEYS.SHOPPER_BASKETS_V2 type Client = NonNullable /** - * Mutations available for Shopper Baskets. - * @group ShopperBaskets + * Mutations available for Shopper Baskets V2. + * @group ShopperBasketsV2 * @category Mutation * @enum */ @@ -165,16 +165,16 @@ export const ShopperBasketsMutations = { } as const /** - * Type for Shopper Baskets Mutation. - * @group ShopperBaskets + * Type for Shopper Baskets V2 Mutation. + * @group ShopperBasketsV2 * @category Mutation */ export type ShopperBasketsMutation = (typeof ShopperBasketsMutations)[keyof typeof ShopperBasketsMutations] /** - * Mutation hook for Shopper Baskets. - * @group ShopperBaskets + * Mutation hook for Shopper Baskets V2. + * @group ShopperBasketsV2 * @category Mutation */ export function useShopperBasketsMutation( diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.test.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.test.ts index e8cdd0dc46..9c448a66b3 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.test.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.test.ts @@ -41,7 +41,7 @@ const testMap: TestMap = { } // Type assertion is necessary because `Object.entries` is limited const testCases = Object.entries(testMap) as Array<[keyof TestMap, TestMap[keyof TestMap]]> -describe('Shopper Baskets query hooks', () => { +describe('Shopper Baskets V2 query hooks', () => { beforeEach(() => nock.cleanAll()) afterEach(() => { expect(nock.pendingMocks()).toHaveLength(0) diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.ts index 88dfa965c5..034e6781f0 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/query.ts @@ -18,11 +18,11 @@ type Client = NonNullable /** * Gets a basket. - * @group ShopperBaskets + * @group ShopperBasketsV2 * @category Query * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters. * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set. - * @returns A TanStack Query query hook with data from the Shopper Baskets `getBasket` endpoint. + * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getBasket` endpoint. * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getBasket| Salesforce Developer Center} for more information about the API endpoint. * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getbasket | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type. * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value. @@ -63,11 +63,11 @@ export const useBasket = ( } /** * Gets applicable payment methods for an existing basket considering the open payment amount only. - * @group ShopperBaskets + * @group ShopperBasketsV2 * @category Query * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters. * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set. - * @returns A TanStack Query query hook with data from the Shopper Baskets `getPaymentMethodsForBasket` endpoint. + * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getPaymentMethodsForBasket` endpoint. * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getPaymentMethodsForBasket| Salesforce Developer Center} for more information about the API endpoint. * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getpaymentmethodsforbasket | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type. * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value. @@ -108,11 +108,11 @@ export const usePaymentMethodsForBasket = ( } /** * Gets applicable price books for an existing basket. - * @group ShopperBaskets + * @group ShopperBasketsV2 * @category Query * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters. * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set. - * @returns A TanStack Query query hook with data from the Shopper Baskets `getPriceBooksForBasket` endpoint. + * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getPriceBooksForBasket` endpoint. * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getPriceBooksForBasket| Salesforce Developer Center} for more information about the API endpoint. * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getpricebooksforbasket | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type. * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value. @@ -153,11 +153,11 @@ export const usePriceBooksForBasket = ( } /** * Gets the applicable shipping methods for a certain shipment of a basket. - * @group ShopperBaskets + * @group ShopperBasketsV2 * @category Query * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters. * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set. - * @returns A TanStack Query query hook with data from the Shopper Baskets `getShippingMethodsForShipment` endpoint. + * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getShippingMethodsForShipment` endpoint. * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getShippingMethodsForShipment| Salesforce Developer Center} for more information about the API endpoint. * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#getshippingmethodsforshipment | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type. * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value. @@ -198,11 +198,11 @@ export const useShippingMethodsForShipment = ( } /** * This method gives you the external taxation data set by the PUT taxes API. This endpoint can be called only if external taxation mode was used for basket creation. See POST /baskets for more information. - * @group ShopperBaskets + * @group ShopperBasketsV2 * @category Query * @parameter apiOptions - Options to pass through to `commerce-sdk-isomorphic`, with `null` accepted for unset API parameters. * @parameter queryOptions - TanStack Query query options, with `enabled` by default set to check that all required API parameters have been set. - * @returns A TanStack Query query hook with data from the Shopper Baskets `getTaxesFromBasket` endpoint. + * @returns A TanStack Query query hook with data from the Shopper Baskets V2 `getTaxesFromBasket` endpoint. * @see {@link https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-baskets?meta=getTaxesFromBasket| Salesforce Developer Center} for more information about the API endpoint. * @see {@link https://salesforcecommercecloud.github.io/commerce-sdk-isomorphic/classes/shopperbaskets.shopperbaskets-1.html#gettaxesfrombasket | `commerce-sdk-isomorphic` documentation} for more information on the parameters and returned data type. * @see {@link https://tanstack.com/query/latest/docs/react/reference/useQuery | TanStack Query `useQuery` reference} for more information about the return value. diff --git a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/queryKeyHelpers.ts b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/queryKeyHelpers.ts index feb173302a..618bc80425 100644 --- a/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/queryKeyHelpers.ts +++ b/packages/commerce-sdk-react/src/hooks/ShopperBasketsV2/queryKeyHelpers.ts @@ -16,7 +16,7 @@ export type QueryKeys = { '/commerce-sdk-react', '/organizations/', string | undefined, - '/baskets/', + '/baskets/v2/', string | undefined, Params<'getBasket'> ] @@ -24,7 +24,7 @@ export type QueryKeys = { '/commerce-sdk-react', '/organizations/', string | undefined, - '/baskets/', + '/baskets/v2/', string | undefined, '/payment-methods', Params<'getPaymentMethodsForBasket'> @@ -33,7 +33,7 @@ export type QueryKeys = { '/commerce-sdk-react', '/organizations/', string | undefined, - '/baskets/', + '/baskets/v2/', string | undefined, '/price-books', Params<'getPriceBooksForBasket'> @@ -42,7 +42,7 @@ export type QueryKeys = { '/commerce-sdk-react', '/organizations/', string | undefined, - '/baskets/', + '/baskets/v2/', string | undefined, '/shipments/', string | undefined, @@ -53,7 +53,7 @@ export type QueryKeys = { '/commerce-sdk-react', '/organizations/', string | undefined, - '/baskets/', + '/baskets/v2/', string | undefined, '/taxes', Params<'getTaxesFromBasket'> @@ -74,7 +74,7 @@ export const getBasket: QueryKeyHelper<'getBasket'> = { '/commerce-sdk-react', '/organizations/', params?.organizationId, - '/baskets/', + '/baskets/v2/', params?.basketId ], queryKey: (params: Params<'getBasket'>) => { @@ -90,7 +90,7 @@ export const getPaymentMethodsForBasket: QueryKeyHelper<'getPaymentMethodsForBas '/commerce-sdk-react', '/organizations/', params?.organizationId, - '/baskets/', + '/baskets/v2/', params?.basketId, '/payment-methods' ], @@ -107,7 +107,7 @@ export const getPriceBooksForBasket: QueryKeyHelper<'getPriceBooksForBasket'> = '/commerce-sdk-react', '/organizations/', params?.organizationId, - '/baskets/', + '/baskets/v2/', params?.basketId, '/price-books' ], @@ -124,7 +124,7 @@ export const getShippingMethodsForShipment: QueryKeyHelper<'getShippingMethodsFo '/commerce-sdk-react', '/organizations/', params?.organizationId, - '/baskets/', + '/baskets/v2/', params?.basketId, '/shipments/', params?.shipmentId, @@ -143,7 +143,7 @@ export const getTaxesFromBasket: QueryKeyHelper<'getTaxesFromBasket'> = { '/commerce-sdk-react', '/organizations/', params?.organizationId, - '/baskets/', + '/baskets/v2/', params?.basketId, '/taxes' ], diff --git a/packages/pwa-kit-create-app/CHANGELOG.md b/packages/pwa-kit-create-app/CHANGELOG.md index 1bb10bd054..b6cb40207e 100644 --- a/packages/pwa-kit-create-app/CHANGELOG.md +++ b/packages/pwa-kit-create-app/CHANGELOG.md @@ -1,5 +1,5 @@ ## v3.17.0-dev -- Add Salesforce Payments configuration to generated projects +- Add Salesforce Payments configuration to generated projects [#3725] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725) - Clear verdaccio npm cache during project generation [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652) - Add Node 24 support, remove legacy `url` module import. Drop Node 16 support [#3652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3652) diff --git a/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs b/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs index af6d6da727..938eb8b0a7 100644 --- a/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs +++ b/packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs @@ -160,10 +160,9 @@ module.exports = { // Salesforce Payments configuration // Set enabled to true to enable Salesforce Payments (requires the Salesforce Payments feature toggle to be enabled on the Commerce Cloud instance). // Set enabled to false to disable Salesforce Payments on the storefront (the Commerce Cloud feature toggle is unaffected). - // sdkUrl and metadataUrl are hosted on your Commerce Cloud instance. Replace with your instance hostname. - // This may be a demandware.net hostname (e.g., myinstance.unified.demandware.net) or a vanity/custom hostname. - // sdkUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' - // metadataUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' + // Set the sdkUrl and metadataUrl values to point to your Commerce Cloud instance host by replacing the [bm_or_vanity_host] placeholder with your Business Manager or vanity URL host name. + // sdkUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' + // metadataUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' sfPayments: { enabled: false, sdkUrl: '', diff --git a/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs b/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs index 1729714da5..1d6d0c5331 100644 --- a/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs +++ b/packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs @@ -33,9 +33,14 @@ const options = { port: 3000, // The protocol on which the development Express app listens. + // Set DEV_SERVER_PROTOCOL to 'https' for HTTPS; defaults to 'http' when unset. // Note that http://localhost is treated as a secure context for development, // except by Safari. - protocol: 'http', + protocol: process.env.DEV_SERVER_PROTOCOL || 'http', + + // Optional. Path to SSL certificate (.pem) for HTTPS development. Typically a + // self-signed cert for localhost; set DEV_SERVER_SSL_FILE_PATH when using https. + sslFilePath: process.env.DEV_SERVER_SSL_FILE_PATH, // Option for whether to set up a special endpoint for handling // private SLAS clients @@ -346,7 +351,9 @@ const {handler} = runtime.createHandler(options, (app) => { // Default source for product images - replace with your CDN '*.commercecloud.salesforce.com', '*.demandware.net', - '*.adyen.com' // Payment gateways + '*.adyen.com', // Payment gateways + 'pay.google.com', // Google Pay payment handler icon + 'www.gstatic.com' // optional, if icon is on gstatic ], 'script-src': [ // Used by the service worker in /worker/main.js @@ -373,13 +380,20 @@ const {handler} = runtime.createHandler(options, (app) => { // Connect to SCRT2 URLs '*.salesforce-scrt.com', // Payment gateways + // Note: Google Pay requires different CSP entries depending on the integration and environment. + // - 'pay.google.com' and 'payments.google.com' are generally needed for the SDK to load and create payment tokens. + // - 'google.com/pay/' and 'www.google.com/pay/' may be required for certain flows (especially with Adyen) or in some browsers + // where the interactive payment sheet makes server calls directly to google.com/pay. + // - You may need to adjust these URLs based on your environments. '*.demandware.net', // Used to load a valid payment scripts in test environment '*.adyen.com', '*.paypal.com', 'pay.google.com', 'payments.google.com', - 'google.com', - 'www.google.com' + 'google.com/pay', + 'google.com/pay/', + 'www.google.com/pay', + 'www.google.com/pay/' ], 'frame-src': [ // Allow frames from Salesforce site.com (Needed for MIAW) diff --git a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs index 1729714da5..1d6d0c5331 100644 --- a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs +++ b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs @@ -33,9 +33,14 @@ const options = { port: 3000, // The protocol on which the development Express app listens. + // Set DEV_SERVER_PROTOCOL to 'https' for HTTPS; defaults to 'http' when unset. // Note that http://localhost is treated as a secure context for development, // except by Safari. - protocol: 'http', + protocol: process.env.DEV_SERVER_PROTOCOL || 'http', + + // Optional. Path to SSL certificate (.pem) for HTTPS development. Typically a + // self-signed cert for localhost; set DEV_SERVER_SSL_FILE_PATH when using https. + sslFilePath: process.env.DEV_SERVER_SSL_FILE_PATH, // Option for whether to set up a special endpoint for handling // private SLAS clients @@ -346,7 +351,9 @@ const {handler} = runtime.createHandler(options, (app) => { // Default source for product images - replace with your CDN '*.commercecloud.salesforce.com', '*.demandware.net', - '*.adyen.com' // Payment gateways + '*.adyen.com', // Payment gateways + 'pay.google.com', // Google Pay payment handler icon + 'www.gstatic.com' // optional, if icon is on gstatic ], 'script-src': [ // Used by the service worker in /worker/main.js @@ -373,13 +380,20 @@ const {handler} = runtime.createHandler(options, (app) => { // Connect to SCRT2 URLs '*.salesforce-scrt.com', // Payment gateways + // Note: Google Pay requires different CSP entries depending on the integration and environment. + // - 'pay.google.com' and 'payments.google.com' are generally needed for the SDK to load and create payment tokens. + // - 'google.com/pay/' and 'www.google.com/pay/' may be required for certain flows (especially with Adyen) or in some browsers + // where the interactive payment sheet makes server calls directly to google.com/pay. + // - You may need to adjust these URLs based on your environments. '*.demandware.net', // Used to load a valid payment scripts in test environment '*.adyen.com', '*.paypal.com', 'pay.google.com', 'payments.google.com', - 'google.com', - 'www.google.com' + 'google.com/pay', + 'google.com/pay/', + 'www.google.com/pay', + 'www.google.com/pay/' ], 'frame-src': [ // Allow frames from Salesforce site.com (Needed for MIAW) diff --git a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs index c0f0673658..e9ad45cfff 100644 --- a/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs +++ b/packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs @@ -160,10 +160,9 @@ module.exports = { // Salesforce Payments configuration // Set enabled to true to enable Salesforce Payments (requires the Salesforce Payments feature toggle to be enabled on the Commerce Cloud instance). // Set enabled to false to disable Salesforce Payments on the storefront (the Commerce Cloud feature toggle is unaffected). - // sdkUrl and metadataUrl are hosted on your Commerce Cloud instance. Replace with your instance hostname. - // This may be a demandware.net hostname (e.g., myinstance.unified.demandware.net) or a vanity/custom hostname. - // sdkUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' - // metadataUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' + // Set the sdkUrl and metadataUrl values to point to your Commerce Cloud instance host by replacing the [bm_or_vanity_host] placeholder with your Business Manager or vanity URL host name. + // sdkUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' + // metadataUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' sfPayments: { enabled: false, sdkUrl: '', diff --git a/packages/template-retail-react-app/app/ssr.js b/packages/template-retail-react-app/app/ssr.js index da7bfbfc13..d31127fccb 100644 --- a/packages/template-retail-react-app/app/ssr.js +++ b/packages/template-retail-react-app/app/ssr.js @@ -42,11 +42,13 @@ const options = { port: 3000, // The protocol on which the development Express app listens. + // Set DEV_SERVER_PROTOCOL to 'https' for HTTPS; defaults to 'http' when unset. // Note that http://localhost is treated as a secure context for development, // except by Safari. protocol: process.env.DEV_SERVER_PROTOCOL || 'http', - // SSL file path for HTTPS development + // Optional. Path to SSL certificate (.pem) for HTTPS development. Typically a + // self-signed cert for localhost; set DEV_SERVER_SSL_FILE_PATH when using https. sslFilePath: process.env.DEV_SERVER_SSL_FILE_PATH, // Option for whether to set up a special endpoint for handling @@ -360,7 +362,9 @@ const {handler} = runtime.createHandler(options, (app) => { // Default source for product images - replace with your CDN '*.commercecloud.salesforce.com', '*.demandware.net', - '*.adyen.com' + '*.adyen.com', + 'pay.google.com', // Google Pay payment handler icon + 'www.gstatic.com' // optional, if icon is on gstatic ], 'script-src': [ // Used by the service worker in /worker/main.js @@ -385,13 +389,20 @@ const {handler} = runtime.createHandler(options, (app) => { // Connect to SCRT2 URLs '*.salesforce-scrt.com', // Payment gateways + // Note: Google Pay requires different CSP entries depending on the integration and environment. + // - 'pay.google.com' and 'payments.google.com' are generally needed for the SDK to load and create payment tokens. + // - 'google.com/pay/' and 'www.google.com/pay/' may be required for certain flows (especially with Adyen) or in some browsers + // where the interactive payment sheet makes server calls directly to google.com/pay. + // - You may need to adjust these URLs based on your environments. '*.demandware.net', // Used to load a valid payment scripts in test environment '*.adyen.com', '*.paypal.com', 'pay.google.com', 'payments.google.com', - 'google.com', - 'www.google.com', + 'google.com/pay', + 'google.com/pay/', + 'www.google.com/pay', + 'www.google.com/pay/', // Connect to SFCC/ODS instances '*.demandware.net' ], diff --git a/packages/template-retail-react-app/config/default.js b/packages/template-retail-react-app/config/default.js index 955212266c..055141e6af 100644 --- a/packages/template-retail-react-app/config/default.js +++ b/packages/template-retail-react-app/config/default.js @@ -91,10 +91,9 @@ module.exports = { // Salesforce Payments configuration // Set enabled to true to enable Salesforce Payments (requires the Salesforce Payments feature toggle to be enabled on the Commerce Cloud instance). // Set enabled to false to disable Salesforce Payments on the storefront (the Commerce Cloud feature toggle is unaffected). - // sdkUrl and metadataUrl are hosted on your Commerce Cloud instance. Replace with your instance hostname. - // This may be a demandware.net hostname (e.g., myinstance.unified.demandware.net) or a vanity/custom hostname. - // sdkUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' - // metadataUrl: 'https:///on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' + // Set the sdkUrl and metadataUrl values to point to your Commerce Cloud instance host by replacing the [bm_or_vanity_host] placeholder with your Business Manager or vanity URL host name. + // sdkUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/jscript/sfp/v1/sfp.js' + // metadataUrl: 'https://[bm_or_vanity_host]/on/demandware.static/Sites-Site/-/-/internal/metadata/v1.json' sfPayments: { enabled: false, sdkUrl: '',