BCDC hook implementation #743

nityasp · 2025-11-21T20:45:01Z

React hook for guest payment session (BCDC).

changeset-bot · 2025-11-21T20:45:04Z

🦋 Changeset detected

Latest commit: f82d94b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@paypal/react-paypal-js	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

EvanReinstein · 2025-11-21T21:15:15Z

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

+    buyerCountry?: string;
+    targetElement?: string | HTMLElement;
+    presentationMode?: "auto";
+    fullPageOverlay?: boolean;
+    autoRedirect?: boolean;


If these are the guest payment presentation mode .start options I think it is fair to do a paypal-js change to consolidate this as a type.

Ideally any change that is in paypal-js should be a separate PR.

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

kand

A good start! A few comments now, but I'll continue the review on Monday!

kand · 2025-11-21T21:22:40Z

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

+                try {
+                    await callback(...args);
+                } finally {
+                    resetState();


Under what conditions does this "reset button state"? Reading this, I think this will only reset state if the callback throws an error.

I was using this "reset button state" to manually reset button after payment flow is completed. We dont need this since SDK is handling the button re-enabling here. https://github.paypal.com/PayPal-R/core-web-sdk/blob/8cc18742de053cf3a8014f13a086d2299526fa96/packages/web-sdk-payments/src/CheckoutSession/PayPalGuestCheckoutSession.ts#L239

kand · 2025-11-21T21:26:46Z

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

+    const isSessionActiveRef = useRef(false);
+
+    // Track whether shipping callbacks are present to trigger session recreation
+    const hasShippingCallbacks = Boolean(


useProxyProps prevents changes to callbacks triggering a component re-render. If I'm understanding hasShippingCallbacks, it appears to be reversing the useProxyProps functionality. Would the same effect be achieved by unpacking the shipping callbacks from the argument on line 39, then having those be dependencies to the session creation useEffect?

Great point!! That seems to be a much cleaner way to destructure the shipping callbacks from props and passing then to session creation conditionally. Later use them as dependencies to trigger session creation.

kand · 2025-11-21T21:28:47Z

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

+    const buttonRef = useRef<HTMLElement>(null);
+    const proxyCallbacks = useProxyProps(callbacks);
+    const [error, setError] = useError();
+    const [isProcessing, setIsProcessing] = useState(false);


I don't see the isProcessing value used anywhere. What would this be used for?

Initialy I used isProcessing manually disable the button for testing purposes by adding it as a attribute value. Since SDK takes care of disabling the button when the form is open, we no longer need this. Thanks for pointing out. I'll remove it.

kand · 2025-11-24T15:31:30Z

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

+    targetElement?: string | HTMLElement;
+    presentationMode?: "auto";
+    fullPageOverlay?: boolean;
+    autoRedirect?: boolean;


BCDC has inline, popup, and modal presentation modes, so any options those can use need to be available. I think fullPageOverlay is valid because it's used by popup. I'm not sure about autoRedirect though, I'm only seeing that in relation to redirect presentation modes. Could you verify if this is an option BCDC needs?

Removed theautoRedirect option.

EvanReinstein · 2025-12-01T19:04:44Z

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

+) & {
+    buyerCountry?: string;
+    targetElement?: string | HTMLElement;
+    presentationMode?: "auto";
+    fullPageOverlay?: boolean;
+    onShippingAddressChange?: (
+        data: OnShippingAddressChangeData,
+    ) => Promise<void>;
+    onShippingOptionsChange?: (
+        data: OnShippingOptionsChangeData,
+    ) => Promise<void>;
+};


~~I think that presentationMode should include inline, popup, and modal.~~ I'm also seeing a PayPalGuestPresentationModeOptions defined in paypal-js that looks like:

export type PayPalGuestPresentationModeOptions = PresentationModeOptionsForAuto & { targetElement?: string | EventTarget; };

I'm wondering if we should update that type to include some of the properties that are not currently in PayPalGuestPresentationModeOptions but are used in the hook, such as onShippingOptionsChange/onShippingAddressChange and targetElement or buyerCountry.

Huddled on this with @kand and I'll open a PR to update PayPalGuestPresentationModeOptions with some of the other relevant properties 👍

We also discussed hardcoding the presentationMode and removing it as an argument for the hook.

I opened a PR to update the presentation mode options type here 👋

EvanReinstein · 2025-12-01T19:53:08Z

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

+export type UsePayPalGuestPaymentSessionProps = (
+    | (Omit<PayPalGuestOneTimePaymentSessionOptions, "orderId"> & {
+          createOrder: () => PayPalGuestOneTimePaymentSessionPromise;
+          orderId?: never;
+      })
+    | (PayPalGuestOneTimePaymentSessionOptions & {
+          createOrder?: never;
+          orderId: string;
+      })
+) & {
+    buyerCountry?: string;
+    targetElement?: string | HTMLElement;
+    presentationMode?: "auto";
+    fullPageOverlay?: boolean;
+    onShippingAddressChange?: (
+        data: OnShippingAddressChangeData,
+    ) => Promise<void>;
+    onShippingOptionsChange?: (
+        data: OnShippingOptionsChangeData,
+    ) => Promise<void>;
+};


Suggested change

export type UsePayPalGuestPaymentSessionProps = (

| (Omit<PayPalGuestOneTimePaymentSessionOptions, "orderId"> & {

createOrder: () => PayPalGuestOneTimePaymentSessionPromise;

orderId?: never;

})

| (PayPalGuestOneTimePaymentSessionOptions & {

createOrder?: never;

orderId: string;

})

) & {

buyerCountry?: string;

targetElement?: string | HTMLElement;

presentationMode?: "auto";

fullPageOverlay?: boolean;

onShippingAddressChange?: (

data: OnShippingAddressChangeData,

) => Promise<void>;

onShippingOptionsChange?: (

data: OnShippingOptionsChangeData,

) => Promise<void>;

};

type PayPalGuestPresentationModeHookOptions = Omit<PayPalGuestPresentationModeOptions, "presentationMode">;

export type UsePayPalGuestPaymentSessionProps = (

| (Omit<PayPalGuestOneTimePaymentSessionOptions, "orderId"> & {

createOrder: () => PayPalGuestOneTimePaymentSessionPromise;

orderId?: never;

})

| (PayPalGuestOneTimePaymentSessionOptions & {

createOrder?: never;

orderId: string;

})

) & PayPalGuestPresentationModeHookOptions;

EvanReinstein · 2025-12-01T19:54:12Z

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

+        try {
+            const target = targetElement || buttonRef.current;
+            const startOptions: PayPalGuestPresentationModeOptions = {
+                presentationMode,


Hard code the presentationMode in order to prevent passing values other than auto

Suggested change

presentationMode,

presentationMode: "auto",

…lementation

EvanReinstein · 2025-12-04T17:04:34Z

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

+    useEffect(() => {
+        if (!sdkInstance) {
+            setError(new Error("no sdk instance available"));
+        }
+    }, [sdkInstance, setError]);


@kand Is making an update to other session hooks to be more mindful about when to set an error.

Suggested change

useEffect(() => {

if (!sdkInstance) {

setError(new Error("no sdk instance available"));

}

}, [sdkInstance, setError]);

useEffect(() => {

if (sdkInstance) {

setError(null);

} else if (loadingStatus !== INSTANCE_LOADING_STATE.PENDING) {

setError(new Error("no sdk instance available"));

}

}, [sdkInstance, setError, loadingStatus]);

Ah good catch @EvanReinstein, thanks!

kand · 2025-12-04T17:18:28Z

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

+        test("should error if there is no sdkInstance when called", () => {
+            mockUsePayPal.mockReturnValue({
+                sdkInstance: null,
+                loadingStatus: INSTANCE_LOADING_STATE.PENDING,


Suggested change

loadingStatus: INSTANCE_LOADING_STATE.PENDING,

loadingStatus: INSTANCE_LOADING_STATE.REJECTED,

I made this change in my updates PR since it tests only the case where sdkInstance is null while the loadingStatus check is true.

There are a couple other updates to this test as well you could copy over from my PR, including the name of the test and checking that the create session call is not made!

kand · 2025-12-04T17:21:15Z

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

+                result.current.handleCancel();
+            });
+
+            expect(mockPayPalSession.cancel).not.toHaveBeenCalled();


What's the reason the session's cancel isn't called?

kand · 2025-12-04T17:22:36Z

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

+
+            expect(() => {
+                act(() => {
+                    result.current.handleCancel();


There currently isn't any logic using the session in the handleCancel callback, or that would throw an error. So, should this test be refactored? Or is there logic missing from handleCancel?

kand · 2025-12-04T17:24:38Z

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

+            const target = targetElement || buttonRef.current;
+            const startOptions: PayPalGuestPresentationModeOptions = {
+                presentationMode: "auto",
+                ...(fullPageOverlay !== undefined && { fullPageOverlay }),


Does undefined need to be checked specifically, or could this just be a truthy check? Also, could this be rewritten as a ternary like the line following it?

Suggested change

...(fullPageOverlay !== undefined && { fullPageOverlay }),

...(fullPageOverlay ? { fullPageOverlay } : {}),

kand · 2025-12-04T17:27:02Z

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

+        } catch (err) {
+            if (isMountedRef.current) {
+                isSessionActiveRef.current = false;
+                setError(err instanceof Error ? err : new Error(String(err)));


I believe this function should take unknown, see it's type here. Were you seeing a typescript error when this wasn't cast?

Suggested change

setError(err instanceof Error ? err : new Error(String(err)));

setError(err);

kand · 2025-12-04T17:28:26Z

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

+            const checkoutOptionsPromise = createOrder
+                ? createOrder()
+                : undefined;


Using optional chaining, I believe this could be shortened to:

Suggested change

const checkoutOptionsPromise = createOrder

? createOrder()

: undefined;

const checkoutOptionsPromise = createOrder?.();

This could be moved down to line 123 as well, same as the PayLater session is doing:

https://github.com/paypal/paypal-js/blob/main/packages/react-paypal-js/src/v6/hooks/usePayLaterOneTimePaymentSession.ts#L120

kand · 2025-12-04T17:32:54Z

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

+} from "@paypal/paypal-js/sdk-v6";
+import type { BasePaymentSessionReturn } from "../types";
+
+export interface PayPalGuestPaymentSessionReturn


Does this interface need to be exported? I don't see it used anywhere outside this file.

kand · 2025-12-04T17:34:04Z

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

+    "presentationMode"
+>;
+
+export type UsePayPalGuestPaymentSessionProps = (


Does this type need to be exported? If it's only exported for the test file, I think all the const prop constructions could just be inlined directly into their respective usePayPalGuestPaymentSession calls.

…lementation

BCDC hook

85f6047

EvanReinstein reviewed Nov 21, 2025

View reviewed changes

packages/react-paypal-js/src/v6/types/index.ts Outdated Show resolved Hide resolved

kand reviewed Nov 21, 2025

View reviewed changes

kand reviewed Nov 24, 2025

View reviewed changes

Nitya added 3 commits November 24, 2025 15:03

removing redundant state management in the hook

7b54518

changeset added

b6c514c

Adding unit tests to the BCDC hook

183755d

nityasp marked this pull request as ready for review December 1, 2025 16:06

nityasp requested a review from a team as a code owner December 1, 2025 16:06

nityasp requested review from EvanReinstein and kand December 1, 2025 16:06

Merge branch 'main' into feature/bcdc-hook-implementation

ae30b46

EvanReinstein reviewed Dec 1, 2025

View reviewed changes

Nitya added 3 commits December 4, 2025 09:04

Merge remote-tracking branch 'origin/main' into feature/bcdc-hook-imp…

bf67e7d

…lementation

Prevent infinite loop on cancel and fix the type errors

abbddc3

Updating the BCDC hook testcases

6dd0c37

EvanReinstein reviewed Dec 4, 2025

View reviewed changes

kand reviewed Dec 4, 2025

View reviewed changes

Nitya added 3 commits December 4, 2025 13:19

Removing the targetElement and isSessionActiveRef

d32f959

Merge remote-tracking branch 'origin/main' into feature/bcdc-hook-imp…

f828484

…lementation

align error handling with other payment session hooks.

f82d94b

	loadingStatus: INSTANCE_LOADING_STATE.PENDING,
	loadingStatus: INSTANCE_LOADING_STATE.REJECTED,

	...(fullPageOverlay !== undefined && { fullPageOverlay }),
	...(fullPageOverlay ? { fullPageOverlay } : {}),

	setError(err instanceof Error ? err : new Error(String(err)));
	setError(err);

BCDC hook implementation #743

Are you sure you want to change the base?

BCDC hook implementation #743

Conversation

nityasp commented Nov 21, 2025

Uh oh!

changeset-bot bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kand left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EvanReinstein Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EvanReinstein Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Nov 21, 2025 •

edited

Loading

EvanReinstein Dec 1, 2025 •

edited

Loading

EvanReinstein Dec 1, 2025 •

edited

Loading