@flopay/react 0.3.5 → 0.3.11

package/dist/index.cjs

@@ -162,10 +162,29 @@ function DefaultCardButtonContent() {
     )
   ] });
 }
+function DefaultBackButtonContent() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: "Go back" });
+}
+function DefaultTitleContent() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: "Secure card checkout" });
+}
+function isEmptySlotContent(content) {
+  return content !== void 0 && (content === "" || content === null || content === false);
+}
 function CardButtonContentSlot({
   content
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultCardButtonContent, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultCardButtonContent, {}) : content });
+}
+function BackButtonContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultBackButtonContent, {}) : content });
+}
+function TitleContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: content === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultTitleContent, {}) : content });
 }
 
 // src/elements.tsx
@@ -642,6 +661,8 @@ function SplitCardFormInner({
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
   cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent,
   onButtonClick,
   enableAVS = false,
   avsLayout: avsLayoutProp = "row",
@@ -988,6 +1009,8 @@ function SplitCardFormInner({
   const resolvedBorder = isButtons ? bStyles.cardInputBorder ?? "#e5e7eb" : "#A4A4FF";
   const cardBg = isButtons ? bStyles.cardFormContainer?.backgroundColor ?? "white" : "#EDEDFF";
   const cardInputBg = isButtons ? bStyles.cardInputBackground ?? "white" : "white";
+  const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
+  const hideTitle = isEmptySlotContent(cardTitleContent);
   const stripeElementStyle = isButtons && (bStyles.cardInputColor || bStyles.cardInputPlaceholderColor || bStyles.cardInputFontSize) ? {
     style: {
       base: {
@@ -1018,7 +1041,7 @@ function SplitCardFormInner({
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: "0.5rem",
+            gap: hideBackButtonLabel ? 0 : "0.5rem",
             background: "none",
             border: "none",
             cursor: "pointer",
@@ -1043,11 +1066,11 @@ function SplitCardFormInner({
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
             }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            "Go back"
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
+      hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1055,9 +1078,9 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: "Secure card checkout" })
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
+    !isButtons && !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TitleContentSlot, { content: cardTitleContent }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
@@ -1406,6 +1429,8 @@ function FloPayCheckout({
   buttonsTheme,
   buttonsStyles,
   cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent,
   onButtonClick,
   enableAVS,
   avsLayout,
@@ -1863,7 +1888,9 @@ function FloPayCheckout({
         showGooglePay,
         buttonsTheme,
         buttonsStyles,
-        cardButtonContent
+        cardButtonContent,
+        cardBackButtonContent,
+        cardTitleContent
       }
     ) });
   }
@@ -1951,6 +1978,8 @@ function FloPayCheckout({
         buttonsTheme,
         buttonsStyles,
         cardButtonContent,
+        cardBackButtonContent,
+        cardTitleContent,
         onButtonClick,
         enableAVS,
         avsLayout,
@@ -1993,7 +2022,9 @@ function InterimButtonsView({
   showGooglePay,
   buttonsTheme,
   buttonsStyles: stylesOverride,
-  cardButtonContent
+  cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent
 }) {
   const [showCardForm, setShowCardForm] = (0, import_react7.useState)(false);
   const bStyles = (0, import_react7.useMemo)(() => {
@@ -2004,6 +2035,8 @@ function InterimButtonsView({
       ...stylesOverride,
       cardButton: { ...base.cardButton, ...stylesOverride.cardButton },
       cardFormContainer: { ...base.cardFormContainer, ...stylesOverride.cardFormContainer },
+      backButton: { ...base.backButton, ...stylesOverride.backButton },
+      backButtonIcon: { ...base.backButtonIcon, ...stylesOverride.backButtonIcon },
       submitButton: { ...base.submitButton, ...stylesOverride.submitButton },
       title: { ...base.title, ...stylesOverride.title }
     };
@@ -2017,6 +2050,8 @@ function InterimButtonsView({
   if (showCardForm) {
     const inputBorder = bStyles.cardInputBorder ?? "#e5e7eb";
     const inputBg = bStyles.cardInputBackground ?? "white";
+    const hideBackButtonLabel = isEmptySlotContent(cardBackButtonContent);
+    const hideTitle = isEmptySlotContent(cardTitleContent);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
@@ -2030,10 +2065,11 @@ function InterimButtonsView({
           {
             type: "button",
             onClick: () => setShowCardForm(false),
+            "aria-label": "Back to payment methods",
             style: {
               display: "inline-flex",
               alignItems: "center",
-              gap: "0.5rem",
+              gap: hideBackButtonLabel ? 0 : "0.5rem",
               background: "none",
               border: "none",
               cursor: "pointer",
@@ -2055,11 +2091,11 @@ function InterimButtonsView({
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
               }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              "Go back"
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
+        hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1 } }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -2067,7 +2103,7 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: "Secure card checkout" })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex" }, children: [