Facebook in-app browser issue

This usually points to one of these causes:

1. **Facebook in-app browser limitations**
– Some features (e.g., Stripe Elements, Google Pay iframes) don’t render correctly inside the FB/Instagram in-app browser because of how Meta embeds WebView.
– They block or restrict things like 3D Secure popups, iframes, and some CSP headers.

2. **CSP / iframe restrictions**
– The warning you pasted (`frame-ancestors ignored in `) shows your Content Security Policy isn’t being applied correctly in that browser.
– Facebook WebView is stricter with iframes like Stripe (`https://js.stripe.com`) and Google Pay (`https://pay.google.com`).

3. **Cookies / SameSite issues**
– In-app browsers often block third-party cookies, which can break payment flows. Stripe and Google Pay sometimes rely on these.

—

✅ **What you can try:**

– **Force users out of the FB browser:**
Add a banner like “⚠️ Please open in Chrome/Safari for payment” if the user is detected inside `FBAN` / `FBAV` user agent.

if (navigator.userAgent.includes("FBAN") || navigator.userAgent.includes("FBAV")) {
      alert("Please open this page in your default browser (Chrome/Safari) for payments to work.");
  }

– **Fix CSP in Apache/Nginx (not meta tag):**

<IfModule mod_headers.c>
      Header set Content-Security-Policy "frame-ancestors 'self' https://pay.google.com https://js.stripe.com"
  </IfModule>

(Must be sent in **HTTP headers**, not “).

– **Test PaymentIntent without iframes** (Stripe Checkout page instead of Elements) – sometimes works better in in-app browsers.

—

👉 Question for you: do you want me to give you **exact detection code** to redirect users from the Facebook in-app browser to Chrome/Safari before checkout? That’s the most reliable fix.