@fractalpay/fractalpay-next-dev 0.0.283 → 0.0.284

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-dev",
-      version: "0.0.283",
+      version: "0.0.284",
       private: false,
       type: "module",
       scripts: {
@@ -9928,7 +9928,7 @@ var ErrorCardOverlay = ({ onClose, error, autoTrigger = false }) => {
 var ErrorCardOverlay_default = ErrorCardOverlay;
 
 // src/app/components/Atoms/Googlepay/Googlepay.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef10, useState as useState10 } from "react";
 
 // src/app/components/Atoms/Googlepay/GooglePayScriptLoader.tsx
 import { useEffect as useEffect15 } from "react";
@@ -9978,8 +9978,8 @@ function GooglePayComponent({
   completeFractalFlow,
   setLoading
 }) {
-  const containerRef = useRef10(null);
   const paymentsClientRef = useRef10(null);
+  const [isReady, setIsReady] = useState10(false);
   const baseRequest = {
     apiVersion: 2,
     apiVersionMinor: 0
@@ -10072,18 +10072,8 @@ function GooglePayComponent({
       const response = await client.isReadyToPay(
         getIsReadyToPayRequest()
       );
-      if (response.result && containerRef.current) {
-        const button = client.createButton({
-          onClick: onGooglePayClick,
-          allowedPaymentMethods: [baseCardPaymentMethod],
-          buttonType: "pay",
-          buttonColor: "black",
-          buttonRadius: 8
-        });
-        if (containerRef.current) {
-          containerRef.current.innerHTML = "";
-        }
-        containerRef.current.appendChild(button);
+      if (response.result) {
+        setIsReady(true);
       }
     } catch (err) {
       console.error("Google Pay init error:", err);
@@ -10113,7 +10103,14 @@ function GooglePayComponent({
     }, 0);
   };
   return /* @__PURE__ */ jsxs20(Fragment19, { children: [
-    /* @__PURE__ */ jsx34("div", { ref: containerRef, className: "text-center" }),
+    isReady && /* @__PURE__ */ jsx34(
+      "button",
+      {
+        className: "gpay-custom-btn",
+        onClick: onGooglePayClick,
+        disabled: !amount
+      }
+    ),
     /* @__PURE__ */ jsx34(GooglePayScriptLoader, { onLoad: onScriptLoad })
   ] });
 }
@@ -12347,6 +12344,41 @@ padding:0px !important;
     min-width: 300px;
 }
 
+.gpay-custom-btn {
+  height: 48px;
+  width: 100%;
+  max-width: 320px;
+
+  background-color: #000;
+  background-image: url("https://www.gstatic.com/instantbuy/svg/dark/pay/en.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.gpay-custom-btn {
+  background-size: 120px auto; /* tweak 65%\u201375% for perfect match */
+}
+
+
+.gpay-custom-btn:hover {
+  opacity: 0.9;
+}
+
+.gpay-custom-btn:active {
+  transform: scale(0.98);
+}
+
+
+.gpay-custom-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 
     ${extraCustomCSS}