Enhacing PayPal and PayLater hooks to handle redirect and appswitch presentation modes (#739)

* Enhacing PayPal and PayLater hooks to handle redirect and appswitch presentation modes

* cleaning console logs

* changeset added

* Adding null check on newSession

* Adding try/catch around resume function and updating testcases

* Applying the resume flow check only for redirect an appswitch

---------

Co-authored-by: Nitya <[email protected]>

Author: nityasp

.changeset/deep-pumas-sip.md

@@ -0,0 +1,6 @@
+---
+"@paypal/react-paypal-js": patch
+"@paypal/paypal-js": patch
+---
+
+Enhancing the Paypal and PayLater hooks to handle redirect and direct app switch presentation modes.

packages/paypal-js/types/v6/components/base-component.d.ts

@@ -55,7 +55,7 @@ export type PresentationModeOptionsForModal = {
 export type PresentationModeOptionsForRedirect = {
     presentationMode: "redirect";
     autoRedirect?: { enabled: boolean };
-    fullPageOverlay?: undefined;
+    fullPageOverlay?: { enabled: boolean };
 };
 
 export type PresentationModeOptionsForPaymentHandler = {
@@ -70,6 +70,12 @@ export type PresentationModeOptionsForAuto = {
     autoRedirect?: undefined;
 };
 
+export type PresentationModeOptionsForDirectAppSwitch = {
+    presentationMode: "direct-app-switch";
+    fullPageOverlay?: { enabled: boolean };
+    autoRedirect?: { enabled: boolean };
+};
+
 export type CreateOrderPromise = Promise<{ orderId: string }>;
 
 export type CreateOrderCallback = () => CreateOrderPromise;

packages/paypal-js/types/v6/components/paypal-payments.d.ts

@@ -7,6 +7,7 @@ import {
     PresentationModeOptionsForAuto,
     PresentationModeOptionsForPaymentHandler,
     PresentationModeOptionsForRedirect,
+    PresentationModeOptionsForDirectAppSwitch,
 } from "./base-component";
 
 export type PayLaterCountryCodes =
@@ -99,13 +100,16 @@ export type PayPalPresentationModeOptions =
     | PresentationModeOptionsForPopup
     | PresentationModeOptionsForModal
     | PresentationModeOptionsForPaymentHandler
-    | PresentationModeOptionsForRedirect;
+    | PresentationModeOptionsForRedirect
+    | PresentationModeOptionsForDirectAppSwitch;
 
 export type OneTimePaymentSession = BasePaymentSession & {
     start: (
         presentationModeOptions: PayPalPresentationModeOptions,
         paymentSessionPromise?: Promise<{ orderId: string }>,
-    ) => Promise<void>;
+    ) => Promise<void | { redirectURL?: string }>;
+    hasReturned?: () => boolean;
+    resume?: () => Promise<void>;
 };
 
 export type SavePaymentSession = Omit<BasePaymentSession, "start"> & {

packages/react-paypal-js/src/v6/hooks/usePayLaterOneTimePaymentSession.test.ts

@@ -122,9 +122,14 @@ describe("usePayLaterOneTimePaymentSession", () => {
         });
 
         expect(mockStart).toHaveBeenCalledTimes(1);
-        expect(mockStart).toHaveBeenCalledWith({
-            presentationMode: mockPresentationMode,
-        });
+        expect(mockStart).toHaveBeenCalledWith(
+            {
+                presentationMode: mockPresentationMode,
+                fullPageOverlay: undefined,
+                autoRedirect: undefined,
+            },
+            undefined,
+        );
     });
 
     test("should call the createOrder callback, if it was provided, on start inside the click handler", async () => {
@@ -172,7 +177,11 @@ describe("usePayLaterOneTimePaymentSession", () => {
 
         expect(mockStart).toHaveBeenCalledTimes(1);
         expect(mockStart).toHaveBeenCalledWith(
-            { presentationMode: mockPresentationMode },
+            {
+                presentationMode: mockPresentationMode,
+                fullPageOverlay: undefined,
+                autoRedirect: undefined,
+            },
             mockOrderIdPromise,
         );
     });

packages/react-paypal-js/src/v6/hooks/usePayLaterOneTimePaymentSession.ts

@@ -61,8 +61,31 @@ export function usePayLaterOneTimePaymentSession({
         });
         sessionRef.current = newSession;
 
+        // check for resume flow in redirect-based presentation modes
+        const isRedirectMode =
+            presentationMode === "redirect" ||
+            presentationMode === "direct-app-switch";
+
+        if (isRedirectMode) {
+            const handleReturnFromPayPal = async () => {
+                try {
+                    if (!newSession) {
+                        return;
+                    }
+                    const isResumeFlow = newSession.hasReturned?.();
+                    if (isResumeFlow) {
+                        await newSession.resume?.();
+                    }
+                } catch (err) {
+                    setError(err as Error);
+                }
+            };
+
+            handleReturnFromPayPal();
+        }
+
         return handleDestroy;
-    }, [sdkInstance, orderId, proxyCallbacks, handleDestroy]);
+    }, [sdkInstance, orderId, proxyCallbacks, handleDestroy, presentationMode]);
 
     const handleCancel = useCallback(() => {
         sessionRef.current?.cancel();
@@ -84,11 +107,11 @@ export function usePayLaterOneTimePaymentSession({
             autoRedirect,
         } as PayPalPresentationModeOptions;
 
-        if (createOrder) {
-            await sessionRef.current.start(startOptions, createOrder());
-        } else {
-            await sessionRef.current.start(startOptions);
-        }
+        const result = await sessionRef.current.start(
+            startOptions,
+            createOrder?.(),
+        );
+        return result;
     }, [
         createOrder,
         presentationMode,

packages/react-paypal-js/src/v6/hooks/usePayPalOneTimePaymentSession.test.ts

@@ -290,9 +290,14 @@ describe("usePayPalOneTimePaymentSession", () => {
                 await result.current.handleClick();
             });
 
-            expect(mockPayPalSession.start).toHaveBeenCalledWith({
-                presentationMode: "popup",
-            });
+            expect(mockPayPalSession.start).toHaveBeenCalledWith(
+                {
+                    presentationMode: "popup",
+                    fullPageOverlay: undefined,
+                    autoRedirect: undefined,
+                },
+                undefined,
+            );
         });
 
         test("should call the createOrder callback on start inside the click handler", async () => {
@@ -321,6 +326,8 @@ describe("usePayPalOneTimePaymentSession", () => {
             expect(mockPayPalSession.start).toHaveBeenCalledWith(
                 {
                     presentationMode: "popup",
+                    fullPageOverlay: undefined,
+                    autoRedirect: undefined,
                 },
                 expect.any(Promise),
             );
@@ -370,9 +377,14 @@ describe("usePayPalOneTimePaymentSession", () => {
                     await result.current.handleClick();
                 });
 
-                expect(mockPayPalSession.start).toHaveBeenCalledWith({
-                    presentationMode: mode,
-                });
+                expect(mockPayPalSession.start).toHaveBeenCalledWith(
+                    {
+                        presentationMode: mode,
+                        fullPageOverlay: undefined,
+                        autoRedirect: undefined,
+                    },
+                    undefined,
+                );
 
                 jest.clearAllMocks();
                 mockPayPalSession = createMockPayPalSession();

packages/react-paypal-js/src/v6/hooks/usePayPalOneTimePaymentSession.ts

@@ -57,15 +57,39 @@ export function usePayPalOneTimePaymentSession({
             return;
         }
 
+        // Create session (can be created without orderId for resume detection)
         const newSession = sdkInstance.createPayPalOneTimePaymentSession({
             orderId,
             ...proxyCallbacks,
         });
 
         sessionRef.current = newSession;
 
+        // Only check for resume flow in redirect-based presentation modes
+        const shouldCheckResume =
+            presentationMode === "redirect" ||
+            presentationMode === "direct-app-switch";
+
+        if (shouldCheckResume) {
+            const handleReturnFromPayPal = async () => {
+                try {
+                    if (!newSession) {
+                        return;
+                    }
+                    const isResumeFlow = newSession.hasReturned?.();
+                    if (isResumeFlow) {
+                        await newSession.resume?.();
+                    }
+                } catch (err) {
+                    setError(err as Error);
+                }
+            };
+
+            handleReturnFromPayPal();
+        }
+
         return handleDestroy;
-    }, [sdkInstance, orderId, proxyCallbacks, handleDestroy]);
+    }, [sdkInstance, orderId, proxyCallbacks, handleDestroy, presentationMode]);
 
     const handleClick = useCallback(async () => {
         if (!isMountedRef.current) {
@@ -83,11 +107,11 @@ export function usePayPalOneTimePaymentSession({
             autoRedirect,
         } as PayPalPresentationModeOptions;
 
-        if (createOrder) {
-            await sessionRef.current.start(startOptions, createOrder());
-        } else {
-            await sessionRef.current.start(startOptions);
-        }
+        const result = await sessionRef.current.start(
+            startOptions,
+            createOrder?.(),
+        );
+        return result;
     }, [
         isMountedRef,
         presentationMode,

packages/react-paypal-js/src/v6/types/index.ts

@@ -4,7 +4,7 @@ export type * from "@paypal/paypal-js/sdk-v6";
 
 export interface BasePaymentSessionReturn {
     error: Error | null;
-    handleClick: () => Promise<void>;
+    handleClick: () => Promise<{ redirectURL?: string } | void>;
     handleCancel: () => void;
     handleDestroy: () => void;
 }