@flopay/react 0.3.4 → 0.3.11

package/dist/index.d.cts

@@ -83,6 +83,10 @@ interface FloPayCheckoutProps {
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the buttons-layout card back button label. */
+    cardBackButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the card-form title. */
+    cardTitleContent?: React.ReactNode;
     /**
      * Called when a payment method button is clicked.
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
@@ -138,7 +142,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -380,6 +384,10 @@ interface SplitCardFormProps {
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the buttons-layout card back button label. */
+    cardBackButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the card-form title. */
+    cardTitleContent?: React.ReactNode;
     /**
      * Called when a payment method button is clicked.
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`

package/dist/index.d.ts

@@ -83,6 +83,10 @@ interface FloPayCheckoutProps {
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the buttons-layout card back button label. */
+    cardBackButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the card-form title. */
+    cardTitleContent?: React.ReactNode;
     /**
      * Called when a payment method button is clicked.
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`
@@ -138,7 +142,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
+declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, onButtonClick, enableAVS, avsLayout, submitLabel, className, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider
@@ -380,6 +384,10 @@ interface SplitCardFormProps {
     buttonsStyles?: _flopay_shared.ButtonsLayoutStyles;
     /** Custom React content rendered inside the card button when `layout="buttons"`. */
     cardButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the buttons-layout card back button label. */
+    cardBackButtonContent?: React.ReactNode;
+    /** Custom React content rendered for the card-form title. */
+    cardTitleContent?: React.ReactNode;
     /**
      * Called when a payment method button is clicked.
      * `method`: `'card'` | `'paypal'` | `'apple_pay'` | `'google_pay'`

package/dist/index.mjs

@@ -113,10 +113,29 @@ function DefaultCardButtonContent() {
     )
   ] });
 }
+function DefaultBackButtonContent() {
+  return /* @__PURE__ */ jsx2(Fragment, { children: "Go back" });
+}
+function DefaultTitleContent() {
+  return /* @__PURE__ */ jsx2(Fragment, { children: "Secure card checkout" });
+}
+function isEmptySlotContent(content) {
+  return content !== void 0 && (content === "" || content === null || content === false);
+}
 function CardButtonContentSlot({
   content
 }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: content ?? /* @__PURE__ */ jsx2(DefaultCardButtonContent, {}) });
+  return /* @__PURE__ */ jsx2(Fragment, { children: content === void 0 ? /* @__PURE__ */ jsx2(DefaultCardButtonContent, {}) : content });
+}
+function BackButtonContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: content === void 0 ? /* @__PURE__ */ jsx2(DefaultBackButtonContent, {}) : content });
+}
+function TitleContentSlot({
+  content
+}) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: content === void 0 ? /* @__PURE__ */ jsx2(DefaultTitleContent, {}) : content });
 }
 
 // src/elements.tsx
@@ -311,6 +330,14 @@ function ProcessingOverlay({ status, errorMessage }) {
       status === "success" && "PAYMENT SUCCESSFUL",
       status === "error" && "PAYMENT FAILED"
     ] }),
