@akinon/pz-apple-pay 2.0.0-beta.2 → 2.0.0-beta.20

package/CHANGELOG.md

@@ -1,18 +1,127 @@
 # @akinon/pz-apple-pay
 
-## 2.0.0-beta.2
+## 2.0.0-beta.20
 
-## 2.0.0-beta.1
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+## 1.121.0
+
+## 1.120.0
+
+### Minor Changes
+
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
+
+## 1.108.0
+
+### Minor Changes
+
+- d8883ce6: ZERO-3640: Refactor wallet completion handling to accept additional parameters; update related API calls
+- 31a2d35a: ZERO-3640: Refactor checkout API call to include useFormData option; update FlowPayment component for improved error handling and code readability
+
+## 1.107.0
+
+## 1.106.0
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- f2e9d1d: ZERO-3383: Add custom UI rendering option for apple pay
+
+## 1.89.0
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+### Minor Changes
+
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-apple-pay",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^5.2.2"
   }
 }

package/readme.md

@@ -2,20 +2,10 @@
 
 ## Installation
 
-There are two ways to install the Apple Pay plugin:
-
-### 1. Install the npm package using Yarn
-
-For the latest version, you can install the package using Yarn:
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
-yarn add @akinon/pz-apple-pay
-```
-
-### 2. Preferred installation method
 
-You can also use the following command to install the extension with the latest plugins:
-
-```bash
 npx @akinon/projectzero@latest --plugins
+
 ```

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

@@ -3,6 +3,7 @@ import { useAppSelector, useAppDispatch } 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 { useLocalization } from '@akinon/next/hooks';
 import { useState, useMemo } from 'react';
 
 export default function useApplePay() {
@@ -10,7 +11,9 @@ export default function useApplePay() {
     (state: RootState) => state.checkout
   );
   const dispatch = useAppDispatch();
+  const { t } = useLocalization();
   const [errors, setErrors] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const paymentErrors = useMemo(() => {
     if (typeof errors === 'string') {
@@ -79,58 +82,70 @@ export default function useApplePay() {
   }, [walletPaymentData]);
 
   const initPaymentRequest = async () => {
-    setErrors(null);
-
-    const request = paymentRequest;
-    const paymentRequestResponse = await request.show();
+    if (isProcessing) return;
 
-    if (paymentRequestResponse.details?.token?.paymentData) {
-      const paymentData = paymentRequestResponse.details.token.paymentData;
+    setIsProcessing(true);
+    setErrors(null);
 
-      const walletPaymentPageResponse = await dispatch(
-        checkoutApi.endpoints.setWalletPaymentPage.initiate({
-          payment_token: JSON.stringify(paymentData)
-        })
-      ).unwrap();
+    try {
+      const request = paymentRequest;
+      const paymentRequestResponse = await request.show();
 
-      if (walletPaymentPageResponse.errors) {
-        setErrors(walletPaymentPageResponse.errors);
-      }
+      if (paymentRequestResponse.details?.token?.paymentData) {
+        const paymentData = paymentRequestResponse.details.token.paymentData;
 
-      if (
-        walletPaymentPageResponse.context_list.find(
-          (c) => c.page_name === 'WalletCompletePage'
-        )
-      ) {
-        const paymentCompleteResponse = await dispatch(
-          checkoutApi.endpoints.setWalletCompletePage.initiate(true)
+        const walletPaymentPageResponse = await dispatch(
+          checkoutApi.endpoints.setWalletPaymentPage.initiate({
+            payment_token: JSON.stringify(paymentData)
+          })
         ).unwrap();
 
-        if (paymentCompleteResponse.errors) {
-          setErrors(paymentCompleteResponse.errors);
+        if (walletPaymentPageResponse.errors) {
+          setErrors(walletPaymentPageResponse.errors);
         }
 
         if (
-          paymentCompleteResponse.context_list.find(
-            (c) => c.page_name === 'ThankYouPage'
+          walletPaymentPageResponse.context_list.find(
+            (c) => c.page_name === 'WalletCompletePage'
           )
         ) {
-          const redirectUrl = paymentCompleteResponse.context_list.find(
-            (c) => c.page_name === 'ThankYouPage'
-          )?.page_context.context_data.redirect_url;
-
-          const redirectUrlWithLocale = `${
-            window.location.origin
-          }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale'))}`;
-
-          await paymentRequestResponse.complete('success');
-          window.location.href = redirectUrlWithLocale;
+          const paymentCompleteResponse = await dispatch(
+            checkoutApi.endpoints.setWalletCompletePage.initiate({
+              success: true
+            })
+          ).unwrap();
+
+          if (paymentCompleteResponse.errors) {
+            setErrors(paymentCompleteResponse.errors);
+          }
+
+          if (
+            paymentCompleteResponse.context_list.find(
+              (c) => c.page_name === 'ThankYouPage'
+            )
+          ) {
+            const redirectUrl = paymentCompleteResponse.context_list.find(
+              (c) => c.page_name === 'ThankYouPage'
+            )?.page_context.context_data.redirect_url;
+
+            const redirectUrlWithLocale = `${
+              window.location.origin
+            }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale'))}`;
+
+            await paymentRequestResponse.complete('success');
+            window.location.href = redirectUrlWithLocale;
+          } else {
+            await paymentRequestResponse.complete('fail');
+          }
         } else {
           await paymentRequestResponse.complete('fail');
         }
-      } else {
-        await paymentRequestResponse.complete('fail');
       }
+    } catch (error) {
+      console.error('Apple Pay error:', error);
+      setErrors(error?.message || t('checkout.apple_pay.payment_failed'));
+    } finally {
+      setIsProcessing(false);
     }
   };
 
@@ -139,6 +154,7 @@ export default function useApplePay() {
     paymentErrors,
     setPaymentErrors: setErrors,
     onMerchantValidation,
-    initPaymentRequest
+    initPaymentRequest,
+    isProcessing
   };
 }

package/src/views/index.tsx

@@ -1,22 +1,41 @@
 'use client';
 
+import { JSX } from 'react';
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
 import { RootState } from '@theme/redux/store';
 import useApplePay from '../hooks/use-apple-pay';
 
-export default function ApplePay() {
+export interface ApplePayProps {
+  customUIRender?: (props: {
+    initPaymentRequest?: () => void;
+    paymentErrors?: string | null;
+  }) => JSX.Element | null;
+}
+
+export default function ApplePay({ customUIRender }: ApplePayProps) {
   const { walletPaymentData } = useAppSelector(
     (state: RootState) => state.checkout
   );
-  const { paymentErrors, initPaymentRequest } = useApplePay();
+  const { t } = useLocalization();
+  const { paymentErrors, initPaymentRequest, isProcessing } = useApplePay();
 
   if (!walletPaymentData) {
     return null;
   }
 
+  if (customUIRender) {
+    return customUIRender({
+      initPaymentRequest,
+      paymentErrors
+    });
+  }
+
   return (
     <div>
-      <button onClick={initPaymentRequest}>Pay with Apple Pay</button>
+      <button onClick={initPaymentRequest} disabled={isProcessing}>
+        {isProcessing ? t('checkout.apple_pay.processing') : t('checkout.apple_pay.pay_button')}
+      </button>
 
       {paymentErrors?.length > 0 && (
         <div className="text-error-100 text-xs mt-5">{paymentErrors}</div>