@akinon/pz-flow-payment 1.107.0 → 1.108.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-flow-payment
 
+## 1.108.0-rc.0
+
+### Minor Changes
+
+- ce2e9e20: ZERO-3640: Add error handling and WalletCompletePage request to FlowPayment
+
 ## 1.107.0
 
 ## 1.106.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "1.107.0",
+  "version": "1.108.0-rc.0",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -1,5 +1,7 @@
 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 {
   ComponentOptions,
   CustomTranslations,
@@ -8,7 +10,23 @@ import {
   PaymentSessionResponse
 } from '@checkout.com/checkout-web-components';
 import { RootState } from '@theme/redux/store';
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
+
+const formatErrorMessage = (errors: any): string => {
+  if (typeof errors === 'string') {
+    return errors;
+  }
+
+  if (Array.isArray(errors)) {
+    return errors.join(', ');
+  }
+
+  if (typeof errors === 'object' && errors !== null) {
+    return Object.values(errors).join(', ');
+  }
+
+  return 'An error occurred during payment processing';
+};
 
 export default function FlowPayment({
   options
@@ -60,6 +78,9 @@ export default function FlowPayment({
   const lastAmountRef = useRef<string | null>(null);
   const isInitializingRef = useRef<boolean>(false);
   const walletPaymentInitialized = useRef<boolean>(false);
+  const [errors, setErrors] = useState<any>(null);
+
+  const environment = options?.environment || 'sandbox';
 
   // Memoize the amount to track actual changes
   const currentAmount = useMemo(() => {
@@ -89,6 +110,65 @@ export default function FlowPayment({
     }
   };
 
+  const handlePaymentSuccess = async (paymentData: any) => {
+    setErrors(null);
+
+    try {
+      const walletPaymentPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletPaymentPage.initiate({
+          payment_token: JSON.stringify(paymentData)
+        })
+      ).unwrap();
+
+      if (walletPaymentPageResponse.errors) {
+        setErrors(walletPaymentPageResponse.errors);
+        return;
+      }
+
+      if (
+        walletPaymentPageResponse.context_list.find(
+          (c) => c.page_name === 'WalletCompletePage'
+        )
+      ) {
+        const paymentCompleteResponse = await dispatch(
+          checkoutApi.endpoints.setWalletCompletePage.initiate(true)
+        ).unwrap();
+
+        if (paymentCompleteResponse.errors) {
+          setErrors(paymentCompleteResponse.errors);
+          return;
+        }
+
+        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') || 'en'
+          )}`;
+
+          window.location.href = redirectUrlWithLocale;
+        }
+      }
+    } catch (error) {
+      console.error('Error processing payment completion:', error);
+      setErrors(error);
+    }
+  };
+
+  const handlePaymentError = async (error: any) => {
+    console.error('Payment error occurred:', error);
+    setErrors(error);
+  };
+
   const initFlowPaymentWebComponents = async ({
     publicKey
   }: {
@@ -158,7 +238,14 @@ export default function FlowPayment({
           : undefined
       });
 
-      const flowComponent = checkout.create('flow');
+      const flowComponent = checkout.create('flow', {
+        onPaymentCompleted: async (_self, paymentResponse) => {
+          handlePaymentSuccess(paymentResponse);
+        },
+        onError: async (_self, error) => {
+          handlePaymentError(error);
+        }
+      });
       flowComponentRef.current = flowComponent;
 
       if (container) {
@@ -210,5 +297,14 @@ export default function FlowPayment({
     };
   }, []);
 
-  return <div id="flow-container" className="flow-payment-container"></div>;
+  return (
+    <div className="flow-payment-container">
+      <div id="flow-container"></div>
+      {errors && (
+        <div className="text-error-100 text-xs mt-5">
+          {formatErrorMessage(errors)}
+        </div>
+      )}
+    </div>
+  );
 }