@flopay/react 0.5.12 → 0.5.14

package/dist/index.d.cts

@@ -576,4 +576,65 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
 }
 declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId, checkoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
 
-export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };
+interface InAppBrowserNoticeProps {
+    /** Custom message override. Defaults to a generic, non-platform-specific copy. */
+    message?: React.ReactNode;
+    /** Custom button label. Default depends on the detected environment:
+     *  in-app browser → "Copy link"; other → "Open in browser". */
+    openButtonLabel?: string;
+    /** Custom copied-state button label. Default depends on environment. */
+    copiedButtonLabel?: string;
+    /** Custom CSS overrides for the container, message, and button. */
+    containerStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    /** Called when the user clicks the open-in-browser button. */
+    onOpenInBrowser?: (result: {
+        opened: boolean;
+        copied: boolean;
+    }) => void;
+}
+/**
+ * Non-disruptive notice rendered when PayPal and digital wallets fail to load
+ * — typically because the buyer is in an in-app browser (Instagram, Facebook,
+ * TikTok, etc.) or behind an ad-blocker. The card form remains fully
+ * functional; this notice just informs the buyer about the unavailable
+ * methods and gives them a way to escape to a real browser.
+ *
+ * Action behavior is environment-dependent because `window.open` is a known
+ * liar inside in-app WebViews:
+ *
+ * - **Detected in-app browser** (Facebook/Instagram/TikTok/etc. via UA):
+ *   skip `window.open` entirely. It returns a non-null window but the new
+ *   page opens *inside the same WebView*, which defeats the entire point
+ *   and makes us mis-report `opened: true` to `onOpenInBrowser`. Instead,
+ *   copy the URL to clipboard and surface clear paste-in-Safari/Chrome
+ *   messaging. There is no reliable cross-platform JS API to force a
+ *   WebView to defer to the system browser; the buyer must use the host
+ *   app's "..." / "⋮" menu.
+ * - **Other environments** (desktop with ad-blocker, unknown UA):
+ *   `window.open` may genuinely succeed — try it, fall back to clipboard.
+ */
+declare function InAppBrowserNotice({ message, openButtonLabel, copiedButtonLabel, containerStyle, buttonStyle, onOpenInBrowser, }: InAppBrowserNoticeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Heuristic detector for in-app browser / WebView environments where PayPal
+ * and digital wallets often fail to initialize.
+ *
+ * Pairs with the load-state classifier in `SplitCardForm`: this gives us a
+ * proactive signal (we know we're in a hostile environment before Stripe
+ * even tries), while load state covers the long tail (ad-blockers, new
+ * WebViews we haven't seen, account-misconfig surfacing as `unavailable`).
+ *
+ * Tradeoffs:
+ * - False positives possible. Some modern WebViews (iOS SFSafariViewController
+ *   on recent iOS, Chrome Custom Tabs) handle PayPal fine but match these
+ *   patterns. The notice is non-disruptive — card form keeps working — so we
+ *   accept it.
+ * - False negatives possible. New social-app WebViews ship without us knowing.
+ *   That's why we also keep the reactive load-state signal.
+ *
+ * SSR-safe: returns `false` when `navigator` is undefined.
+ */
+declare function isInAppBrowser(userAgent?: string): boolean;
+
+export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, InAppBrowserNotice, type InAppBrowserNoticeProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, isInAppBrowser, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.d.ts

@@ -576,4 +576,65 @@ interface FloPayAutomaticPaymentButtonProps extends Omit<React.ButtonHTMLAttribu
 }
 declare function FloPayAutomaticPaymentButton({ sessionId, createSession, paymentMethodId, checkoutMethod, clientId, items, subscriptions, account, successUrl, cancelUrl, couponCodes, tagsData, utmMetadata, billingApiUrl, locale, buttonsTheme, buttonsStyles: stylesOverride, onSuccess, onError, onDecline, children, disabled, type, style, ...buttonProps }: FloPayAutomaticPaymentButtonProps): react_jsx_runtime.JSX.Element;
 
-export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };
+interface InAppBrowserNoticeProps {
+    /** Custom message override. Defaults to a generic, non-platform-specific copy. */
+    message?: React.ReactNode;
+    /** Custom button label. Default depends on the detected environment:
+     *  in-app browser → "Copy link"; other → "Open in browser". */
+    openButtonLabel?: string;
+    /** Custom copied-state button label. Default depends on environment. */
+    copiedButtonLabel?: string;
+    /** Custom CSS overrides for the container, message, and button. */
+    containerStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    /** Called when the user clicks the open-in-browser button. */
+    onOpenInBrowser?: (result: {
+        opened: boolean;
+        copied: boolean;
+    }) => void;
+}
+/**
+ * Non-disruptive notice rendered when PayPal and digital wallets fail to load
+ * — typically because the buyer is in an in-app browser (Instagram, Facebook,
+ * TikTok, etc.) or behind an ad-blocker. The card form remains fully
+ * functional; this notice just informs the buyer about the unavailable
+ * methods and gives them a way to escape to a real browser.
+ *
+ * Action behavior is environment-dependent because `window.open` is a known
+ * liar inside in-app WebViews:
+ *
+ * - **Detected in-app browser** (Facebook/Instagram/TikTok/etc. via UA):
+ *   skip `window.open` entirely. It returns a non-null window but the new
+ *   page opens *inside the same WebView*, which defeats the entire point
+ *   and makes us mis-report `opened: true` to `onOpenInBrowser`. Instead,
+ *   copy the URL to clipboard and surface clear paste-in-Safari/Chrome
+ *   messaging. There is no reliable cross-platform JS API to force a
+ *   WebView to defer to the system browser; the buyer must use the host
+ *   app's "..." / "⋮" menu.
+ * - **Other environments** (desktop with ad-blocker, unknown UA):
+ *   `window.open` may genuinely succeed — try it, fall back to clipboard.
+ */
+declare function InAppBrowserNotice({ message, openButtonLabel, copiedButtonLabel, containerStyle, buttonStyle, onOpenInBrowser, }: InAppBrowserNoticeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Heuristic detector for in-app browser / WebView environments where PayPal
+ * and digital wallets often fail to initialize.
+ *
+ * Pairs with the load-state classifier in `SplitCardForm`: this gives us a
+ * proactive signal (we know we're in a hostile environment before Stripe
+ * even tries), while load state covers the long tail (ad-blockers, new
+ * WebViews we haven't seen, account-misconfig surfacing as `unavailable`).
+ *
+ * Tradeoffs:
+ * - False positives possible. Some modern WebViews (iOS SFSafariViewController
+ *   on recent iOS, Chrome Custom Tabs) handle PayPal fine but match these
+ *   patterns. The notice is non-disruptive — card form keeps working — so we
+ *   accept it.
+ * - False negatives possible. New social-app WebViews ship without us knowing.
+ *   That's why we also keep the reactive load-state signal.
+ *
+ * SSR-safe: returns `false` when `navigator` is undefined.
+ */
+declare function isInAppBrowser(userAgent?: string): boolean;
+
+export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayAutomaticPaymentButton, type FloPayAutomaticPaymentButtonProps, type FloPayAutomaticPaymentSuccessEvent, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, InAppBrowserNotice, type InAppBrowserNoticeProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, isInAppBrowser, useCheckout, useElements, useFloPay, usePayPalFloPay };