Google Pay implementation (#2891)

* fix: pwa-pr-review-changes (#2743)

* Initial Google Pay commit

* Some clean up

* Use billing address from payment method + next step

* Fix paymentDataCallbacks

* Cleanup

* Add utests and ssr.js

* ssr.js typo

* cleanup

* update ssr.js

* Fixing linter errors

* Update dropped pieces from rebase

* cleanup

* Rerun tests

* fixing linter errors

* Linter fix(?)

* Linter again

---------

Co-authored-by: Avinash Kasipathy <akasipathy@salesforce.com>

Author: jhagama

packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs

@@ -292,7 +292,8 @@ const {handler} = runtime.createHandler(options, (app) => {
                         // Default source for product images - replace with your CDN
                         '*.commercecloud.salesforce.com',
                         '*.demandware.net',
-                        'checkoutshopper-test.adyen.com'
+                        'checkoutshopper-test.adyen.com',
+                        'https://www.gstatic.com'
                     ],
                     'script-src': [
                         // Used by the service worker in /worker/main.js
@@ -308,7 +309,7 @@ const {handler} = runtime.createHandler(options, (app) => {
                         // Connect to SCRT2 URLs
                         '*.salesforce-scrt.com'
                     ],
-                    'frame-src': ['checkoutshopper-test.adyen.com'],
+                    'frame-src': ['checkoutshopper-test.adyen.com', 'https://pay.google.com'],
                     'frame-ancestors': ["'self'"]
                 }
             },

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs

@@ -291,7 +291,8 @@ const {handler} = runtime.createHandler(options, (app) => {
                     'img-src': [
                         // Default source for product images - replace with your CDN
                         '*.commercecloud.salesforce.com',
-                        'checkoutshopper-test.adyen.com'
+                        'checkoutshopper-test.adyen.com',
+                        'https://www.gstatic.com'
                     ],
                     'script-src': [
                         // Used by the service worker in /worker/main.js
@@ -307,7 +308,7 @@ const {handler} = runtime.createHandler(options, (app) => {
                         // Connect to SCRT2 URLs
                         '*.salesforce-scrt.com'
                     ],
-                    'frame-src': ['checkoutshopper-test.adyen.com'],
+                    'frame-src': ['checkoutshopper-test.adyen.com', 'https://pay.google.com'],
                     'frame-ancestors': ["'self'"]
                 }
             },

packages/pwa-kit-create-app/package-lock.json

@@ -8,7 +8,8 @@ import React, {useEffect, useState} from 'react'
 
 import {useAccessToken, useCustomerId} from '@salesforce/commerce-sdk-react'
 import {AdyenExpressCheckoutProvider} from '@adyen/adyen-salesforce-pwa'
-import {ApplePayExpress} from '@salesforce/retail-react-app/app/components/apple-pay-express/index'
+
+import {GooglePayExpress} from '@salesforce/retail-react-app/app/components/google-pay-express/index'
 import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
 import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
@@ -45,7 +46,8 @@ function Express() {
                 basket={basket}
                 navigate={navigate}
             >
-                <ApplePayExpress />
+                {/* <ApplePayExpress /> */}
+                <GooglePayExpress />
             </AdyenExpressCheckoutProvider>
         </div>
     )

packages/template-retail-react-app/app/components/express/index.jsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025, 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
+ */
+export class ApiClient {
+    url = null
+    token = null
+    site = null
+
+    constructor(url, token, site) {
+        this.url = url
+        this.token = token
+        this.site = site
+    }
+
+    base(method, options) {
+        const queryParams = {
+            siteId: this.site.id,
+            ...(options?.queryParams || {})
+        }
+        const fullUrl = `${this.url}?${new URLSearchParams(queryParams)}`
+        return fetch(fullUrl, {
+            method: method,
+            body: options?.body || null,
+            headers: {
+                'Content-Type': 'application/json',
+                authorization: `Bearer ${this.token}`,
+                ...options?.headers
+            }
+        })
+    }
+
+    get(options) {
+        return this.base('get', options)
+    }
+
+    post(options) {
+        return this.base('post', options)
+    }
+}

packages/template-retail-react-app/app/components/express/utils/api.js

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2025, 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
+ */
+import {ApiClient} from '@salesforce/retail-react-app/app/components/express/utils/api'
+
+describe('ApiClient', () => {
+    let apiClient
+    const mockUrl = '/api/test'
+    const mockToken = 'test-token'
+    const mockSite = {id: 'test-site'}
+
+    beforeEach(() => {
+        apiClient = new ApiClient(mockUrl, mockToken, mockSite)
+        jest.clearAllMocks()
+    })
+
+    describe('constructor', () => {
+        it('should initialize with correct properties', () => {
+            expect(apiClient.url).toBe(mockUrl)
+            expect(apiClient.token).toBe(mockToken)
+            expect(apiClient.site).toBe(mockSite)
+        })
+    })
+
+    describe('base method', () => {
+        it('should make a GET request with correct parameters', async () => {
+            const mockResponse = {status: 200, json: () => Promise.resolve({data: 'test'})}
+            const mockFetch = jest.fn().mockResolvedValue(mockResponse)
+            global.fetch = mockFetch
+
+            await apiClient.base('GET', {
+                queryParams: {param1: 'value1'}
+            })
+
+            expect(mockFetch).toHaveBeenCalledWith(
+                `${mockUrl}?siteId=${mockSite.id}&param1=value1`,
+                {
+                    method: 'GET',
+                    body: null,
+                    headers: {
+                        'Content-Type': 'application/json',
+                        authorization: `Bearer ${mockToken}`
+                    }
+                }
+            )
+        })
+
+        it('should make a POST request with body and headers', async () => {
+            const mockResponse = {status: 200, json: () => Promise.resolve({data: 'test'})}
+            const mockFetch = jest.fn().mockResolvedValue(mockResponse)
+            global.fetch = mockFetch
+
+            const body = JSON.stringify({test: 'data'})
+            const headers = {custom: 'header'}
+
+            await apiClient.base('POST', {
+                body,
+                headers
+            })
+
+            expect(mockFetch).toHaveBeenCalledWith(`${mockUrl}?siteId=${mockSite.id}`, {
+                method: 'POST',
+                body,
+                headers: {
+                    'Content-Type': 'application/json',
+                    authorization: `Bearer ${mockToken}`,
+                    custom: 'header'
+                }
+            })
+        })
+    })
+
+    describe('get method', () => {
+        it('should call base with GET method', async () => {
+            const mockResponse = {status: 200, json: () => Promise.resolve({data: 'test'})}
+            const mockFetch = jest.fn().mockResolvedValue(mockResponse)
+            global.fetch = mockFetch
+
+            const spy = jest.spyOn(apiClient, 'base')
+
+            await apiClient.get({param: 'value'})
+
+            expect(spy).toHaveBeenCalledWith('get', {param: 'value'})
+        })
+    })
+
+    describe('post method', () => {
+        it('should call base with POST method', async () => {
+            const mockResponse = {status: 200, json: () => Promise.resolve({data: 'test'})}
+            const mockFetch = jest.fn().mockResolvedValue(mockResponse)
+            global.fetch = mockFetch
+
+            const spy = jest.spyOn(apiClient, 'base')
+
+            await apiClient.post({param: 'value'})
+
+            expect(spy).toHaveBeenCalledWith('post', {param: 'value'})
+        })
+    })
+})