@akinon/pz-google-pay 1.116.0-rc.11

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-google-pay
+
+## 1.116.0-rc.11
+
+### Minor Changes
+
+- 726491df: ZERO-3988: Add google pay integration

package/README.md

@@ -0,0 +1,81 @@
+# Project Zero - Google Pay Plugin
+
+## Installation
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+# Adding Google Pay Payment Method to Checkout
+
+---
+
+## 1. Create Google Pay File
+
+**views/checkout/steps/payment/options/google-pay.tsx**
+
+```tsx
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+export default function GooglePay() {
+  return <PluginModule component={Component.GooglePay} />;
+}
+```
+
+## 2. Update Payment Step
+
+**views/checkout/steps/payment/index.tsx**
+
+```tsx
+import GooglePay from './options/google-pay';
+
+export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
+  {
+    slug: 'payment-option-slug',
+    view: GooglePay
+  }
+  // Other payment methods can be added here
+];
+```
+
+## Props
+
+### customUIRender
+
+A function to fully customize the Google Pay component's appearance. If provided, the default UI will not be shown; instead, the JSX returned by this function will be rendered.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `customUIRender` | `React.ReactNode` | Optional function to fully customize the Google Pay component. |
+
+#### Example
+
+```tsx
+<PluginModule
+  component={Component.GooglePay}
+  props={{
+    customUIRender: ({ handlePaymentRequest, paymentErrors }) => {
+      return (
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={handlePaymentRequest}
+            className="group relative w-full flex justify-center items-center gap-3 bg-black hover:bg-gray-800 text-white font-medium py-4 px-6 rounded-lg transition-all duration-200 active:scale-[0.98]"
+          >
+            <span className="text-lg">Pay with Google Pay</span>
+
+            <span className="absolute right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+              →
+            </span>
+          </button>
+
+          {paymentErrors && (
+            <p className="text-sm text-red-700 mt-1">{paymentErrors}</p>
+          )}
+        </div>
+      );
+    }
+  }}
+/>
+```

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-google-pay",
+  "version": "1.116.0-rc.11",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

package/src/hooks/use-google-pay.tsx

@@ -0,0 +1,110 @@
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { getCookie } from '@akinon/next/utils';
+import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
+import { RootState } from '@theme/redux/store';
+import { useState, useMemo } from 'react';
+
+export default function useGooglePay() {
+  const dispatch = useAppDispatch();
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
+  const [errors, setErrors] = useState<any>(null);
+
+  const paymentErrors = useMemo(() => {
+    if (typeof errors === 'string') return errors;
+    if (Array.isArray(errors)) return errors.join(', ');
+    if (typeof errors === 'object')
+      return Object.values(errors ?? {}).join(', ');
+    return null;
+  }, [errors]);
+
+  const redirectToThankYouPage = (contextList: any[]) => {
+    const thankYouPageContext = contextList.find(
+      (c: any) => c.page_name === 'ThankYouPage'
+    );
+
+    if (thankYouPageContext) {
+      const redirectUrl =
+        thankYouPageContext.page_context.context_data.redirect_url;
+      const redirectUrlWithLocale = `${window.location.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        getCookie('pz-locale')
+      )}`;
+      window.location.href = redirectUrlWithLocale;
+    }
+  };
+
+  const handleGooglePaySuccess = async (paymentData: any) => {
+    setErrors(null);
+
+    const rawTokenString = paymentData.paymentMethodData.tokenizationData.token;
+
+    try {
+      const walletSelectionPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletSelectionPage.initiate({
+          payment_option: preOrder.payment_option?.pk
+        })
+      ).unwrap();
+
+      const walletPaymentPageContext =
+        walletSelectionPageResponse.context_list.find(
+          (c: any) => c.page_name === 'WalletPaymentPage'
+        );
+
+      if (!walletPaymentPageContext) {
+        setErrors('Error: Could not proceed to payment step (Context error).');
+        return;
+      }
+
+      const walletPaymentPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletPaymentPage.initiate({
+          payment_token: JSON.stringify(rawTokenString)
+        })
+      ).unwrap();
+
+      if (walletPaymentPageResponse.errors) {
+        setErrors(walletPaymentPageResponse.errors);
+        return;
+      }
+
+      const redirectPageContext = walletPaymentPageResponse.context_list.find(
+        (c: any) => c.page_name === 'WalletRedirectCompletePage'
+      );
+
+      if (redirectPageContext) {
+        window.location.href = redirectPageContext.page_context.redirect_url;
+        return;
+      }
+
+      const completePageContext = walletPaymentPageResponse.context_list.find(
+        (c: any) => c.page_name === 'WalletCompletePage'
+      );
+
+      if (completePageContext) {
+        const paymentCompleteResponse = await dispatch(
+          checkoutApi.endpoints.setWalletCompletePage.initiate({
+            success: true
+          })
+        ).unwrap();
+
+        if (paymentCompleteResponse.errors) {
+          setErrors(paymentCompleteResponse.errors);
+          return;
+        }
+
+        redirectToThankYouPage(paymentCompleteResponse.context_list);
+      } else {
+        setErrors('Payment could not be completed.');
+      }
+    } catch (error) {
+      console.error('Google Pay Flow Error:', error);
+      setErrors('An unexpected error occurred during the process.');
+    }
+  };
+
+  return {
+    paymentErrors,
+    setPaymentErrors: setErrors,
+    handleGooglePaySuccess
+  };
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './views';

