@flopay/react 0.3.12 → 0.3.14

package/dist/index.cjs

@@ -406,6 +406,14 @@ var FLOPAY_KEYFRAMES = `
 function FloPayKeyframes() {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: FLOPAY_KEYFRAMES });
 }
+function toCssSize(value) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+function toCssWeight(value) {
+  if (typeof value === "number" || typeof value === "string") return value;
+  return void 0;
+}
 function ProcessingOverlay({ status, errorMessage }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
     position: "fixed",
@@ -762,7 +770,7 @@ function WalletButtonInner({
             amazonPay: "never",
             klarna: "never"
           },
-          layout: { overflow: "never" }
+          layout: { maxColumns: 1, overflow: "never" }
         }
       }
     ) }),
@@ -1207,23 +1215,58 @@ function SplitCardFormInner({
   const cardInputBg = isButtons ? bStyles.cardInputBackground ?? "white" : "white";
   const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
   const hideTitle = isEmptySlotContent(cardTitleContent);
-  const stripeElementStyle = isButtons && (bStyles.cardInputColor || bStyles.cardInputPlaceholderColor || bStyles.cardInputFontSize) ? {
+  const nameInputOverrides = isButtons ? bStyles.nameInput : void 0;
+  const resolvedInputFontSize = bStyles.cardInputFontSize ?? toCssSize(nameInputOverrides?.fontSize) ?? "16px";
+  const resolvedInputFontFamily = typeof nameInputOverrides?.fontFamily === "string" ? nameInputOverrides.fontFamily : "Poppins, sans-serif";
+  const resolvedInputFontWeight = toCssWeight(nameInputOverrides?.fontWeight) ?? 400;
+  const resolvedInputColor = bStyles.cardInputColor ?? (typeof nameInputOverrides?.color === "string" ? nameInputOverrides.color : void 0) ?? "#262833";
+  const resolvedPlaceholderColor = bStyles.cardInputPlaceholderColor ?? "#9ca3af";
+  const sharedInputTypography = {
+    fontSize: resolvedInputFontSize,
+    fontFamily: resolvedInputFontFamily,
+    fontWeight: resolvedInputFontWeight,
+    color: resolvedInputColor,
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale"
+  };
+  const sharedInputPlaceholderVars = {
+    "--flopay-input-placeholder-color": resolvedPlaceholderColor,
+    "--flopay-input-font-size": resolvedInputFontSize,
+    "--flopay-input-font-family": resolvedInputFontFamily,
+    "--flopay-input-font-weight": String(resolvedInputFontWeight)
+  };
+  const stripeElementStyle = {
     style: {
       base: {
-        ...bStyles.cardInputColor ? { color: bStyles.cardInputColor } : {},
-        ...bStyles.cardInputFontSize ? { fontSize: bStyles.cardInputFontSize } : {},
-        ...bStyles.cardInputPlaceholderColor ? { "::placeholder": { color: bStyles.cardInputPlaceholderColor } } : {}
+        ...sharedInputTypography,
+        fontSmoothing: "antialiased",
+        "::placeholder": {
+          color: resolvedPlaceholderColor,
+          fontSize: resolvedInputFontSize,
+          fontFamily: resolvedInputFontFamily,
+          fontWeight: resolvedInputFontWeight
+        }
       },
       invalid: { color: "#ef4444" }
     }
-  } : {};
+  };
   const cardFormBlock = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
     backgroundColor: cardBg,
     borderRadius: "8px",
     padding: isButtons ? "0" : "1rem",
     ...isButtons ? bStyles.cardFormContainer : {},
-    ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {}
+    ...isButtons ? { padding: bStyles.cardFormContainer?.padding ?? "0" } : {},
+    ...sharedInputPlaceholderVars
   }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        .flopay-shared-input::placeholder {
+          color: var(--flopay-input-placeholder-color);
+          opacity: 1;
+          font-size: var(--flopay-input-font-size);
+          font-family: var(--flopay-input-font-family);
+          font-weight: var(--flopay-input-font-weight);
+        }
+      ` }),
     isButtons && showCardForm && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
