feat: adding google pay on pdp

Adyen · Oct 24, 2024 · 605ae32 · 605ae32
1 parent 6f9d4db
commit 605ae32
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 62 deletions.
diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/googlePayExpress.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/googlePayExpress.js
@@ -1,61 +1,3 @@
-const {
-  checkIfExpressMethodsAreReady,
-  updateLoadedExpressMethods,
-  getPaymentMethods,
-} = require('./commons');
-const { GOOGLE_PAY } = require('./constants');
+const googlePayExpressModule = require('./googlePayExpressCommon');
 
-let checkout;
-let paymentMethodsResponse;
-
-async function initializeCheckout() {
-  const paymentMethods = await getPaymentMethods();
-  paymentMethodsResponse = await paymentMethods.json();
-  const applicationInfo = paymentMethodsResponse?.applicationInfo;
-  checkout = await AdyenCheckout({
-    environment: window.environment,
-    clientKey: window.clientKey,
-    locale: window.locale,
-    analytics: {
-      analyticsData: { applicationInfo },
-    },
-  });
-}
-
-async function init() {
-  initializeCheckout()
-    .then(async () => {
-      const googlePayPaymentMethod =
-        paymentMethodsResponse?.AdyenPaymentMethods?.paymentMethods.find(
-          (pm) => pm.type === GOOGLE_PAY,
-        );
-      if (!googlePayPaymentMethod) {
-        updateLoadedExpressMethods(GOOGLE_PAY);
-        checkIfExpressMethodsAreReady();
-        return;
-      }
-
-      const googlePayConfig = googlePayPaymentMethod.configuration;
-      const googlePayButtonConfig = {
-        showPayButton: true,
-        buttonType: 'buy',
-        configuration: googlePayConfig,
-        returnUrl: window.returnUrl,
-        isExpress: true,
-      };
-
-      const googlePayButton = checkout.create(
-        GOOGLE_PAY,
-        googlePayButtonConfig,
-      );
-      googlePayButton.mount('#googlepay-container');
-      updateLoadedExpressMethods(GOOGLE_PAY);
-      checkIfExpressMethodsAreReady();
-    })
-    .catch(() => {
-      updateLoadedExpressMethods(GOOGLE_PAY);
-      checkIfExpressMethodsAreReady();
-    });
-}
-
-init();
+googlePayExpressModule.init();
diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/googlePayExpressCommon.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/googlePayExpressCommon.js
@@ -0,0 +1,63 @@
+const {
+  checkIfExpressMethodsAreReady,
+  updateLoadedExpressMethods,
+  getPaymentMethods,
+} = require('./commons');
+const { GOOGLE_PAY } = require('./constants');
+
+let checkout;
+let paymentMethodsResponse;
+
+async function initializeCheckout() {
+  const paymentMethods = await getPaymentMethods();
+  paymentMethodsResponse = await paymentMethods.json();
+  const applicationInfo = paymentMethodsResponse?.applicationInfo;
+  checkout = await AdyenCheckout({
+    environment: window.environment,
+    clientKey: window.clientKey,
+    locale: window.locale,
+    analytics: {
+      analyticsData: { applicationInfo },
+    },
+  });
+}
+
+async function init() {
+  initializeCheckout()
+    .then(async () => {
+      const googlePayPaymentMethod =
+        paymentMethodsResponse?.AdyenPaymentMethods?.paymentMethods.find(
+          (pm) => pm.type === GOOGLE_PAY,
+        );
+      if (!googlePayPaymentMethod) {
+        updateLoadedExpressMethods(GOOGLE_PAY);
+        checkIfExpressMethodsAreReady();
+        return;
+      }
+
+      const googlePayConfig = googlePayPaymentMethod.configuration;
+      const googlePayButtonConfig = {
+        showPayButton: true,
+        buttonType: 'buy',
+        configuration: googlePayConfig,
+        returnUrl: window.returnUrl,
+        isExpress: true,
+      };
+
+      const googlePayButton = checkout.create(
+        GOOGLE_PAY,
+        googlePayButtonConfig,
+      );
+      googlePayButton.mount('.googlepay');
+      updateLoadedExpressMethods(GOOGLE_PAY);
+      checkIfExpressMethodsAreReady();
+    })
+    .catch(() => {
+      updateLoadedExpressMethods(GOOGLE_PAY);
+      checkIfExpressMethodsAreReady();
+    });
+}
+
+module.exports = {
+  init,
+};
diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/product/expressPayments.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/product/expressPayments.js
@@ -1,5 +1,6 @@
 const applePayExpressModule = require('../applePayExpressCommon');
-const { APPLE_PAY } = require('../constants');
+const googlePayExpressModule = require('../googlePayExpressCommon');
+const { APPLE_PAY, GOOGLE_PAY } = require('../constants');
 
 function getProductForm(product) {
   const $productInputEl = document.createElement('input');
@@ -24,6 +25,7 @@ function getValueForCurrency(amount, currency) {
 function getExpressPaymentButtons(product) {
   const expressMethodsConfig = {
     [APPLE_PAY]: window.isApplePayExpressOnPdpEnabled === 'true',
+    [GOOGLE_PAY]: window.isGooglePayExpressOnPdpEnabled === 'true',
   };
   const enabledExpressPaymentButtons = [];
   Object.keys(expressMethodsConfig).forEach((key) => {
@@ -43,6 +45,10 @@ function renderApplePayButton() {
   applePayExpressModule.init();
 }
 
+function renderGooglePayButton() {
+  googlePayExpressModule.init();
+}
+
 function renderExpressPaymentButtons() {
   $('body').on('product:renderExpressPaymentButtons', (e, response) => {
     const { product = {} } = response;
@@ -61,6 +67,7 @@ function renderExpressPaymentButtons() {
         $productForm,
       );
       renderApplePayButton();
+      renderGooglePayButton();
     } else {
       $expressPaymentButtonsContainer.replaceChildren();
     }

diff --git a/src/cartridges/app_adyen_SFRA/cartridge/templates/default/cart/checkoutButtons.isml b/src/cartridges/app_adyen_SFRA/cartridge/templates/default/cart/checkoutButtons.isml
@@ -86,7 +86,7 @@
                 <div data-method="applepay" class="expressComponent applepay" style="padding:0"></div>
                 <div data-method="amazonpay" class="expressComponent" id="amazonpay-container"></div>
                 <div data-method="paypal" class="expressComponent" id="paypal-container" style="padding:0"></div>
-                <div data-method="googlepay" class="expressComponent" id="googlepay-container" style="padding:0"></div>
+                <div data-method="googlepay" class="expressComponent googlepay" style="padding:0"></div>
             </div>
             <script src="${URLUtils.httpsStatic('/js/expressPaymentMethodsVisibility.js')}" type="text/javascript"></script>
         </isif>

diff --git a/...p_adyen_SFRA/cartridge/templates/default/product/components/addToCartButtonExtension.isml b/...p_adyen_SFRA/cartridge/templates/default/product/components/addToCartButtonExtension.isml
@@ -17,6 +17,7 @@
    window.createTemporaryBasketUrl = "${URLUtils.https('Adyen-CreateTemporaryBasket')}";
    window.isExpressPdp = true;
    window.isApplePayExpressOnPdpEnabled = "${AdyenConfigs.isApplePayExpressOnPdpEnabled()}";
+   window.isGooglePayExpressOnPdpEnabled = "${AdyenConfigs.isGooglePayExpressOnPdpEnabled()}";
    window.fractionDigits = "${AdyenHelper.getFractionDigits()}"
 </script>