From e27512913072a4aa404cd9974adc8aa7f0374254 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Fri, 5 Apr 2024 14:24:47 +0200
Subject: [PATCH 01/12] pass created order on to approve

---
 src/App.tsx            | 2 +-
 src/app/usePayment.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c8002bb..2f59451 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@ const CC_FRONTEND_EXTENSION_VERSION: string = "devjonathanyeboah";
 //const CC_FRONTEND_EXTENSION_VERSION: string = "devliudmylamasliuk";
 const FRONTASTIC_SESSION: string =
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiNzQ0NTUxY2YtMWVjMS00OWJmLWIwOTMtM2I1YTEzMGU3MTE0IiwiY2FydElkIjoiZWFmZWVkNmQtZGI4Mi00ODk3LTg0MzUtNmNiYTc0YzI0YzcxIn0.NheVsGS4gqwGdxKDU4GouDKfT3cuS6NIyK8rwcDpQeY";
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiJjMmU2NjdhZi05N2QyLTQ3NjEtOTY5ZS00M2JlZTc4MGNlNjQifQ.JZn7DTYnwjNF9xSnvTdbne0xw1Kl5pG1oCPRfi9wY5Y";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");
 
diff --git a/src/app/usePayment.tsx b/src/app/usePayment.tsx
index 5163520..222a416 100644
--- a/src/app/usePayment.tsx
+++ b/src/app/usePayment.tsx
@@ -247,7 +247,9 @@ export const PaymentProvider: FC<
               oldOrderData.googlePayData.paymentData.paymentMethodData,
           });
           if (status === "APPROVED") {
-            onSuccess(orderData);
+            handleOnApprove({ orderID: orderData.id }).then(() =>
+              onSuccess(orderData)
+            );
           } else {
             return "";
           }

From 77f9761132ec88c62fe87889c19553164b18d1da Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 15 Apr 2024 15:56:19 +0200
Subject: [PATCH 02/12] #36077 google pay more options and preliminary 3ds
 handling

---
 src/App.tsx                                   |  5 +-
 src/app/usePayment.tsx                        | 41 +++++++++-
 src/components/GooglePay/GooglePay.tsx        |  4 +
 src/components/GooglePay/GooglePayButton.tsx  |  2 +
 src/components/GooglePay/GooglePayMask.tsx    | 78 ++++++++++---------
 .../RenderTemplate/RenderTemplate.tsx         |  2 +
 src/services/getOrder.ts                      | 31 ++++++++
 src/types/index.ts                            | 15 ++++
 storybook/stories/constants.jsx               |  4 +-
 9 files changed, 140 insertions(+), 42 deletions(-)
 create mode 100644 src/services/getOrder.ts

diff --git a/src/App.tsx b/src/App.tsx
index 2f59451..60db7ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,9 @@ const CC_FRONTEND_EXTENSION_VERSION: string = "devjonathanyeboah";
 //const CC_FRONTEND_EXTENSION_VERSION: string = "devliudmylamasliuk";
 const FRONTASTIC_SESSION: string =
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiNzQ0NTUxY2YtMWVjMS00OWJmLWIwOTMtM2I1YTEzMGU3MTE0IiwiY2FydElkIjoiZWFmZWVkNmQtZGI4Mi00ODk3LTg0MzUtNmNiYTc0YzI0YzcxIn0.NheVsGS4gqwGdxKDU4GouDKfT3cuS6NIyK8rwcDpQeY";
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
+  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
+  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOGUzM2E4YmMtODAyNy00MjYxLWI0ZGMtYWM0YTQ3ZTIzZTE1IiwiY2FydElkIjoiN2I2NjM4MTYtYzk0Yi00MzIzLWI0ZTgtMmVjZmU1ZTJiNWJhIn0.rkW35uUhEGyaQopayLceH-YoHuEuw26Kd5690t6L_EY";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiMTYwYzFkM2EtZDZlNC00ZTc3LWJlZWMtZTg5OThkM2JiMjEwIiwiY2FydElkIjoiYWFjMGVhZTEtNDg4ZC00YTZjLTgzMWMtYjE3ZjRmMWE1NzllIn0.03vHCrgCfgmp4jC1g1w7yFaQCLYnF1pDVnirqxIxP1c";
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");
 
