Merge pull request #2787 from mmccullom-sf/adyenApplePayPDP

@W-19014904 – Adyen Apple Pay PDP

Author: mmccullom-sf

packages/template-retail-react-app/app/api/adyen/paymentMethods/standalone.js

@@ -0,0 +1,102 @@
+/*
+ * 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
+ */
+
+/**
+ * Custom payment methods controller that doesn't require a basket
+ * This is specifically for "Buy Now" flows where we need to show Apple Pay
+ * before creating a basket
+ */
+
+// Helper function to get the Adyen PWA library version dynamically
+function getAdyenPwaVersion() {
+    try {
+        // Try to read the version from the installed package
+        const packageJson = require('@adyen/adyen-salesforce-pwa/package.json')
+        return packageJson.version
+    } catch (error) {
+        console.error('Unable to determine Adyen PWA version', error)
+    }
+}
+
+export default async function handler(req, res) {
+    if (req.method !== 'GET') {
+        return res.status(405).json({error: 'Method not allowed'})
+    }
+
+    try {
+        const {siteId, locale} = req.query
+
+        if (!siteId) {
+            return res.status(400).json({error: 'siteId is required'})
+        }
+
+        // Get Adyen configuration from environment variables
+        // Environment variables are prefixed with the site ID
+        const apiKey = process.env[`${siteId}_ADYEN_API_KEY`]
+        const merchantAccount = process.env[`${siteId}_ADYEN_MERCHANT_ACCOUNT`]
+        const environment = process.env[`${siteId}_ADYEN_ENVIRONMENT`] || 'test'
+        const clientKey = process.env[`${siteId}_ADYEN_CLIENT_KEY`]
+
+        if (!apiKey || !merchantAccount || !clientKey) {
+            return res.status(500).json({
+                error: 'Missing Adyen configuration',
+                details: `Required environment variables: ${siteId}_ADYEN_API_KEY, ${siteId}_ADYEN_MERCHANT_ACCOUNT, ${siteId}_ADYEN_CLIENT_KEY`
+            })
+        }
+
+        // Construct Adyen API URL
+        const adyenBaseUrl =
+            environment === 'live'
+                ? 'https://checkout-live.adyen.com/v70'
+                : 'https://checkout-test.adyen.com/v70'
+
+        // Call Adyen payment methods API without basket dependency
+        const adyenResponse = await fetch(`${adyenBaseUrl}/paymentMethods`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-Key': apiKey
+            },
+            body: JSON.stringify({
+                merchantAccount,
+                countryCode: locale?.split('-')[1] || 'US',
+                channel: 'Web'
+            })
+        })
+
+        if (!adyenResponse.ok) {
+            const errorBody = await adyenResponse.text()
+            console.error('Adyen API error:', errorBody)
+            return res.status(adyenResponse.status).json({
+                error: 'Failed to fetch payment methods from Adyen'
+            })
+        }
+
+        const paymentMethods = await adyenResponse.json()
+
+        // Return the payment methods with environment configuration and application info
+        res.status(200).json({
+            ...paymentMethods,
+            environment: {
+                ADYEN_ENVIRONMENT: environment,
+                ADYEN_CLIENT_KEY: clientKey
+            },
+            applicationInfo: {
+                adyenLibrary: {
+                    name: 'adyen-salesforce-pwa',
+                    version: getAdyenPwaVersion()
+                }
+            }
+        })
+    } catch (error) {
+        console.error('Payment methods API error:', error)
+        res.status(500).json({
+            error: 'Internal server error',
+            message: error.message
+        })
+    }
+}

packages/template-retail-react-app/app/components/apple-pay-express/hooks/use-standalone-payment-methods.js

@@ -0,0 +1,54 @@
+/*
+ * 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 {useState, useEffect} from 'react'
+import {AdyenPaymentMethodsService} from '@salesforce/retail-react-app/app/components/apple-pay-express/utils/payment-methods'
+
+/**
+ * Hook for fetching payment methods without basket dependency (for "Buy Now" flows)
+ * @param {string} authToken - Authentication token
+ * @param {object} site - Site configuration
+ * @param {object} locale - Locale configuration
+ * @param {boolean} enabled - Whether the hook should make API calls (default: true)
+ * @returns {object} Payment methods data, loading state, and error
+ */
+export const useStandalonePaymentMethods = (authToken, site, locale, enabled = true) => {
+    const [paymentMethods, setPaymentMethods] = useState(null)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState(null)
+
+    useEffect(() => {
+        // Only make API call if enabled and required parameters are available
+        if (!enabled || !authToken || !site) {
+            return
+        }
+
+        const fetchPaymentMethods = async () => {
+            try {
+                setLoading(true)
+                setError(null)
+
+                const service = new AdyenPaymentMethodsService(authToken, site)
+                const data = await service.getPaymentMethods()
+
+                setPaymentMethods(data)
+            } catch (err) {
+                console.error('Error fetching standalone payment methods:', err)
+                setError(err)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        fetchPaymentMethods()
+    }, [authToken, site, locale, enabled])
+
+    return {
+        paymentMethods,
+        loading,
+        error
+    }
+}