@@ -1312,6 +1355,7 @@ function SplitCardFormInner({
     }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
+        className: "flopay-shared-input",
         placeholder: "Full Name on Card",
         autoComplete: "cc-name",
         value: fullName,
@@ -1323,9 +1367,7 @@ function SplitCardFormInner({
           border: "none",
           outline: "none",
           background: "transparent",
-          fontSize: bStyles.cardInputFontSize ?? "16px",
-          fontFamily: "Poppins, sans-serif",
-          color: bStyles.cardInputColor ?? "#262833",
+          ...sharedInputTypography,
           ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
         }
       }
@@ -1360,9 +1402,7 @@ function SplitCardFormInner({
             border: "none",
             outline: "none",
             background: "transparent",
-            fontSize: bStyles.cardInputFontSize ?? "16px",
-            fontFamily: "Poppins, sans-serif",
-            color: bStyles.cardInputColor ?? "#262833",
+            ...sharedInputTypography,
             cursor: "pointer",
             ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
           },
@@ -1383,6 +1423,7 @@ function SplitCardFormInner({
       }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
+          className: "flopay-shared-input",
           placeholder: (0, import_shared4.getPostalCodeLabel)(selectedCountry),
           autoComplete: "postal-code",
           value: zipCode,
@@ -1399,9 +1440,7 @@ function SplitCardFormInner({
             border: "none",
             outline: "none",
             background: "transparent",
-            fontSize: bStyles.cardInputFontSize ?? "16px",
-            fontFamily: "Poppins, sans-serif",
-            color: bStyles.cardInputColor ?? "#262833",
+            ...sharedInputTypography,
             ...isButtons && bStyles.nameInput ? bStyles.nameInput : {}
           }
         }
@@ -1658,6 +1697,7 @@ function FloPayCheckout({
   const [confirmProcessing, setConfirmProcessing] = (0, import_react7.useState)(false);
   const [modeError, setModeError] = (0, import_react7.useState)(null);
   const [createSessionPatch, setCreateSessionPatch] = (0, import_react7.useState)(void 0);
+  const [createSessionPatchBaseHash, setCreateSessionPatchBaseHash] = (0, import_react7.useState)("");
   const [cardBootstrapPending, setCardBootstrapPending] = (0, import_react7.useState)(false);
   const [deferredCardOpen, setDeferredCardOpen] = (0, import_react7.useState)(false);
   const autoCheckoutAttempted = (0, import_react7.useRef)(false);
@@ -1669,10 +1709,22 @@ function FloPayCheckout({
   onDeclineRef.current = onDecline;
   const onSessionCompletedRef = (0, import_react7.useRef)(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
+  const baseCreateSessionHash = (0, import_react7.useMemo)(
+    () => createSessionParams ? hashCreateParams(createSessionParams) : "",
+    [createSessionParams]
+  );
+  const activeCreateSessionPatch = (0, import_react7.useMemo)(
+    () => createSessionPatchBaseHash === baseCreateSessionHash ? createSessionPatch : void 0,
+    [createSessionPatch, createSessionPatchBaseHash, baseCreateSessionHash]
+  );
   const effectiveCreateSession = (0, import_react7.useMemo)(
-    () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, createSessionPatch) : void 0,
-    [createSessionParams, createSessionPatch]
+    () => createSessionParams ? mergeInlineSessionPatch(createSessionParams, activeCreateSessionPatch) : void 0,
+    [createSessionParams, activeCreateSessionPatch]
   );
+  (0, import_react7.useEffect)(() => {
+    setCreateSessionPatch(void 0);
+    setCreateSessionPatchBaseHash(baseCreateSessionHash);
+  }, [baseCreateSessionHash]);
   const emitDecline = (0, import_react7.useCallback)(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
@@ -1860,6 +1912,7 @@ function FloPayCheckout({
         inflightRef.current.delete(cacheKey);
       }
       if (patch) {
+        setCreateSessionPatchBaseHash(baseCreateSessionHash);
         setCreateSessionPatch((prev) => mergeInlineSessionPatches(prev, patch));
       }
       const { sid, result: realResult } = resolved;
@@ -1931,6 +1984,7 @@ function FloPayCheckout({
     }
   }, [
     bootstrapInlineSession,
+    baseCreateSessionHash,
     cardBootstrapPending,
     effectiveCreateSession,
     onButtonClick,
@@ -2259,7 +2313,6 @@ function FloPayCheckout({
         enableAVS,
         avsLayout,
         country: session?.customer?.country,
-        zip: session?.customer?.zip,
         initialCardOpen: deferredCardOpen,
         submitLabel,
         className