package/src/views/index.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { RootState } from '@theme/redux/store';
+import Script from 'next/script';
+import useGooglePay from '../hooks/use-google-pay';
+
+declare global {
+  interface Window {
+    google: any;
+  }
+}
+
+export interface GooglePayProps {
+  customUIRender?: (props: {
+    handlePaymentRequest: () => void;
+    paymentErrors?: string | null;
+  }) => JSX.Element | null;
+  className?: string;
+}
+
+export const GooglePay = ({ customUIRender, className }: GooglePayProps) => {
+  const { walletPaymentData } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const { handleGooglePaySuccess, paymentErrors } = useGooglePay();
+
+  const buttonContainerRef = useRef<HTMLDivElement>(null);
+  const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+  const [canMakePayment, setCanMakePayment] = useState(false);
+  const paymentsClientRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (window.google?.payments) {
+      setIsScriptLoaded(true);
+    }
+  }, []);
+
+  const getPaymentsClient = useCallback(() => {
+    if (!walletPaymentData?.data || !window.google?.payments) return null;
+
+    if (!paymentsClientRef.current) {
+      paymentsClientRef.current = new window.google.payments.api.PaymentsClient(
+        {
+          environment: walletPaymentData.data.environment
+        }
+      );
+    }
+    return paymentsClientRef.current;
+  }, [walletPaymentData]);
+
+  const handlePaymentRequest = useCallback(() => {
+    if (!walletPaymentData?.data) return;
+
+    const client = getPaymentsClient();
+
+    const {
+      apiVersion,
+      apiVersionMinor,
+      allowedPaymentMethods,
+      transactionInfo,
+      merchantInfo
+    } = walletPaymentData.data;
+
+    const paymentDataRequest = {
+      apiVersion,
+      apiVersionMinor,
+      allowedPaymentMethods,
+      transactionInfo,
+      ...(merchantInfo && { merchantInfo })
+    };
+
+    client
+      .loadPaymentData(paymentDataRequest)
+      .then((paymentData: any) => {
+        handleGooglePaySuccess(paymentData);
+      })
+      .catch((err: any) => {
+        console.error('Err', err);
+      });
+  }, [walletPaymentData, getPaymentsClient, handleGooglePaySuccess]);
+
+  const addGooglePayButton = () => {
+    if (customUIRender) return;
+
+    const client = getPaymentsClient();
+    const button = client.createButton({
+      onClick: handlePaymentRequest,
+      buttonColor: 'black',
+      buttonType: 'buy'
+    });
+
+    if (buttonContainerRef.current) {
+      buttonContainerRef.current.innerHTML = '';
+      buttonContainerRef.current.appendChild(button);
+    }
+  };
+
+  useEffect(() => {
+    if (isScriptLoaded && walletPaymentData?.data) {
+      const client = getPaymentsClient();
+
+      if (!client) return;
+
+      const { apiVersion, apiVersionMinor, allowedPaymentMethods } =
+        walletPaymentData.data;
+
+      client
+        .isReadyToPay({
+          apiVersion,
+          apiVersionMinor,
+          allowedPaymentMethods
+        })
+        .then((response: any) => {
+          if (response.result) setCanMakePayment(true);
+        })
+        .catch((err: any) => console.error('Error:', err));
+    }
+  }, [isScriptLoaded, walletPaymentData, getPaymentsClient]);
+
+  useEffect(() => {
+    if (
+      canMakePayment &&
+      !customUIRender &&
+      buttonContainerRef.current &&
+      paymentsClientRef.current
+    ) {
+      addGooglePayButton();
+    }
+  }, [canMakePayment, customUIRender, handlePaymentRequest]);
+
+  if (!walletPaymentData) return null;
+
+  return (
+    <div className={className}>
+      <Script
+        src="https://pay.google.com/gp/p/js/pay.js"
+        onLoad={() => setIsScriptLoaded(true)}
+        strategy="afterInteractive"
+      />
+
+      {canMakePayment && (
+        <>
+          {customUIRender ? (
+            customUIRender({
+              handlePaymentRequest,
+              paymentErrors
+            })
+          ) : (
+            <div className="w-full">
+              {paymentErrors && (
+                <div className="text-red-600 mb-2 text-sm font-medium">
+                  {paymentErrors}
+                </div>
+              )}
+              <div ref={buttonContainerRef} style={{ width: '100%' }} />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default GooglePay;