@flopay/react 0.5.13 → 0.5.16

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   PayPalButton: () => PayPalButton,
   PaymentElement: () => PaymentElement,
   SplitCardForm: () => SplitCardForm,
+  isInAppBrowser: () => isInAppBrowser,
   useCheckout: () => useCheckout,
   useElements: () => useElements,
   useFloPay: () => useFloPay,
@@ -661,26 +662,53 @@ function wasSessionRecentlyCompleted(sessionId) {
 
 // src/in-app-browser-notice.tsx
 var import_react7 = require("react");
+
+// src/in-app-browser.ts
+function isInAppBrowser(userAgent) {
+  const ua = userAgent ?? (typeof navigator !== "undefined" ? navigator.userAgent : "");
+  if (!ua) return false;
+  if (/FBAN|FBAV|FB_IAB|FBIOS|Instagram|musical_ly|BytedanceWebview|TikTok/i.test(ua)) {
+    return true;
+  }
+  if (/Twitter|Snapchat|Pinterest|LinkedInApp|Line\/|MicroMessenger|GSA\//i.test(ua)) {
+    return true;
+  }
+  if (/Android.*;\s?wv\)/.test(ua)) return true;
+  if (/(iPhone|iPad|iPod).*AppleWebKit(?!.*Safari)/.test(ua)) return true;
+  return false;
+}
+
+// src/in-app-browser-notice.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DEFAULT_MESSAGE = "PayPal and some digital wallets aren't supported in this browser. Open this page in your device's browser to use them.";
 function InAppBrowserNotice({
   message,
-  openButtonLabel = "Open in browser",
-  copiedButtonLabel = "Link copied \u2014 paste in your browser",
+  openButtonLabel,
+  copiedButtonLabel,
   containerStyle,
   buttonStyle,
   onOpenInBrowser
 }) {
   const [copied, setCopied] = (0, import_react7.useState)(false);
+  const [inAppBrowser, setInAppBrowser] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    setInAppBrowser(isInAppBrowser());
+  }, []);
+  const defaultOpenLabel = inAppBrowser ? "Copy link" : "Open in browser";
+  const defaultCopiedLabel = inAppBrowser ? "Link copied \u2014 open Safari/Chrome and paste" : "Link copied \u2014 paste in your browser";
+  const effectiveOpenLabel = openButtonLabel ?? defaultOpenLabel;
+  const effectiveCopiedLabel = copiedButtonLabel ?? defaultCopiedLabel;
   const handleClick = (0, import_react7.useCallback)(async () => {
     if (typeof window === "undefined") return;
     const url = window.location.href;
     let opened = false;
-    try {
-      const win = window.open(url, "_blank");
-      opened = !!win;
-    } catch {
-      opened = false;
+    if (!inAppBrowser) {
+      try {
+        const win = window.open(url, "_blank");
+        opened = !!win;
+      } catch {
+        opened = false;
+      }
     }
     let didCopy = false;
     if (!opened) {
@@ -695,13 +723,14 @@ function InAppBrowserNotice({
       }
     }
     onOpenInBrowser?.({ opened, copied: didCopy });
-  }, [onOpenInBrowser]);
+  }, [inAppBrowser, onOpenInBrowser]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       role: "status",
       "data-testid": "flopay-in-app-browser-notice",
       style: {
+        marginTop: "0.75rem",
         padding: "0.75rem 0.875rem",
         background: "#FFFBEB",
         border: "1px solid #FDE68A",
@@ -733,7 +762,7 @@ function InAppBrowserNotice({
               cursor: "pointer",
               ...buttonStyle
             },
-            children: copied ? copiedButtonLabel : openButtonLabel
+            children: copied ? effectiveCopiedLabel : effectiveOpenLabel
           }
         )
       ]
@@ -1378,11 +1407,15 @@ function SplitCardFormInner({
   const showWallets = showApplePay || showGooglePay;
   const [paypalLoadState, setPaypalLoadState] = (0, import_react8.useState)("loading");
   const [walletLoadState, setWalletLoadState] = (0, import_react8.useState)("loading");
+  const [inAppBrowserDetected, setInAppBrowserDetected] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    setInAppBrowserDetected(isInAppBrowser());
+  }, []);
   const expectedPayPal = showPayPal && !!paypalStripeInstance;
   const expectedWallets = showWallets && !!stripeInstance;
-  const paypalLoadFailed = expectedPayPal && paypalLoadState === "load_error";
+  const paypalLoadFailed = expectedPayPal && (paypalLoadState === "load_error" || paypalLoadState === "unavailable");
   const walletsLoadFailed = expectedWallets && walletLoadState === "load_error";
-  const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (!expectedPayPal || paypalLoadFailed) && (!expectedWallets || walletsLoadFailed) && (paypalLoadFailed || walletsLoadFailed);
+  const showInAppBrowserNotice = (expectedPayPal || expectedWallets) && (inAppBrowserDetected || paypalLoadFailed || walletsLoadFailed);
   const handleNameChange = (0, import_react8.useCallback)((value) => {
     setFullName(value);
     onFullNameChange?.(value);
@@ -5444,6 +5477,7 @@ function FloPayAutomaticPaymentButton({
   PayPalButton,
   PaymentElement,
   SplitCardForm,
+  isInAppBrowser,
   useCheckout,
   useElements,
   useFloPay,