Feature: Add Credit one time payment, save payment, and Subscription static UI buttons (#835)

* add credit one time payment static button

* add credit save payment button

* add subscription button and update index

* chore: add changeset

Author: EvanReinstein

.changeset/empty-rings-draw.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": minor
+---
+
+Adds 3 static UI components: PayPal Credit One Time Payment, PayPal Credit Save Payment, and PayPal Subscriptions.

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

@@ -0,0 +1,227 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+
+import { PayPalCreditOneTimePaymentButton } from "./PayPalCreditOneTimePaymentButton";
+import { usePayPalCreditOneTimePaymentSession } from "../hooks/usePayPalCreditOneTimePaymentSession";
+import { usePayPal } from "../hooks/usePayPal";
+
+jest.mock("../hooks/usePayPalCreditOneTimePaymentSession", () => ({
+    usePayPalCreditOneTimePaymentSession: jest.fn(),
+}));
+jest.mock("../hooks/usePayPal", () => ({
+    usePayPal: jest.fn(),
+}));
+
+describe("PayPalCreditOneTimePaymentButton", () => {
+    const mockHandleClick = jest.fn();
+    const mockUsePayPalCreditOneTimePaymentSession =
+        usePayPalCreditOneTimePaymentSession as jest.Mock;
+    const mockUsePayPal = usePayPal as jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockUsePayPalCreditOneTimePaymentSession.mockReturnValue({
+            error: null,
+            isPending: false,
+            handleClick: mockHandleClick,
+        });
+        mockUsePayPal.mockReturnValue({
+            eligiblePaymentMethods: null,
+            isHydrated: true,
+        });
+    });
+
+    it("should render paypal-credit-button when hydrated", () => {
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(
+            container.querySelector("paypal-credit-button"),
+        ).toBeInTheDocument();
+    });
+
+    it("should render a div when not hydrated", () => {
+        mockUsePayPal.mockReturnValue({
+            eligiblePaymentMethods: null,
+            isHydrated: false,
+        });
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(
+            container.querySelector("paypal-credit-button"),
+        ).not.toBeInTheDocument();
+        expect(container.querySelector("div")).toBeInTheDocument();
+    });
+
+    it("should call handleClick when button is clicked", () => {
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("paypal-credit-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(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+                disabled={true}
+            />,
+        );
+        const button = container.querySelector("paypal-credit-button");
+        expect(button).toHaveAttribute("disabled");
+    });
+
+    it("should disable button when error is present", () => {
+        jest.spyOn(console, "error").mockImplementation();
+        mockUsePayPalCreditOneTimePaymentSession.mockReturnValue({
+            error: new Error("Test error"),
+            isPending: false,
+            handleClick: mockHandleClick,
+        });
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("paypal-credit-button");
+        expect(button).toHaveAttribute("disabled");
+    });
+
+    it("should not disable button when error is null", () => {
+        mockUsePayPalCreditOneTimePaymentSession.mockReturnValue({
+            error: null,
+            isPending: false,
+            handleClick: mockHandleClick,
+        });
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        const button = container.querySelector("paypal-credit-button");
+        expect(button).not.toHaveAttribute("disabled");
+    });
+
+    it("should return null when isPending is true", () => {
+        mockUsePayPalCreditOneTimePaymentSession.mockReturnValue({
+            error: null,
+            isPending: true,
+            handleClick: mockHandleClick,
+        });
+        const { container } = render(
+            <PayPalCreditOneTimePaymentButton
+                onApprove={() => Promise.resolve()}
+                orderId="123"
+                presentationMode="auto"
+            />,
+        );
+        expect(
+            container.querySelector("paypal-credit-button"),
+        ).not.toBeInTheDocument();
+        expect(container.firstChild).toBeNull();
+    });
+
+    it("should pass hook props to usePayPalCreditOneTimePaymentSession", () => {
+        const hookProps = {
+            clientToken: "test-token",
+            amount: "10.00",
+            currency: "USD",
+            onApprove: () => Promise.resolve(),
+            orderId: "123",
+            presentationMode: "auto" as const,
+        };
+        render(<PayPalCreditOneTimePaymentButton {...hookProps} />);
+        expect(mockUsePayPalCreditOneTimePaymentSession).toHaveBeenCalledWith(
+            hookProps,
+        );
+    });
+
+    describe("auto-population from eligibility context", () => {
+        it("should auto-populate countryCode from eligibility context", () => {
+            mockUsePayPal.mockReturnValue({
+                isHydrated: true,
+                eligiblePaymentMethods: {
+                    isEligible: jest.fn().mockReturnValue(true),
+                    getDetails: jest.fn().mockReturnValue({
+                        countryCode: "US",
+                        canBeVaulted: false,
+                    }),
+                },
+            });
+
+            const { container } = render(
+                <PayPalCreditOneTimePaymentButton
+                    onApprove={() => Promise.resolve()}
+                    orderId="123"
+                    presentationMode="auto"
+                />,
+            );
+
+            const button = container.querySelector("paypal-credit-button");
+            expect(button).toHaveAttribute("countrycode", "US");
+        });
+
+        it("should handle when eligibility was not fetched", () => {
+            mockUsePayPal.mockReturnValue({
+                isHydrated: true,
+                eligiblePaymentMethods: null,
+            });
+
+            const { container } = render(
+                <PayPalCreditOneTimePaymentButton
+                    onApprove={() => Promise.resolve()}
+                    orderId="123"
+                    presentationMode="auto"
+                />,
+            );
+
+            const button = container.querySelector("paypal-credit-button");
+            expect(button).not.toHaveAttribute("countrycode");
+        });
+
+        it("should handle when credit details are not available", () => {
+            mockUsePayPal.mockReturnValue({
+                isHydrated: true,
+                eligiblePaymentMethods: {
+                    isEligible: jest.fn().mockReturnValue(false),
+                    getDetails: jest.fn().mockReturnValue(undefined),
+                },
+            });
+
+            const { container } = render(
+                <PayPalCreditOneTimePaymentButton
+                    onApprove={() => Promise.resolve()}
+                    orderId="123"
+                    presentationMode="auto"
+                />,
+            );
+
+            const button = container.querySelector("paypal-credit-button");
+            expect(button).not.toHaveAttribute("countrycode");
+        });
+    });
+});

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

