upgrade to fix guest payment not loading

Author: HackTheW2d

package-lock.json

@@ -83,10 +83,10 @@ describe("PayPalGuestPaymentButton", () => {
             container.querySelector("paypal-basic-card-button"),
         ).not.toBeInTheDocument();
         expect(container.querySelector("div")).toBeInTheDocument();
-        // Container should NOT be present when not hydrated to avoid web component errors
+        // Container should still be present even when not hydrated
         expect(
             container.querySelector("paypal-basic-card-container"),
-        ).not.toBeInTheDocument();
+        ).toBeInTheDocument();
     });
 
     it("should call handleClick when button is clicked", () => {

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

@@ -39,19 +39,17 @@ export const PayPalGuestPaymentButton = ({
         }
     }, [error]);
 
-    if (!isHydrated) {
-        return <div />;
-    }
-
-    return (
-        <paypal-basic-card-container>
-            <paypal-basic-card-button
-                ref={buttonRef}
-                onClick={handleClick}
-                disabled={
-                    disabled || isPending || error !== null ? true : undefined
-                }
-            ></paypal-basic-card-button>
-        </paypal-basic-card-container>
+    const button = isHydrated ? (
+        <paypal-basic-card-button
+            ref={buttonRef}
+            onClick={handleClick}
+            disabled={
+                disabled || isPending || error !== null ? true : undefined
+            }
+        ></paypal-basic-card-button>
+    ) : (
+        <div />
     );
+
+    return <paypal-basic-card-container>{button}</paypal-basic-card-container>;
 };