@@ -70,6 +72,7 @@ function App() {
   const params = {
     ...commonParams,
     createOrderUrl: `${ENDPOINT_URL}/payment/createPayPalOrder`,
+    getOrderUrl: `${ENDPOINT_URL}/payment/getPayPalOrder`,
     authorizeOrderUrl: `${ENDPOINT_URL}/payment/authorizePayPalOrder`,
     onApproveUrl: `${ENDPOINT_URL}/payment/capturePayPalOrder`,
     shippingMethodId: "da416140-39bf-4677-8882-8b6cab23d981",
diff --git a/src/app/usePayment.tsx b/src/app/usePayment.tsx
index 222a416..cce0b37 100644
--- a/src/app/usePayment.tsx
+++ b/src/app/usePayment.tsx
@@ -40,6 +40,7 @@ import { getClientToken } from "../services/getClientToken";
 import { getActionIndex } from "../components/CardFields/constants";
 import { useTranslation } from "react-i18next";
 import { handleResponseError } from "../messages/errorMessages";
+import { getOrder } from "../services/getOrder";
 
 const PaymentInfoInitialObject = {
   version: 0,
@@ -113,6 +114,7 @@ export const PaymentProvider: FC<
 
   createPaymentUrl,
   createOrderUrl,
+  getOrderUrl,
   authorizeOrderUrl,
   authenticateThreeDSOrderUrl,
 
@@ -210,7 +212,7 @@ export const PaymentProvider: FC<
         !!setRatepayMessage,
         enableVaulting
       );
-      console.log(relevantOrderData);
+
       const createOrderResult = await createOrder(
         requestHeader,
         createOrderUrl,
@@ -220,7 +222,16 @@ export const PaymentProvider: FC<
           ...relevantOrderData,
         }
       );
-      console.log(createOrderResult);
+
+      if (
+        !createOrderResult ||
+        (createOrderResult && createOrderResult.ok === false)
+      ) {
+        notify("Error", "something went wrong");
+        isLoading(false);
+        return "";
+      }
+
       const oldOrderData = orderData;
 
       if (createOrderResult) {
@@ -250,6 +261,32 @@ export const PaymentProvider: FC<
             handleOnApprove({ orderID: orderData.id }).then(() =>
               onSuccess(orderData)
             );
+          } else if (status === "PAYER_ACTION_REQUIRED") {
+            //@ts-ignore
+            paypal
+              .Googlepay()
+              .initiatePayerAction({ orderId: id })
+              .then(async (data: any) => {
+                console.log("===== Payer Action Completed =====");
+                console.log(data);
+                const orderResponse = await getOrder(
+                  requestHeader,
+                  getOrderUrl || "",
+                  paymentInfo.id,
+                  latestPaymentVersion
+                ).then((res: any) => console.log(res));
+                console.log("===== 3DS Contingency Result Fetched =====");
+                console.log(
+                  //@ts-ignore
+                  orderResponse?.payment_source?.google_pay?.card
+                    ?.authentication_result
+                );
+                /* CAPTURE THE ORDER*/
+
+                /*handleOnApprove({ orderID: orderData.id }).then(() =>
+                  onSuccess(orderData)
+                );*/
+              });
           } else {
             return "";
           }
diff --git a/src/components/GooglePay/GooglePay.tsx b/src/components/GooglePay/GooglePay.tsx
index 723feb5..f95275a 100644
--- a/src/components/GooglePay/GooglePay.tsx
+++ b/src/components/GooglePay/GooglePay.tsx
@@ -14,6 +14,7 @@ export const GooglePay: React.FC<
   shippingMethodId,
   cartInformation,
   createOrderUrl,
+  getOrderUrl,
   onApproveUrl,
   purchaseCallback,
   getUserInfoUrl,
@@ -24,6 +25,7 @@ export const GooglePay: React.FC<
   allowedCardAuthMethods,
   callbackIntents,
   environment,
+  totalPriceStatus,
 }) => {
   return (
     <RenderTemplate
@@ -35,6 +37,7 @@ export const GooglePay: React.FC<
       shippingMethodId={shippingMethodId}
       cartInformation={cartInformation}
       createOrderUrl={createOrderUrl}
+      getOrderUrl={getOrderUrl}
       onApproveUrl={onApproveUrl}
       purchaseCallback={purchaseCallback}
       getUserInfoUrl={getUserInfoUrl}
@@ -47,6 +50,7 @@ export const GooglePay: React.FC<
         apiVersion={apiVersion}
         apiVersionMinor={apiVersionMinor}
         environment={environment}
+        totalPriceStatus={totalPriceStatus}
       />
     </RenderTemplate>
   );
diff --git a/src/components/GooglePay/GooglePayButton.tsx b/src/components/GooglePay/GooglePayButton.tsx
index a9f9c46..6d2fc38 100644
--- a/src/components/GooglePay/GooglePayButton.tsx
+++ b/src/components/GooglePay/GooglePayButton.tsx
@@ -14,6 +14,7 @@ export const GooglePayButton: React.FC<GooglePayOptionsType> = ({
   allowedCardAuthMethods,
   callbackIntents,
   environment,
+  totalPriceStatus,
 }) => {
   const { isLoading } = useLoader();
   const scriptUrl: string = "https://pay.google.com/gp/p/js/pay.js";
@@ -46,6 +47,7 @@ export const GooglePayButton: React.FC<GooglePayOptionsType> = ({
       apiVersion={apiVersion}
       apiVersionMinor={apiVersionMinor}
       environment={environment}
+      totalPriceStatus={totalPriceStatus}
     />
   ) : (
     <></>
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index fdbb9fd..421c15a 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -1,25 +1,37 @@
 import React, { useEffect, useRef, useState } from "react";
 import { usePayment } from "../../app/usePayment";
 import { GooglePayOptionsType } from "../../types";
+import { errorFunc } from "../errorNotification";
+import { useLoader } from "../../app/useLoader";
+import { useNotifications } from "../../app/useNotifications";
+import { useTranslation } from "react-i18next";
 
 export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
-  apiVersion,
-  apiVersionMinor,
+  apiVersion = 2,
+  apiVersionMinor = 0,
   allowedCardNetworks,
   allowedCardAuthMethods,
   callbackIntents,
   environment = "TEST",
+  totalPriceStatus = "FINAL",
+  buttonColor = "default",
+  buttonType = "buy",
+  buttonRadius,
+  buttonSizeMode = "static",
 }) => {
   const googlePayButton = useRef<HTMLDivElement>(null);
   const [paymentsClient, setPaymentsClient] = useState<{ [key: string]: any }>(
     {}
   );
   const [buttonCreated, setButtonCreated] = useState(false);
-  const { handleCreateOrder, handleOnApprove } = usePayment();
+  const { handleCreateOrder, paymentInfo } = usePayment();
+  const { isLoading } = useLoader();
+  const { notify } = useNotifications();
+  const { t } = useTranslation();
 
   const baseRequest = {
-    apiVersion: apiVersion || 2,
-    apiVersionMinor: apiVersionMinor || 0,
+    apiVersion: apiVersion,
+    apiVersionMinor: apiVersionMinor,
   };
 
   const baseCardPaymentMethod = {
@@ -30,45 +42,24 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
     },
   };
 
-  const tmpStaticTransaction = () => {
-    return {
-      displayItems: [
-        {
-          label: "Subtotal",
-          type: "SUBTOTAL",
-          price: "1.00",
-        },
-        {
-          label: "tax",
-          type: "TAX",
-          price: "0.00",
-        },
-      ],
-      countryCode: "DE",
-      currencyCode: "EUR",
-      totalPriceStatus: "FINAL",
-      totalPrice: "1.00",
-    };
-  };
-
   const getGoogleTransactionInfo = () => {
     return {
-      currencyCode: "EUR",
-      totalPriceStatus: "FINAL",
-      totalPrice: "1.00",
+      currencyCode: paymentInfo,
+      totalPriceStatus: totalPriceStatus,
+      totalPrice: paymentInfo.amount.toString(),
+      //transactionId: paymentInfo.id,
     };
   };
 
   const processPayment = async (paymentData: { [key: string]: any }) => {
     try {
-      const { currencyCode, totalPrice } = tmpStaticTransaction();
+      const { currency, amount } = paymentInfo;
       const order = {
-        //intent: "CAPTURE",
         purchase_units: [
           {
             amount: {
-              currency_code: currencyCode,
-              value: totalPrice,
+              currency_code: currency,
+              value: amount.toString(),
             },
           },
         ],
@@ -77,6 +68,7 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
 
       handleCreateOrder({ googlePayData: order, paymentSource: "google_pay" });
     } catch (err: any) {
+      errorFunc(err, isLoading, notify, t);
       return {
         transactionState: "ERROR",
         error: {
@@ -116,7 +108,6 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
     }
   }, [paymentsClient]);
 
-  // @todo proper look, now just copypasta
   const getGooglePaymentDataRequest = async () => {
     // @ts-ignore
     const googlePayConfig = await paypal.Googlepay().config();
@@ -137,17 +128,30 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
 
   const onGooglePaymentButtonClicked = async () => {
     const paymentDataRequest = await getGooglePaymentDataRequest();
-    console.log(paymentDataRequest);
     paymentsClient.loadPaymentData(paymentDataRequest);
   };
 
   const addGooglePayButton = () => {
     if (buttonCreated) return;
+    const buttonOptions: Record<string, any> = {
+      buttonColor: buttonColor,
+      buttonType: buttonType,
+      buttonSizeMode: buttonSizeMode,
+    };
+    if (buttonRadius) {
+      buttonOptions.buttonRadius = buttonRadius;
+    }
     const button = paymentsClient.createButton({
       onClick: () => {
-        onGooglePaymentButtonClicked();
+        isLoading(true);
+        onGooglePaymentButtonClicked()
+          .then(() => isLoading(false))
+          .catch((err: Record<string, never>) => {
+            errorFunc(err, isLoading, notify, t);
+          });
       },
       allowedPaymentMethods: [baseCardPaymentMethod],
+      ...buttonOptions,
     });
     if (googlePayButton.current) {
       googlePayButton.current.appendChild(button);
@@ -169,7 +173,7 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
         }
       })
       .catch((err: { [key: string]: any }) => {
-        console.error(err);
+        errorFunc(err, isLoading, notify, t);
       });
   };
   return (
diff --git a/src/components/RenderTemplate/RenderTemplate.tsx b/src/components/RenderTemplate/RenderTemplate.tsx
index effe428..7e86026 100644
--- a/src/components/RenderTemplate/RenderTemplate.tsx
+++ b/src/components/RenderTemplate/RenderTemplate.tsx
@@ -19,6 +19,7 @@ export const RenderTemplate: FC<
   getSettingsUrl,
   getClientTokenUrl,
   createOrderUrl,
+  getOrderUrl,
   authorizeOrderUrl,
   getUserInfoUrl,
   removePaymentTokenUrl,
@@ -52,6 +53,7 @@ export const RenderTemplate: FC<
             getClientTokenUrl={getClientTokenUrl}
             getSettingsUrl={getSettingsUrl}
             createOrderUrl={createOrderUrl}
+            getOrderUrl={getOrderUrl}
             onApproveUrl={onApproveUrl}
             requestHeader={requestHeader}
             shippingMethodId={shippingMethodId}
diff --git a/src/services/getOrder.ts b/src/services/getOrder.ts
new file mode 100644
index 0000000..e613e9b
--- /dev/null
+++ b/src/services/getOrder.ts
@@ -0,0 +1,31 @@
+import { makeRequest } from "../api";
+
+import {
+  RequestHeader,
+  CreateOrderRequest,
+  CreateOrderResponse,
+} from "../types";
+
+export const getOrder = async (
+  requestHeader: RequestHeader,
+  url: string,
+  paymentId: string,
+  paymentVersion: number
+) => {
+  try {
+    const data: CreateOrderRequest = {
+      paymentId,
+      paymentVersion,
+    };
+
+    return await makeRequest<CreateOrderResponse, CreateOrderRequest>(
+      requestHeader,
+      url,
+      "POST",
+      data
+    );
+  } catch (error) {
+    console.warn(error);
+    return false;
+  }
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index e6ee806..8dba456 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -64,6 +64,7 @@ export type OrderData = {
 export type CreateOrderResponse = {
   orderData: OrderData;
   paymentVersion: number;
+  ok?: boolean;
 };
 
 export type OnApproveRequest = {
@@ -92,6 +93,7 @@ export type GeneralComponentsProps = {
   createPaymentUrl: string;
   getSettingsUrl: string;
   createOrderUrl?: string;
+  getOrderUrl?: string;
   onApproveUrl?: string;
   onApproveRedirectionUrl?: string;
   authorizeOrderUrl?: string;
@@ -436,4 +438,17 @@ export type GooglePayOptionsType = {
   callbackIntents: string[];
   apiVersion?: number;
   apiVersionMinor?: number;
+  totalPriceStatus?: "FINAL" | "ESTIMATED";
+  buttonColor?: "default" | "white" | "black";
+  buttonType?:
+    | "book"
+    | "buy"
+    | "checkout"
+    | "donate"
+    | "order"
+    | "pay"
+    | "plain"
+    | "subscribe";
+  buttonRadius?: number;
+  buttonSizeMode?: "static" | "fill";
 };
diff --git a/storybook/stories/constants.jsx b/storybook/stories/constants.jsx
index e149088..47bdd62 100644
--- a/storybook/stories/constants.jsx
+++ b/storybook/stories/constants.jsx
@@ -30,8 +30,8 @@ export const options = {
 
 export const requestHeader = {
   "Frontastic-Session":
-    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiNjRhYjAyYjAtYzJjZi00OTNiLWIwMTQtNzU4Njg0N2M0NWI1IiwiYWNjb3VudCI6eyJhY2NvdW50SWQiOiJmMjJhNGZlMy1jMmI4LTQ4MDEtODIwOC00MTRkMjA2MjBlMGIiLCJlbWFpbCI6Im1hamlkLmFiYmFzaUBtZWRpYW9wdC5kZSIsInNhbHV0YXRpb24iOiIiLCJmaXJzdE5hbWUiOiJNYWppZCIsImxhc3ROYW1lIjoiQWJiYXNpIiwiYmlydGhkYXkiOiIxOTg5LTAzLTA1VDAwOjAwOjAwLjAwMFoiLCJjb25maXJtZWQiOnRydWUsImFkZHJlc3NlcyI6W3siYWRkcmVzc0lkIjoiamJUSlhtM00iLCJmaXJzdE5hbWUiOiJNYWppZCIsImxhc3ROYW1lIjoiQWJiYXNpIiwic3RyZWV0TmFtZSI6IkhvY2hzdHJhXHUwMGRmZSAzNyIsInN0cmVldE51bWJlciI6IkhvY2hzdHJhXHUwMGRmZSAzNyIsInBvc3RhbENvZGUiOiIxMzM1NyIsImNpdHkiOiJERSIsImNvdW50cnkiOiJERSIsInBob25lIjoiNTk5MzU3NTYyIiwiaXNEZWZhdWx0QmlsbGluZ0FkZHJlc3MiOmZhbHNlLCJpc0RlZmF1bHRTaGlwcGluZ0FkZHJlc3MiOmZhbHNlfSx7ImFkZHJlc3NJZCI6ImtyelI3bTBRIiwiZmlyc3ROYW1lIjoiTWFqaWQiLCJsYXN0TmFtZSI6IkFiYmFzaSIsInN0cmVldE5hbWUiOiJDb3VudHkgU3QuIE1pYW1pIiwic3RyZWV0TnVtYmVyIjoiNDMyIiwicG9zdGFsQ29kZSI6IjMzMDE4IiwiY2l0eSI6IlVTIiwiY291bnRyeSI6IkRFIiwicGhvbmUiOiI1OTkzNTc1NjIiLCJpc0RlZmF1bHRCaWxsaW5nQWRkcmVzcyI6dHJ1ZSwiaXNEZWZhdWx0U2hpcHBpbmdBZGRyZXNzIjp0cnVlfV19LCJjYXJ0SWQiOiI0YjExZDY4Zi02MmE3LTRmM2EtODk3Yi1kZGRiYjY5NTcyZGYifQ.-vsEmQwbjUM-XT2LDo07wNQJ2YI0qNIgQxWRIKskhro",
-  "Commercetools-Frontend-Extension-Version": "devmajidabbasi",
+    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI1Nzk5NWIyYy1lZmEzLTRkYjItYWQyYi0wN2EyMzg1M2UxNjYifQ.asS8mWYpg11E1HPVMTZxtYSxwI6fUAcdLRuOQU4w13k",
+  "Commercetools-Frontend-Extension-Version": "devjonathanyeboah",
 };
 
 const baseUrl = "https://poc-mediaopt2.frontastic.rocks/frontastic/action/";

From 230e9329432324a81ca45c256151655f04ab8c5c Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Fri, 26 Apr 2024 10:29:16 +0200
Subject: [PATCH 03/12] #36078 unit tests

---
 src/components/GooglePay/GooglePay.test.tsx   |  9 ++++++
 .../GooglePay/GooglePayButton.test.tsx        | 28 +++++++++++++++++++
 .../GooglePay/GooglePayMask.test.tsx          | 15 ++++++++++
 src/components/GooglePay/constants.ts         | 18 ++++++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 src/components/GooglePay/GooglePay.test.tsx
 create mode 100644 src/components/GooglePay/GooglePayButton.test.tsx
 create mode 100644 src/components/GooglePay/GooglePayMask.test.tsx
 create mode 100644 src/components/GooglePay/constants.ts

diff --git a/src/components/GooglePay/GooglePay.test.tsx b/src/components/GooglePay/GooglePay.test.tsx
new file mode 100644
index 0000000..c7c4e9a
--- /dev/null
+++ b/src/components/GooglePay/GooglePay.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import { GooglePay } from "./GooglePay";
+
+import { GooglePayTestParams } from "./constants";
+
+test("GooglePay is shown", () => {
+  render(<GooglePay {...GooglePayTestParams} />);
+  expect(screen).toBeDefined();
+});
diff --git a/src/components/GooglePay/GooglePayButton.test.tsx b/src/components/GooglePay/GooglePayButton.test.tsx
new file mode 100644
index 0000000..5acccb6
--- /dev/null
+++ b/src/components/GooglePay/GooglePayButton.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { GooglePayTestParams } from "./constants";
+import { GooglePayMask } from "./GooglePayMask";
+
+const MockText: string = "GooglePayMask";
+jest.mock("./GooglePayMask", () => ({
+  GooglePayMask: () => <div>{MockText}</div>,
+}));
+
+jest.mock("../../app/usePayment", () => ({
+  usePayment: () => {
+    return { paymentInfo: { id: "123" } };
+  },
+}));
+
+jest.mock("../../app/useHandleCreatePayment", () => ({
+  useHandleCreatePayment: () => {
+    return {};
+  },
+}));
+
+test("GooglePayButton is shown", () => {
+  render(<GooglePayMask {...GooglePayTestParams} />);
+  expect(screen).toBeDefined();
+
+  const googlePayMask = screen.getByText(MockText);
+  expect(googlePayMask).toBeDefined();
+});
diff --git a/src/components/GooglePay/GooglePayMask.test.tsx b/src/components/GooglePay/GooglePayMask.test.tsx
new file mode 100644
index 0000000..f50ebb8
--- /dev/null
+++ b/src/components/GooglePay/GooglePayMask.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { GooglePayTestParams } from "./constants";
+import { GooglePayMask } from "./GooglePayMask";
+
+/*jest.mock("../../app/loadScript", () => ({
+  __esModule: true,
+  default: () => Promise.resolve()
+}));*/
+
+test("GooglePayMask is shown", async () => {
+  render(<GooglePayMask {...GooglePayTestParams} />);
+  await waitFor(() => {
+    expect(screen).toBeDefined();
+  });
+});
diff --git a/src/components/GooglePay/constants.ts b/src/components/GooglePay/constants.ts
new file mode 100644
index 0000000..ee46b35
--- /dev/null
+++ b/src/components/GooglePay/constants.ts
@@ -0,0 +1,18 @@
+import { testParams, testRequestHeader, testOptions } from "../../constants";
+import {
+  GooglePayOptionsType,
+  SmartComponentsProps,
+  ThreeDSVerification,
+} from "../../types";
+
+export const GooglePayTestParams: SmartComponentsProps & GooglePayOptionsType =
+  {
+    ...testParams,
+    requestHeader: testRequestHeader,
+    options: { ...testOptions, components: "googlepay" },
+    environment: "TEST" as "TEST",
+    allowedCardNetworks: ["MASTERCARD", "VISA"],
+    allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
+    callbackIntents: ["PAYMENT_AUTHORIZATION"],
+    verificationMethod: "SCA_ALWAYS" as ThreeDSVerification,
+  };

From 474595c3842b9c5004acc5645b6cda158a5aa2c8 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Fri, 26 Apr 2024 10:29:49 +0200
Subject: [PATCH 04/12] #36081 documentation

---
 README.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/README.md b/README.md
index 40bcd75..6df18fa 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,29 @@ PayPal components props are based on PayPal props and you can see them on PayPal
 
 PayPal messages props are based on PayPalMessages props and you can see them on PayPal official documentation [_PayPalMessagesComponentOptions_](https://github.com/paypal/react-paypal-js/blob/main/src/components/PayPalMessages.tsx).
 
+
+### GooglePay
+Have a look at [Googles specification](https://developers.google.com/pay/api/web/reference/request-objects) for a detailed explanation of the options
+- **environment**: `string`  
+    "TEST" or "PRODUCTION";
+- **allowedCardNetworks**: `string[]`
+    One or more card networks that you support, also supported by the Google Pay API.
+- **allowedCardAuthMethods**: `string`  
+    "PAN_ONLY" (cards on file) and "CRYPTOGRAM_3DS" (Android powered device token)
+- **callbackIntents**: `string[]`  
+    Specifies intents for PaymentDataCallback
+- **apiVersion**: `number`  
+    Major API version
+- **apiVersionMinor**: `number`  
+    Minor API version
+- **totalPriceStatus**: `string`  
+    "FINAL" or "ESTIMATED"
+- **buttonColor**: `string`
+- **buttonType**: `string`
+- **buttonRadius**: `number`
+- **buttonSizeMode**: `string`
+- **verificationMethod**: `string`
+
 ### CardFields
 
 - **authenticateThreeDSOrderUrl**: `string`

From cd2a4e7373d82b9fdff997acc8e14ca8938e54b6 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:21:21 +0200
Subject: [PATCH 05/12] #36077 error handling

---
 src/App.tsx                                  |  5 ++++-
 src/components/GooglePay/GooglePay.tsx       |  2 ++
 src/components/GooglePay/GooglePayButton.tsx |  2 ++
 src/components/GooglePay/GooglePayMask.tsx   | 11 +++++++++--
 src/types/index.ts                           |  3 ++-
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 60db7ed..9c722b5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import {
   GooglePayOptionsType,
   PayUponInvoiceProps,
   SmartComponentsProps,
+  ThreeDSVerification,
 } from "./types";
 import { GooglePay } from "./components/GooglePay";
 
@@ -24,7 +25,8 @@ const FRONTASTIC_SESSION: string =
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiNzQ0NTUxY2YtMWVjMS00OWJmLWIwOTMtM2I1YTEzMGU3MTE0IiwiY2FydElkIjoiZWFmZWVkNmQtZGI4Mi00ODk3LTg0MzUtNmNiYTc0YzI0YzcxIn0.NheVsGS4gqwGdxKDU4GouDKfT3cuS6NIyK8rwcDpQeY";
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOGUzM2E4YmMtODAyNy00MjYxLWI0ZGMtYWM0YTQ3ZTIzZTE1IiwiY2FydElkIjoiN2I2NjM4MTYtYzk0Yi00MzIzLWI0ZTgtMmVjZmU1ZTJiNWJhIn0.rkW35uUhEGyaQopayLceH-YoHuEuw26Kd5690t6L_EY";
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiMTYwYzFkM2EtZDZlNC00ZTc3LWJlZWMtZTg5OThkM2JiMjEwIiwiY2FydElkIjoiYWFjMGVhZTEtNDg4ZC00YTZjLTgzMWMtYjE3ZjRmMWE1NzllIn0.03vHCrgCfgmp4jC1g1w7yFaQCLYnF1pDVnirqxIxP1c";
+  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiMTYwYzFkM2EtZDZlNC00ZTc3LWJlZWMtZTg5OThkM2JiMjEwIiwiY2FydElkIjoiYWFjMGVhZTEtNDg4ZC00YTZjLTgzMWMtYjE3ZjRmMWE1NzllIn0.03vHCrgCfgmp4jC1g1w7yFaQCLYnF1pDVnirqxIxP1c";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiJjNGVhNWE0MS1mMDAzLTQ2OTgtOTUwOS05NmE3ZjUzZTYwOGIifQ.aZB-EwfshtXC77jO4qoVOXbDQgJttRIkE141OVX2GRs";
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");
 
@@ -176,6 +178,7 @@ function App() {
     allowedCardNetworks: ["MASTERCARD", "VISA"],
     allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
     callbackIntents: ["PAYMENT_AUTHORIZATION"],
+    verificationMethod: "SCA_ALWAYS" as ThreeDSVerification,
   };
 
   const paymentMethods: { [index: string]: React.JSX.Element } = {
diff --git a/src/components/GooglePay/GooglePay.tsx b/src/components/GooglePay/GooglePay.tsx
index f95275a..2f87869 100644
--- a/src/components/GooglePay/GooglePay.tsx
+++ b/src/components/GooglePay/GooglePay.tsx
@@ -26,6 +26,7 @@ export const GooglePay: React.FC<
   callbackIntents,
   environment,
   totalPriceStatus,
+  verificationMethod,
 }) => {
   return (
     <RenderTemplate
@@ -51,6 +52,7 @@ export const GooglePay: React.FC<
         apiVersionMinor={apiVersionMinor}
         environment={environment}
         totalPriceStatus={totalPriceStatus}
+        verificationMethod={verificationMethod}
       />
     </RenderTemplate>
   );
diff --git a/src/components/GooglePay/GooglePayButton.tsx b/src/components/GooglePay/GooglePayButton.tsx
index 6d2fc38..4e9ac9e 100644
--- a/src/components/GooglePay/GooglePayButton.tsx
+++ b/src/components/GooglePay/GooglePayButton.tsx
@@ -15,6 +15,7 @@ export const GooglePayButton: React.FC<GooglePayOptionsType> = ({
   callbackIntents,
   environment,
   totalPriceStatus,
+  verificationMethod,
 }) => {
   const { isLoading } = useLoader();
   const scriptUrl: string = "https://pay.google.com/gp/p/js/pay.js";
@@ -48,6 +49,7 @@ export const GooglePayButton: React.FC<GooglePayOptionsType> = ({
       apiVersionMinor={apiVersionMinor}
       environment={environment}
       totalPriceStatus={totalPriceStatus}
+      verificationMethod={verificationMethod}
     />
   ) : (
     <></>
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index 421c15a..b3b434f 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -18,6 +18,7 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
   buttonType = "buy",
   buttonRadius,
   buttonSizeMode = "static",
+  verificationMethod,
 }) => {
   const googlePayButton = useRef<HTMLDivElement>(null);
   const [paymentsClient, setPaymentsClient] = useState<{ [key: string]: any }>(
@@ -66,7 +67,10 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
         paymentData: paymentData,
       };
 
-      handleCreateOrder({ googlePayData: order, paymentSource: "google_pay" });
+      await handleCreateOrder({
+        googlePayData: order,
+        paymentSource: "google_pay",
+      });
     } catch (err: any) {
       errorFunc(err, isLoading, notify, t);
       return {
@@ -128,7 +132,10 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
 
   const onGooglePaymentButtonClicked = async () => {
     const paymentDataRequest = await getGooglePaymentDataRequest();
-    paymentsClient.loadPaymentData(paymentDataRequest);
+    paymentsClient.loadPaymentData(paymentDataRequest).catch((err: any) => {
+      notify("Error", err.statusCode);
+      console.log(err);
+    });
   };
 
   const addGooglePayButton = () => {
diff --git a/src/types/index.ts b/src/types/index.ts
index 8dba456..5f1925b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -110,7 +110,7 @@ export type GeneralComponentsProps = {
   enableVaulting?: boolean;
 } & CartInformationProps;
 
-type ThreeDSVerification = "SCA_ALWAYS" | "SCA_WHEN_REQUIRED";
+export type ThreeDSVerification = "SCA_ALWAYS" | "SCA_WHEN_REQUIRED";
 
 export type HostedFieldsThreeDSAuth = {
   threeDSAuth?: ThreeDSVerification;
@@ -451,4 +451,5 @@ export type GooglePayOptionsType = {
     | "subscribe";
   buttonRadius?: number;
   buttonSizeMode?: "static" | "fill";
+  verificationMethod: ThreeDSVerification;
 };

From d720c908971818fd4690cdb2d66bef3981081e58 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:11:02 +0200
Subject: [PATCH 06/12] #36077 fixed currency code

---
 src/App.tsx                                | 2 +-
 src/components/GooglePay/GooglePayMask.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9c722b5..0cdcf09 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -176,7 +176,7 @@ function App() {
     options: { ...options, components: "googlepay" },
     environment: "TEST" as "TEST",
     allowedCardNetworks: ["MASTERCARD", "VISA"],
-    allowedCardAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
+    allowedCardAuthMethods: ["PAN_ONLY"],
     callbackIntents: ["PAYMENT_AUTHORIZATION"],
     verificationMethod: "SCA_ALWAYS" as ThreeDSVerification,
   };
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index b3b434f..ab0ca31 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -45,7 +45,7 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
 
   const getGoogleTransactionInfo = () => {
     return {
-      currencyCode: paymentInfo,
+      currencyCode: paymentInfo.currency,
       totalPriceStatus: totalPriceStatus,
       totalPrice: paymentInfo.amount.toString(),
       //transactionId: paymentInfo.id,

From 4bd40d4c807faabaed1716d8328f2b514c463b82 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 29 Apr 2024 15:12:39 +0200
Subject: [PATCH 07/12] #36077 added verification method

---
 src/App.tsx                                | 2 +-
 src/app/usePayment.tsx                     | 6 ++++++
 src/components/GooglePay/GooglePayMask.tsx | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0cdcf09..1e794a2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,7 +26,7 @@ const FRONTASTIC_SESSION: string =
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOGUzM2E4YmMtODAyNy00MjYxLWI0ZGMtYWM0YTQ3ZTIzZTE1IiwiY2FydElkIjoiN2I2NjM4MTYtYzk0Yi00MzIzLWI0ZTgtMmVjZmU1ZTJiNWJhIn0.rkW35uUhEGyaQopayLceH-YoHuEuw26Kd5690t6L_EY";
   //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiMTYwYzFkM2EtZDZlNC00ZTc3LWJlZWMtZTg5OThkM2JiMjEwIiwiY2FydElkIjoiYWFjMGVhZTEtNDg4ZC00YTZjLTgzMWMtYjE3ZjRmMWE1NzllIn0.03vHCrgCfgmp4jC1g1w7yFaQCLYnF1pDVnirqxIxP1c";
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiJjNGVhNWE0MS1mMDAzLTQ2OTgtOTUwOS05NmE3ZjUzZTYwOGIifQ.aZB-EwfshtXC77jO4qoVOXbDQgJttRIkE141OVX2GRs";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiJhMGFkZjllNy00YmJlLTRiMzgtYmZjZS1mMTdlMWFiZDM0OTcifQ.dFSz1WocjOFGUkHqjQYdkT1DEebN63vp0MrZzIXXoIM";
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");
 
diff --git a/src/app/usePayment.tsx b/src/app/usePayment.tsx
index cce0b37..ec8923b 100644
--- a/src/app/usePayment.tsx
+++ b/src/app/usePayment.tsx
@@ -339,6 +339,12 @@ export const PaymentProvider: FC<
         saveCard
       );
 
+      //@ts-ignore
+      if (onApproveResult.ok === false) {
+        isLoading(false);
+        notify("Error", "There was an error completing the payment");
+        return;
+      }
       const { orderData } = onApproveResult as OnApproveResponse;
       if (orderData.status === "COMPLETED") {
         setShowResult(true);
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index ab0ca31..f460d33 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -70,6 +70,7 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
       await handleCreateOrder({
         googlePayData: order,
         paymentSource: "google_pay",
+        verificationMethod: verificationMethod,
       });
     } catch (err: any) {
       errorFunc(err, isLoading, notify, t);

From ac2483551a9af398bfb7abc8df301f80c32b6c7b Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Thu, 2 May 2024 08:53:32 +0200
Subject: [PATCH 08/12] #36078 unit tests

---
 src/components/GooglePay/GooglePay.test.tsx    | 18 +++++++++++++++---
 .../GooglePay/GooglePayMask.test.tsx           | 10 +++++++---
 src/components/GooglePay/GooglePayMask.tsx     |  6 +++---
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/GooglePay/GooglePay.test.tsx b/src/components/GooglePay/GooglePay.test.tsx
index c7c4e9a..87f0273 100644
--- a/src/components/GooglePay/GooglePay.test.tsx
+++ b/src/components/GooglePay/GooglePay.test.tsx
@@ -1,9 +1,21 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { GooglePay } from "./GooglePay";
 
 import { GooglePayTestParams } from "./constants";
 
-test("GooglePay is shown", () => {
+const MockText: string = "GooglePayMask";
+jest.mock("./GooglePayMask", () => ({
+  GooglePayMask: () => <div>{MockText}</div>,
+}));
+
+jest.mock("../../app/loadScript", () => ({
+  __esModule: true,
+  default: () => Promise.resolve(),
+}));
+
+test("GooglePay is shown", async () => {
   render(<GooglePay {...GooglePayTestParams} />);
-  expect(screen).toBeDefined();
+  await waitFor(() => {
+    expect(screen).toBeDefined();
+  });
 });
diff --git a/src/components/GooglePay/GooglePayMask.test.tsx b/src/components/GooglePay/GooglePayMask.test.tsx
index f50ebb8..395ac27 100644
--- a/src/components/GooglePay/GooglePayMask.test.tsx
+++ b/src/components/GooglePay/GooglePayMask.test.tsx
@@ -2,10 +2,14 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { GooglePayTestParams } from "./constants";
 import { GooglePayMask } from "./GooglePayMask";
 
-/*jest.mock("../../app/loadScript", () => ({
+jest.mock("../../app/loadScript", () => ({
   __esModule: true,
-  default: () => Promise.resolve()
-}));*/
+  default: () => Promise.resolve(),
+}));
+
+jest.mock("./GooglePayMask", () => ({
+  GooglePayMask: () => <div>mock</div>,
+}));
 
 test("GooglePayMask is shown", async () => {
   render(<GooglePayMask {...GooglePayTestParams} />);
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index f460d33..51c253f 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -6,6 +6,9 @@ import { useLoader } from "../../app/useLoader";
 import { useNotifications } from "../../app/useNotifications";
 import { useTranslation } from "react-i18next";
 
+declare const google: any;
+declare const paypal: any;
+
 export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
   apiVersion = 2,
   apiVersionMinor = 0,
@@ -97,7 +100,6 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
 
   useEffect(() => {
     setPaymentsClient(
-      // @ts-ignore
       new google.payments.api.PaymentsClient({
         environment: environment,
         paymentDataCallbacks: {
@@ -114,7 +116,6 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
   }, [paymentsClient]);
 
   const getGooglePaymentDataRequest = async () => {
-    // @ts-ignore
     const googlePayConfig = await paypal.Googlepay().config();
 
     const paymentDataRequest: { [key: string]: any } = Object.assign(
@@ -135,7 +136,6 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
     const paymentDataRequest = await getGooglePaymentDataRequest();
     paymentsClient.loadPaymentData(paymentDataRequest).catch((err: any) => {
       notify("Error", err.statusCode);
-      console.log(err);
     });
   };
 

From 33033385505ab11add9a5ede5febb95e668f3111 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 6 May 2024 09:40:11 +0200
Subject: [PATCH 09/12] #36078 fix git actions

---
 .github/workflows/publish.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index c9f14eb..a21df3e 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -12,8 +12,6 @@ jobs:
     steps:
       - name: checkout
         uses: actions/checkout@v2
-        with:
-          ref: ${GITHUB_REF_NAME}
       - name: node
         uses: actions/setup-node@v2
         with:

From ed92cc6c6d1409148bfa2d59b3e92baf27c761c4 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 13 May 2024 09:28:47 +0200
Subject: [PATCH 10/12] #36077 code review changes

---
 src/App.tsx                                |  5 -----
 src/app/usePayment.tsx                     | 15 +++------------
 src/components/GooglePay/GooglePayMask.tsx |  1 -
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1e794a2..032c797 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,12 +20,7 @@ import {
 import { GooglePay } from "./components/GooglePay";
 
 const CC_FRONTEND_EXTENSION_VERSION: string = "devjonathanyeboah";
-//const CC_FRONTEND_EXTENSION_VERSION: string = "devliudmylamasliuk";
 const FRONTASTIC_SESSION: string =
-  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiNzQ0NTUxY2YtMWVjMS00OWJmLWIwOTMtM2I1YTEzMGU3MTE0IiwiY2FydElkIjoiZWFmZWVkNmQtZGI4Mi00ODk3LTg0MzUtNmNiYTc0YzI0YzcxIn0.NheVsGS4gqwGdxKDU4GouDKfT3cuS6NIyK8rwcDpQeY";
-  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI4OWVhYmFjYS0wM2VmLTRmNWMtYmU2MC0yMTFkY2U2ZDIxMzEifQ.fpwkrtAp796VwjQb8mIHKi4NuqOpAzrfKiJRvfEqsJ0";
-  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOGUzM2E4YmMtODAyNy00MjYxLWI0ZGMtYWM0YTQ3ZTIzZTE1IiwiY2FydElkIjoiN2I2NjM4MTYtYzk0Yi00MzIzLWI0ZTgtMmVjZmU1ZTJiNWJhIn0.rkW35uUhEGyaQopayLceH-YoHuEuw26Kd5690t6L_EY";
-  //"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiMTYwYzFkM2EtZDZlNC00ZTc3LWJlZWMtZTg5OThkM2JiMjEwIiwiY2FydElkIjoiYWFjMGVhZTEtNDg4ZC00YTZjLTgzMWMtYjE3ZjRmMWE1NzllIn0.03vHCrgCfgmp4jC1g1w7yFaQCLYnF1pDVnirqxIxP1c";
   "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiJhMGFkZjllNy00YmJlLTRiMzgtYmZjZS1mMTdlMWFiZDM0OTcifQ.dFSz1WocjOFGUkHqjQYdkT1DEebN63vp0MrZzIXXoIM";
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");
diff --git a/src/app/usePayment.tsx b/src/app/usePayment.tsx
index ec8923b..9a1f29e 100644
--- a/src/app/usePayment.tsx
+++ b/src/app/usePayment.tsx
@@ -266,26 +266,17 @@ export const PaymentProvider: FC<
             paypal
               .Googlepay()
               .initiatePayerAction({ orderId: id })
-              .then(async (data: any) => {
-                console.log("===== Payer Action Completed =====");
-                console.log(data);
+              .then(async () => {
                 const orderResponse = await getOrder(
                   requestHeader,
                   getOrderUrl || "",
                   paymentInfo.id,
                   latestPaymentVersion
                 ).then((res: any) => console.log(res));
-                console.log("===== 3DS Contingency Result Fetched =====");
-                console.log(
-                  //@ts-ignore
-                  orderResponse?.payment_source?.google_pay?.card
-                    ?.authentication_result
-                );
-                /* CAPTURE THE ORDER*/
 
-                /*handleOnApprove({ orderID: orderData.id }).then(() =>
+                handleOnApprove({ orderID: orderData.id }).then(() =>
                   onSuccess(orderData)
-                );*/
+                );
               });
           } else {
             return "";
diff --git a/src/components/GooglePay/GooglePayMask.tsx b/src/components/GooglePay/GooglePayMask.tsx
index 51c253f..6dc1939 100644
--- a/src/components/GooglePay/GooglePayMask.tsx
+++ b/src/components/GooglePay/GooglePayMask.tsx
@@ -51,7 +51,6 @@ export const GooglePayMask: React.FC<GooglePayOptionsType> = ({
       currencyCode: paymentInfo.currency,
       totalPriceStatus: totalPriceStatus,
       totalPrice: paymentInfo.amount.toString(),
-      //transactionId: paymentInfo.id,
     };
   };
 

From ae26efd4ab93278316ce4f08e99d4dfcc1156e57 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 13 May 2024 11:20:48 +0200
Subject: [PATCH 11/12] #36077 code review changes

---
 src/app/usePayment.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/app/usePayment.tsx b/src/app/usePayment.tsx
index 9a1f29e..c381cee 100644
--- a/src/app/usePayment.tsx
+++ b/src/app/usePayment.tsx
@@ -262,22 +262,8 @@ export const PaymentProvider: FC<
               onSuccess(orderData)
             );
           } else if (status === "PAYER_ACTION_REQUIRED") {
-            //@ts-ignore
-            paypal
-              .Googlepay()
-              .initiatePayerAction({ orderId: id })
-              .then(async () => {
-                const orderResponse = await getOrder(
-                  requestHeader,
-                  getOrderUrl || "",
-                  paymentInfo.id,
-                  latestPaymentVersion
-                ).then((res: any) => console.log(res));
-
-                handleOnApprove({ orderID: orderData.id }).then(() =>
-                  onSuccess(orderData)
-                );
-              });
+            //@todo 3DS implementation
+            return "";
           } else {
             return "";
           }

From cf05ab12cebf81be7a2fd215fe438912b9bc6dd6 Mon Sep 17 00:00:00 2001
From: Jonathan Yeboah <10155597+JonYeb@users.noreply.github.com>
Date: Mon, 13 May 2024 11:25:18 +0200
Subject: [PATCH 12/12] version increment

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f4f6975..e50a491 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "paypal-commercetools-client",
-      "version": "0.1.31",
+      "version": "0.1.32",
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^1.0.6",
diff --git a/package.json b/package.json
index b9617cf..00dd685 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "private": false,
   "type": "module",
   "license": "MIT",