@flopay/react 0.4.4 → 0.4.5

package/dist/index.d.cts

@@ -128,6 +128,8 @@ interface FloPayCheckoutProps {
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
     className?: string;
+    /** Seed an initial checkout error message for the rendered payment form. */
+    initialErrorMessage?: string | null;
     /**
      * Override the default `SplitCardForm`. When provided, children are rendered
      * inside the initialized `FloPayProvider` with session props auto-injected.
@@ -167,7 +169,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, 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, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider

package/dist/index.d.ts

@@ -128,6 +128,8 @@ interface FloPayCheckoutProps {
     submitLabel?: string;
     /** Additional CSS class for the wrapper. */
     className?: string;
+    /** Seed an initial checkout error message for the rendered payment form. */
+    initialErrorMessage?: string | null;
     /**
      * Override the default `SplitCardForm`. When provided, children are rendered
      * inside the initialized `FloPayProvider` with session props auto-injected.
@@ -167,7 +169,7 @@ interface FloPayCheckoutProps {
  * />
  * ```
  */
-declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: createSessionParams, billingApiUrl, appearance, locale, fallbackPublishableKey, loading: loadingNode, error: errorNode, onComplete, onError, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, 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, onDecline, onFullNameChange, onCountryChange, onZipChange, showPayPal, showApplePay, showGooglePay, layout, buttonsTheme, buttonsStyles, cardButtonContent, cardBackButtonContent, cardTitleContent, showSecurityFooter, onButtonClick, onBeforeButtonClick, enableAVS, avsLayout, submitLabel, className, initialErrorMessage, children, checkoutMode: checkoutModeProp, confirmLabel, renderConfirmButton, onSessionCompleted, }: FloPayCheckoutProps): React.ReactElement;
 
 /**
  * Returns the current `FloPay` instance, or `null` if the provider

package/dist/index.mjs

@@ -2399,6 +2399,7 @@ function FloPayCheckout({
   avsLayout,
   submitLabel,
   className,
+  initialErrorMessage = null,
   children,
   checkoutMode: checkoutModeProp,
   confirmLabel,
@@ -2421,7 +2422,7 @@ function FloPayCheckout({
   const [loadError, setLoadError] = useState3(null);
   const [currentMode, setCurrentMode] = useState3("full");
   const [confirmProcessing, setConfirmProcessing] = useState3(false);
-  const [modeError, setModeError] = useState3(null);
+  const [modeError, setModeError] = useState3(initialErrorMessage);
   const [modeOverlayStatus, setModeOverlayStatus] = useState3(null);
   const [modeOverlayError, setModeOverlayError] = useState3(null);
   const [createSessionPatch, setCreateSessionPatch] = useState3(void 0);
@@ -2468,6 +2469,9 @@ function FloPayCheckout({
     setCreateSessionPatch(void 0);
     setCreateSessionPatchBaseHash(baseCreateSessionHash);
   }, [baseCreateSessionHash]);
+  useEffect4(() => {
+    setModeError(initialErrorMessage);
+  }, [initialErrorMessage]);
   const emitDecline = useCallback2(
     (method, input, overrides) => {
       onDeclineRef.current?.(buildDeclineEvent(method, input, overrides));
@@ -2560,10 +2564,10 @@ function FloPayCheckout({
   }, [sessionIdProp]);
   useEffect4(() => {
     autoCheckoutAttempted.current = false;
-    setModeError(null);
+    setModeError(initialErrorMessage);
     setModeOverlayError(null);
     setModeOverlayStatus(null);
-  }, [sessionIdProp, createSessionHash]);
+  }, [createSessionHash, initialErrorMessage, sessionIdProp]);
   async function resolveInlineSession(params, cacheKey) {
     const api = new PaymentAPI2(resolvedBillingUrl);
     let sid = typeof window !== "undefined" ? window.sessionStorage.getItem(cacheKey) : null;
@@ -4408,7 +4412,7 @@ function FloPayAutomaticPaymentButton({
           padding: "1.5rem",
           zIndex: 1100
         },
-        children: /* @__PURE__ */ jsxs7(
+        children: /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -4424,48 +4428,21 @@ function FloPayAutomaticPaymentButton({
               flexDirection: "column",
               gap: "1rem"
             },
-            children: [
-              /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: "1rem",
-                    alignItems: "flex-start"
-                  },
-                  children: /* @__PURE__ */ jsx9(
-                    "div",
-                    {
-                      style: {
-                        flex: 1,
-                        background: "#fef2f2",
-                        color: "#b91c1c",
-                        border: "1px solid #fecaca",
-                        borderRadius: "12px",
-                        padding: "0.75rem 1rem",
-                        fontSize: "0.9rem",
-                        lineHeight: 1.5
-                      },
-                      children: fallbackSession.errorMessage
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx9(
-                FloPayCheckout,
-                {
-                  sessionId: fallbackSession.sessionId,
-                  checkoutMode: "full",
-                  billingApiUrl: resolvedBillingUrl,
-                  fallbackPublishableKey,
-                  cardTitleContent: null,
-                  showSecurityFooter: false,
-                  onComplete: handleFallbackComplete,
-                  onError: handleFallbackError,
-                  onDecline: handleFallbackDecline
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx9(
+              FloPayCheckout,
+              {
+                sessionId: fallbackSession.sessionId,
+                checkoutMode: "full",
+                billingApiUrl: resolvedBillingUrl,
+                fallbackPublishableKey,
+                initialErrorMessage: fallbackSession.errorMessage,
+                cardTitleContent: null,
+                showSecurityFooter: false,
+                onComplete: handleFallbackComplete,
+                onError: handleFallbackError,
+                onDecline: handleFallbackDecline
+              }
+            )
           }
         )
       }