feat: Venmo One Time Payment button (#755)

* initial addition of v6 venmo button component

* add vscode to gitignore and remove autoRedirect from venmo session hook

* add ai tests

* add the button to exports

* chore: add changeset

* update is server condition to return an empty div server side

* add empty line

* clean up eligibility hook test console.errors

Author: EvanReinstein

.changeset/silver-sheep-like.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": patch
+---
+
+Adds v6 venmo ui component.

.gitignore

@@ -11,3 +11,5 @@ node_modules
 /playwright/.cache/
 .idea
 .rollup.cache
+
+.vscode

packages/react-paypal-js/src/v6/components/VenmoOneTimePaymentButton.test.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+
+import { VenmoOneTimePaymentButton } from "./VenmoOneTimePaymentButton";
+import { useVenmoOneTimePaymentSession } from "../hooks/useVenmoOneTimePaymentSession";
+import { isServer } from "../utils";
+
+jest.mock("../hooks/useVenmoOneTimePaymentSession", () => ({
+    useVenmoOneTimePaymentSession: jest.fn(),
+}));
+jest.mock("../utils", () => ({
+    isServer: jest.fn().mockReturnValue(false),
+}));
+
+describe("VenmoOneTimePaymentButton", () => {
+    const mockHandleClick = jest.fn();
+    const mockUseVenmoOneTimePaymentSession =
+        useVenmoOneTimePaymentSession as jest.Mock;
+    const mockIsServer = isServer as jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockUseVenmoOneTimePaymentSession.mockReturnValue({
+            error: null,
+            handleClick: mockHandleClick,
+        });
+        mockIsServer.mockReturnValue(false);
+    });
+
+    it("should render venmo-button when not on server side", () => {
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(container.querySelector("venmo-button")).toBeInTheDocument();
+    });
+
+    it("should render a div when on server side", () => {
+        mockIsServer.mockReturnValue(true);
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(container.querySelector("venmo-button")).not.toBeInTheDocument();
+        expect(container.querySelector("div")).toBeInTheDocument();
+    });
+
+    it("should call handleClick when button is clicked", () => {
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("venmo-button");
+
+        // @ts-expect-error button should be defined at this point, test will error if not
+        fireEvent.click(button);
+
+        expect(mockHandleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should disable the button when disabled=true is given as a prop", () => {
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+                disabled={true}
+            />,
+        );
+        const button = container.querySelector("venmo-button");
+        expect(button).toHaveAttribute("disabled");
+    });
+
+    it("should disable button when error is present", () => {
+        jest.spyOn(console, "error").mockImplementation();
+        mockUseVenmoOneTimePaymentSession.mockReturnValue({
+            error: new Error("Test error"),
+            handleClick: mockHandleClick,
+        });
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("venmo-button");
+        expect(button).toHaveAttribute("disabled");
+    });
+
+    it("should not disable button when error is null", () => {
+        mockUseVenmoOneTimePaymentSession.mockReturnValue({
+            error: null,
+            handleClick: mockHandleClick,
+        });
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("venmo-button");
+        expect(button).not.toHaveAttribute("disabled");
+    });
+
+    it("should pass type prop to venmo-button", () => {
+        const { container } = render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+                type="subscribe"
+            />,
+        );
+        const button = container.querySelector("venmo-button");
+        expect(button).toHaveAttribute("type", "subscribe");
+    });
+
+    it("should pass hook props to useVenmoOneTimePaymentSession", () => {
+        const hookProps = {
+            clientToken: "test-token",
+            amount: "10.00",
+            currency: "USD",
+            onApprove: () => Promise.resolve(),
+            orderId: "123",
+            presentationMode: "auto" as const,
+        };
+        render(<VenmoOneTimePaymentButton {...hookProps} />);
+        expect(mockUseVenmoOneTimePaymentSession).toHaveBeenCalledWith(
+            hookProps,
+        );
+    });
+
+    it("should log error to console when an error from the hook is present", () => {
+        const consoleErrorSpy = jest
+            .spyOn(console, "error")
+            .mockImplementation();
+        const testError = new Error("Test error");
+        mockUseVenmoOneTimePaymentSession.mockReturnValue({
+            error: testError,
+            handleClick: mockHandleClick,
+        });
+        render(
+            <VenmoOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(consoleErrorSpy).toHaveBeenCalledWith(testError);
+        consoleErrorSpy.mockRestore();
+    });
+});