@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+
+import { usePayPalCreditOneTimePaymentSession } from "../hooks/usePayPalCreditOneTimePaymentSession";
+import { usePayPal } from "../hooks/usePayPal";
+
+import type { UsePayPalCreditOneTimePaymentSessionProps } from "../hooks/usePayPalCreditOneTimePaymentSession";
+
+export type PayPalCreditOneTimePaymentButtonProps =
+    UsePayPalCreditOneTimePaymentSessionProps & {
+        autoRedirect?: never;
+        disabled?: boolean;
+    };
+
+/**
+ * `PayPalCreditOneTimePaymentButton` is a button that provides a PayPal Credit payment flow.
+ *
+ * The `countryCode` is automatically populated from the eligibility API response
+ * (available via `usePayPal().eligiblePaymentMethods`). The button requires eligibility to be configured
+ * in the parent `PayPalProvider`, using either the `useEligibleMethods` hook client-side or `useFetchEligibleMethods` server-side.
+ *
+ * Note, `autoRedirect` is not allowed because if given a `presentationMode` of `"redirect"` the button
+ * would not be able to provide back `redirectURL` from `start`. Advanced integrations that need
+ * `redirectURL` should use the {@link usePayPalCreditOneTimePaymentSession} hook directly.
+ *
+ * @example
+ * <PayPalCreditOneTimePaymentButton
+ *   onApprove={() => {
+ *      // ... on approve logic
+ *   }}
+ *   orderId="your-order-id"
+ *   presentationMode="auto"
+ * />
+ */
+export const PayPalCreditOneTimePaymentButton = ({
+    disabled = false,
+    ...hookProps
+}: PayPalCreditOneTimePaymentButtonProps): JSX.Element | null => {
+    const { eligiblePaymentMethods, isHydrated } = usePayPal();
+    const { error, isPending, handleClick } =
+        usePayPalCreditOneTimePaymentSession(hookProps);
+
+    const creditDetails = eligiblePaymentMethods?.getDetails("credit");
+    const countryCode = creditDetails?.countryCode;
+
+    useEffect(() => {
+        if (error) {
+            console.error(error);
+        }
+    }, [error]);
+
+    if (isPending) {
+        return null;
+    }
+
+    return isHydrated ? (
+        <paypal-credit-button
+            onClick={handleClick}
+            countryCode={countryCode}
+            disabled={disabled || !!error || undefined}
+        ></paypal-credit-button>
+    ) : (
+        <div />
+    );
+};