+    status === "success" && /* @__PURE__ */ jsx4("p", { style: {
+      fontSize: 13,
+      color: "#6b7280",
+      fontWeight: 400,
+      maxWidth: 260,
+      lineHeight: 1.4,
+      margin: 0
+    }, children: "You will be automatically redirected, do not close or navigate away from this window." }),
     status === "error" && errorMessage && /* @__PURE__ */ jsx4("p", { style: {
       fontSize: 13,
       color: "#6b7280",
@@ -590,6 +617,8 @@ function SplitCardFormInner({
   buttonsTheme,
   buttonsStyles: buttonsStylesOverride,
   cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent,
   onButtonClick,
   enableAVS = false,
   avsLayout: avsLayoutProp = "row",
@@ -936,6 +965,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: {
@@ -966,7 +997,7 @@ function SplitCardFormInner({
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: "0.5rem",
+            gap: hideBackButtonLabel ? 0 : "0.5rem",
             background: "none",
             border: "none",
             cursor: "pointer",
@@ -991,11 +1022,11 @@ function SplitCardFormInner({
               transition: "background-color 0.15s",
               ...bStyles.backButtonIcon
             }, children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M15 18l-6-6 6-6" }) }) }),
-            "Go back"
+            /* @__PURE__ */ jsx4(BackButtonContentSlot, { content: cardBackButtonContent })
           ]
         }
       ),
-      /* @__PURE__ */ jsx4("div", { style: {
+      hideTitle ? /* @__PURE__ */ jsx4("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx4("div", { style: {
         flex: 1,
         textAlign: "center",
         fontWeight: 600,
@@ -1003,9 +1034,9 @@ function SplitCardFormInner({
         color: "#262833",
         paddingRight: 80,
         ...bStyles.title
-      }, children: "Secure card checkout" })
+      }, children: /* @__PURE__ */ jsx4(TitleContentSlot, { content: cardTitleContent }) })
     ] }),
-    !isButtons && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: "Secure card checkout" }),
+    !isButtons && !hideTitle && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", fontWeight: 600, fontSize: "1.1rem", padding: "0.5rem 0", color: "#262833" }, children: /* @__PURE__ */ jsx4(TitleContentSlot, { content: cardTitleContent }) }),
     /* @__PURE__ */ jsx4("div", { style: {
       backgroundColor: cardInputBg,
       border: `1px solid ${resolvedBorder}`,
@@ -1354,6 +1385,8 @@ function FloPayCheckout({
   buttonsTheme,
   buttonsStyles,
   cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent,
   onButtonClick,
   enableAVS,
   avsLayout,
@@ -1811,7 +1844,9 @@ function FloPayCheckout({
         showGooglePay,
         buttonsTheme,
         buttonsStyles,
-        cardButtonContent
+        cardButtonContent,
+        cardBackButtonContent,
+        cardTitleContent
       }
     ) });
   }
@@ -1899,6 +1934,8 @@ function FloPayCheckout({
         buttonsTheme,
         buttonsStyles,
         cardButtonContent,
+        cardBackButtonContent,
+        cardTitleContent,
         onButtonClick,
         enableAVS,
         avsLayout,
@@ -1941,7 +1978,9 @@ function InterimButtonsView({
   showGooglePay,
   buttonsTheme,
   buttonsStyles: stylesOverride,
-  cardButtonContent
+  cardButtonContent,
+  cardBackButtonContent,
+  cardTitleContent
 }) {
   const [showCardForm, setShowCardForm] = useState3(false);
   const bStyles = useMemo3(() => {
@@ -1952,6 +1991,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 }
     };
@@ -1965,6 +2006,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__ */ jsxs3("div", { style: {
       backgroundColor: bStyles.cardFormContainer?.backgroundColor ?? "white",
       borderRadius: "8px",
@@ -1978,10 +2021,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",
@@ -2003,11 +2047,11 @@ function InterimButtonsView({
                 backgroundColor: "#f3f4f6",
                 ...bStyles.backButtonIcon
               }, children: /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M15 18l-6-6 6-6" }) }) }),
-              "Go back"
+              /* @__PURE__ */ jsx5(BackButtonContentSlot, { content: cardBackButtonContent })
             ]
           }
         ),
-        /* @__PURE__ */ jsx5("div", { style: {
+        hideTitle ? /* @__PURE__ */ jsx5("div", { style: { flex: 1 } }) : /* @__PURE__ */ jsx5("div", { style: {
           flex: 1,
           textAlign: "center",
           fontWeight: 600,
@@ -2015,7 +2059,7 @@ function InterimButtonsView({
           color: "#262833",
           paddingRight: 80,
           ...bStyles.title
-        }, children: "Secure card checkout" })
+        }, children: /* @__PURE__ */ jsx5(TitleContentSlot, { content: cardTitleContent }) })
       ] }),
       /* @__PURE__ */ jsx5("div", { style: { backgroundColor: inputBg, border: `1px solid ${inputBorder}`, borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 12, height: 45 }, children: /* @__PURE__ */ jsx5("div", { style: { width: "60%", height: 14, borderRadius: 4, background: "#e5e7eb", animation: "flopay-interim-pulse 1.5s ease-in-out infinite" } }) }),
       /* @__PURE__ */ jsxs3("div", { style: { display: "flex" }, children: [