packages/react-paypal-js/src/v6/components/VenmoOneTimePaymentButton.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+
+import { useVenmoOneTimePaymentSession } from "../hooks/useVenmoOneTimePaymentSession";
+import { isServer } from "../utils";
+
+import type { ButtonProps } from "../types";
+import type { UseVenmoOneTimePaymentSessionProps } from "../hooks/useVenmoOneTimePaymentSession";
+
+type VenmoOneTimePaymentButtonProps = UseVenmoOneTimePaymentSessionProps &
+    ButtonProps & {
+        autoRedirect?: never;
+    };
+
+/**
+ * `VenmoOneTimePaymentButton` is a button that provides a standard Venmo payment flow.
+ *
+ * `VenmoOneTimePaymentButtonProps` combines the arguments for {@link UseVenmoOneTimePaymentSessionProps}
+ * and {@link ButtonProps}.
+ *
+ * @example
+ * <VenmoOneTimePaymentButton
+ *   onApprove={() => {
+ *      // ... on approve logic
+ *   }}
+ *   orderId="your-order-id"
+ *   presentationMode="auto"
+ * />
+ */
+export const VenmoOneTimePaymentButton = ({
+    type = "pay",
+    disabled = false,
+    ...hookProps
+}: VenmoOneTimePaymentButtonProps): JSX.Element | null => {
+    const { error, handleClick } = useVenmoOneTimePaymentSession(hookProps);
+    const isServerSide = isServer();
+
+    useEffect(() => {
+        if (error) {
+            console.error(error);
+        }
+    }, [error]);
+
+    return isServerSide ? (
+        <div />
+    ) : (
+        <venmo-button
+            onClick={handleClick}
+            type={type}
+            disabled={disabled || error !== null ? true : undefined}
+        ></venmo-button>
+    );
+};

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

@@ -1,5 +1,6 @@
 import { renderHook } from "@testing-library/react-hooks";
 
+import { expectCurrentErrorValue } from "./useErrorTestUtil";
 import {
     useEligibleMethods,
     fetchEligibleMethods,
@@ -366,7 +367,7 @@ describe("useEligibleMethods", () => {
                     environment: "sandbox",
                 }),
             );
-
+            expectCurrentErrorValue(result.current.error);
             expect(result.current.isLoading).toBe(false);
             expect(result.current.error).toEqual(
                 new Error(

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

@@ -29,7 +29,6 @@ export type UseVenmoOneTimePaymentSessionProps = (
 export function useVenmoOneTimePaymentSession({
     presentationMode,
     fullPageOverlay,
-    autoRedirect,
     createOrder,
     orderId,
     ...callbacks
@@ -85,15 +84,13 @@ export function useVenmoOneTimePaymentSession({
         const startOptions = {
             presentationMode,
             fullPageOverlay,
-            autoRedirect,
         } as VenmoPresentationModeOptions;
 
         await sessionRef.current.start(startOptions, createOrder?.());
     }, [
         isMountedRef,
         presentationMode,
         fullPageOverlay,
-        autoRedirect,
         createOrder,
         setError,
     ]);

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

@@ -1,5 +1,6 @@
 export * from "./types";
 export { PayPalOneTimePaymentButton } from "./components/PayPalOneTimePaymentButton";
+export { VenmoOneTimePaymentButton } from "./components/VenmoOneTimePaymentButton";
 export { PayPalProvider } from "./components/PayPalProvider";
 export { usePayPal } from "./hooks/usePayPal";
 export { usePayLaterOneTimePaymentSession } from "./hooks/usePayLaterOneTimePaymentSession";

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

@@ -12,6 +12,7 @@ declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             "paypal-button": IntrinsicButtonProps;
+            "venmo-button": IntrinsicButtonProps;
         }
     }
 }