feat: Use Venmo One Time Payment Session Hook #702

hamzanasir · 2025-10-15T16:44:08Z

This PR implements the venmo one time payment session hook, the proposed usage for this hook would be as follows:

const { handleClick, handleCancel, handleDestroy } = useVenmoOneTimePaymentSession({
    onApprove: async (data) => {
      // onApprove logic
    },
    onCancel: () => {
       // onCancel logic
    },
    onError: (error: Error) => {
       // onError logic
    },
    createOrder, // or you could pass orderId instead to not do lazy order generation
    presentationMode,
  });

Then all the merchant needs to do is pass the click handler to the respective button:

<venmo-button
    onClick={handleClick}
    type="pay"
    id="venmo-button"
></venmo-button>

changeset-bot · 2025-10-15T16:44:13Z

⚠️ No Changeset found

Latest commit: 1a1a8e6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

…time-hook

imbrian

looks good. what's the testing strategy here? this wouldn't take long to test.

imbrian · 2025-10-15T20:12:08Z

packages/react-paypal-js/src/v6/utils.ts

    return ref.current;
 }
+
+export function useProxyProps<T extends Record<PropertyKey, unknown>>(


How do we want to deal with duplicate code like this?

The original implementation has tests too: https://github.com/paypal/paypal-js/blob/main/packages/react-paypal-js/src/hooks/useProxyProps.test.ts

Is there a limitation to importing code from the old react implementation?

@kand had an idea to maybe create a shared utils folder between the v6 implementation and v5 implementation. We could pursue something like that 🤔

Currently the V6 specific tsconfig instructs rollup to not allow imports outside of the v6 directory. In a discussion yesterday we talked about including a barrel file to export this methods for v6 usage. We can also update the v6-specific tsconfig to allow importing this hook specifically or more hooks generally.

Ok, discussed this with @gregjopa and he suggested that we go with a WET approach in order to make V5 "very deletable" in the future.

Alright, sounds good. Did you mention yesterday we are sharing other stuff from v5 currently though? Do we need to duplicate that code?

I moved this util into the base branch so we can all share it while we work on our hooks.

https://github.com/paypal/paypal-js/pull/695/files#r2440686418

Did you mention yesterday we are sharing other stuff from v5 currently though? Do we need to duplicate that code?

@kand In a prior iteration of the loadCoreSdkScript function, it was a nearly identical method to the loadScript function that V5 leverages. So it was basically copy-pasted over for V6 to use. I mentioned this as an example of the WET approach we're currently taking.

imbrian · 2025-10-15T20:21:25Z

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

+
+    useEffect(() => {
+        if (!sdkInstance) {
+            throw new Error("no sdk instance available");


How do we want to teach error handling? I think a hook throwing versus returning an error state forces a specific integration pattern, because it dictates where a merchant needs to place error boundaries.

An error state allows merchant to conditionally handle gracefully in the consuming component versus in a higher error boundary. If that's what we want, then we need our examples to show wrapping the components that do this setup in an error boundary (and we should probably provide this error boundary component too).

Ahh that's a good callout @imbrian! I think the v5 implementation also relies on throwing an error right? If that's the case we may want to follow the same pattern here and teach using ErrorBoundary

I like the idea of returning some kind of error state rather than throwing an error. Requiring merchants to use an <ErrorBoundary> in a specific place (i.e. outside the component using the hook) feels unnecessarily restrictive.

imbrian · 2025-10-15T20:23:07Z

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

+}: UseVenmoOneTimePaymentSessionProps): UseVenmoOneTimePaymentSessionReturn {
+    const { sdkInstance } = usePayPal();
+    const sessionRef = useRef<VenmoOneTimePaymentSession | null>(null);
+    const proxyCallbacks = useProxyProps(callbacks);


Yeah, I see what you're doing. Leveraging the stable ref in useProxyProps to satisfy the useeffect dependency array below, while allowing the underlying functions to change. It's the same use case as v5.

That's good to hear @imbrian! It's an awesome hook to use 🙂

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

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts

kand · 2025-10-16T20:31:52Z

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

+            if (sessionRef.current) {
+                sessionRef.current.destroy();
+                sessionRef.current = null;
+            }


Would it work to shorten these lines to the following?

Suggested change

if (sessionRef.current) {

sessionRef.current.destroy();

sessionRef.current = null;

}

sessionRef.current?.destroy();

sessionRef.current = null;

Could this entire return even just be return handleDestroy? Might be clearer that this is the exact same behavior.

Yes that's a great suggestion @kand ! Thank you!

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts

kand · 2025-10-17T15:02:08Z

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts

+
+export type UseVenmoOneTimePaymentSessionProps =
+    | (Omit<VenmoOneTimePaymentSessionOptions, "orderId"> & {
+          createOrder: () => VenmoOneTimePaymentSessionPromise;


Not a part of this PR, but out of curiosity, do we need a different type for VenmoOneTimePaymentSessionPromise? It appears to be equivalent to BasePaymentSessionPromise.

Edit: Slack thread here

…time-hook

kand · 2025-10-21T13:33:25Z

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

+                mockSdkInstance.createVenmoOneTimePaymentSession,
+            ).toHaveBeenCalledWith({
+                orderId: "test-order-id",
+                onApprove: expect.any(Function),


Is expect.any(Function) leaving a mock function in place? All good, but I've usually seen jest.fn() in place of this or an empty arrow function () => {}.

I believe this is the check to see if createVenmoOneTimePaymentSession was called with the right things, if we have jest.fn() in place of this then it will return a new mock function which will fail the equality check I believe 🤔

Ah, sorry, I saw this usage in a few places and glossed over this being used in expect. There are several locations though, where I think the AI got confused and is using this where you'd typically see jest.fn(). I'll highlight one of those locations in another comment.

Oh are you talking about passing props

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

Line 441 in 8b7af4e

onApprove: expect.any(Function),

? Yeah I think you're right that needs to change to use jest.fn()

Good call @kand !

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

gregjopa

Nice work @hamzanasir!

kand · 2025-10-21T19:29:39Z

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

+            await expect(
+                act(async () => {
+                    await result.current.handleClick();
+                }),
+            ).rejects.toThrow("Venmo session not available");


Suggested change

await expect(

act(async () => {

await result.current.handleClick();

}),

).rejects.toThrow("Venmo session not available");

expect(

act(() => {

result.current.handleClick();

}),

).rejects.toThrow("Venmo session not available");

I'm fairly certain async / await isn't needed here. My tests didn't end up needing it. Though, I am a bit confused by the sparse documentation on act(). In this example, async / await is used, but not the inner await; i.e. in this case, remove the await in await result.current.handleClick().

https://legacy.reactjs.org/docs/testing-recipes.html#data-fetching

Hmm for some reason my tests seem to fail if I don't use async / await. Using async / await makes sense to me since handleClick is an async function 🤔

kand · 2025-10-21T19:35:52Z

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

+                onApprove: expect.any(Function),
+                onCancel: expect.any(Function),
+                onError: expect.any(Function),


Here's an example where we should be using jest.fn() rather than expect.any(Function). There are several more of these.

kand · 2025-10-21T19:40:18Z

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

+    });
+
+    describe("callback proxying", () => {
+        test("should proxy callbacks correctly through useProxyProps", () => {


In my tests, I mocked out useProxyProps:

https://github.com/paypal/paypal-js/pull/697/files#diff-7739eba6c04a62ff31d3d1edb1d736a8d486a9d9405688b749b095da209eee18R19-R23

Which I think is slightly more robust than the unit test here because this test isn't checking that the functions went through useProxyProps; for example, createSessionCall.onApprove could be true here and the test would pass. What do you think?

EvanReinstein · 2025-10-21T19:48:06Z

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts

+    VenmoOneTimePaymentSessionPromise,
+} from "@paypal/paypal-js/sdk-v6";
+
+export type UseVenmoOneTimePaymentSessionProps =


As this type is defined, I'm not sure if the hook can accept fullPageOverlay as an argument. I was taking another look at this while looking into the redirect and direct-app-switch presentation modes for PayPal.

This is a great callout @EvanReinstein! I think a follow up ticket would be great to get parity on all the different types of start options we can pass 🙂

feat: Use Venmo One Time Payment Session Hook

feat: Implement use venmo one time payment session hook

eb2aa2c

gregjopa approved these changes Oct 15, 2025

View reviewed changes

Merge branch 'feature/react-paypal-js-v6' into feature/use-venmo-one-…

0632aff

…time-hook

imbrian reviewed Oct 15, 2025

View reviewed changes

kand reviewed Oct 16, 2025

View reviewed changes

packages/react-paypal-js/src/v6/hooks/useVenmoOneTimePaymentSession.ts Show resolved Hide resolved

kand reviewed Oct 16, 2025

View reviewed changes

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts Show resolved Hide resolved

kand reviewed Oct 16, 2025

View reviewed changes

packages/react-paypal-js/src/v6/types/VenmoOneTimePaymentSessionTypes.d.ts Show resolved Hide resolved

kand reviewed Oct 17, 2025

View reviewed changes

hamzanasir added 4 commits October 17, 2025 20:52

Merge branch 'feature/react-paypal-js-v6' into feature/use-venmo-one-…

2b05465

…time-hook

Merge branch 'feature/react-paypal-js-v6' into feature/use-venmo-one-…

9a80a94

…time-hook

add tests

97fbea5

address review comments

bcdbcf8

hamzanasir marked this pull request as ready for review October 20, 2025 21:05

hamzanasir requested a review from a team as a code owner October 20, 2025 21:05

kand approved these changes Oct 21, 2025

View reviewed changes

kand reviewed Oct 21, 2025

View reviewed changes

EvanReinstein approved these changes Oct 21, 2025

View reviewed changes

kand reviewed Oct 21, 2025

View reviewed changes

packages/react-paypal-js/src/v6/hooks/useVenmoOneTimePaymentSession.test.ts Show resolved Hide resolved

kand reviewed Oct 21, 2025

View reviewed changes

packages/react-paypal-js/src/v6/hooks/useVenmoOneTimePaymentSession.test.ts Outdated Show resolved Hide resolved

gregjopa approved these changes Oct 21, 2025

View reviewed changes

address review comments

8b7af4e

kand reviewed Oct 21, 2025

View reviewed changes

review pr comments

96b77fb

EvanReinstein reviewed Oct 21, 2025

View reviewed changes

Refactor tests to mock useProxyProps

1a1a8e6

hamzanasir merged commit b12ebc2 into feature/react-paypal-js-v6 Oct 21, 2025
2 checks passed

hamzanasir deleted the feature/use-venmo-one-time-hook branch October 21, 2025 21:47

kand pushed a commit that referenced this pull request Oct 22, 2025

Merge pull request #702 from paypal/feature/use-venmo-one-time-hook

aeef309

feat: Use Venmo One Time Payment Session Hook

feat: Use Venmo One Time Payment Session Hook #702

feat: Use Venmo One Time Payment Session Hook #702

Uh oh!

Conversation

hamzanasir commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

imbrian 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kand Oct 17, 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!

Uh oh!

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!

Uh oh!

kand Oct 17, 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!

Uh oh!

Uh oh!

gregjopa 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!

kand Oct 21, 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!

hamzanasir commented Oct 15, 2025 •

edited

Loading

changeset-bot bot commented Oct 15, 2025 •

edited

Loading

kand Oct 17, 2025 •

edited

Loading

kand Oct 17, 2025 •

edited

Loading

kand Oct 21, 2025 •

edited

Loading

EvanReinstein Oct 21, 2025 •

edited

Loading