anom4ly_error | Stripe Developers | Page 1

thick hullBOT May 30, 2025, 6:38 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1378080268128227464

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

smoky summit May 30, 2025, 6:40 PM

#

Could you share your development website that reproduces this error, so that we can take a look?

scenic crane May 30, 2025, 6:41 PM

#

My github repo? the websites not live at the moment.

smoky summit May 30, 2025, 6:44 PM

#

We need a runnable code that reproduces the error. The best is to share your development website, otherwise the minimal code (not your entire code base) that reproduces the issue will be helpful as well

thick hullBOT May 30, 2025, 6:47 PM

#

scenic crane May 30, 2025, 6:47 PM

#

runnable code e.g. having the webserver running with django as well?

#

Ig i can add you as a collaborator within my github repo since it's currently private, but not sure how to feel about sharing my entire codebase. Not possible to send partial code or give all relevant code as needed?

#

^ Not trying to be rude or anything, just not sure how code privacy is handled here.

zealous crown May 30, 2025, 6:51 PM

#

Hi taking over here

#

river has to step away

#

Looking

#

Hm did you try just Chrome

#

Without any extensions

scenic crane May 30, 2025, 6:54 PM

#

Nope, let me try. Reason why I haven't tried it was if it didn't work on vanilla firefox or brave, then it would already alienate so many users 😭 I'm trying now.

zealous crown May 30, 2025, 6:54 PM

#

Let me know what error you see if it doesn't work

#

Curious if it's different in chrome

scenic crane May 30, 2025, 6:57 PM

#

uiLayer-590f6a0….js:53 Uncaught (in promise) SubmerchantAuthError: Popup is blocked by browser.
    at uiLayer-590f6a0….js:53:4333
    at new Promise (<anonymous>)
    at uiLayer-590f6a0….js:53:4258
    at uiLayer-590f6a0….js:53:4448
    at async uiLayer-590f6a0eecaeca2d72de.js:53:5352

#

Same error as on chrome

zealous crown May 30, 2025, 6:58 PM

#

Ok thanks

#

Hm let me see if we can repro on a sample integration

scenic crane May 30, 2025, 6:58 PM

#

🙏 sounds good, thank you!

zealous crown May 30, 2025, 7:01 PM

#

Where did you see the csp errors originally?

#

That does look like a different error

#

This one:

MouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead. isVirtualEvent.ts:17:6
Uncaught (in promise) SubmerchantAuthError: Popup is blocked by browser.
    r SubmerchantAuthenticationError.ts:5```

#

That's different from your screenshot

scenic crane May 30, 2025, 7:01 PM

#

Yep, the screenshot is on chrome, the error I was getting was on firefox

zealous crown May 30, 2025, 7:02 PM

#

So it is a different error then ok

scenic crane May 30, 2025, 7:02 PM

#

#

^ That's firefox

#

both do lead to the same error, popup being blocked by browser in the end.

If I look into the console and see the source code, this is the error:

  const openPopup = React.useCallback(
    (url: URL, width: number, height: number) => {
      return new Promise<Window>((resolve, reject) => {
        const params = calculatePopupParams(width, height);
        // Needs to use windowOpen to ensure window.opener is available, do not migrate to safeWindowOpen
        const popup = windowOpen(url.toString(), POPUP_NAME, params);

        if (popup == null) {
          reject(new SubmerchantAuthError('Popup is blocked by browser.'));
        } else {
          resolve(popup);
        }
      });
    },
    [],
  );

within SubmerchantAuthenticationContext.tsx:466

#

^ not sure whether useful, just trying to give more context

zealous crown May 30, 2025, 7:05 PM

#

Gotcha thanks

#

Are you attempting to render the component in an embedded webview?

#

That seems to be a common cause for this: https://github.com/stripe/react-connect-js/issues/93

#

And isn't supported as of yet: https://docs.stripe.com/connect/get-started-connect-embedded-components?platform=web#supported-browsers

scenic crane May 30, 2025, 7:08 PM

#

oo, not sure what you mean. What's the difference between embedded components and embedded web views? Using the payouts and payment embedded components works just fine

zealous crown May 30, 2025, 7:08 PM

#

Works fine on the same site/server?

scenic crane May 30, 2025, 7:09 PM

#

  const paymentsComponent = instance.create("payments");
  const accountManagementComponent = instance.create("account-management");
  document.getElementById('payouts').appendChild(payoutComponent);
  document.getElementById('payments').appendChild(paymentsComponent);
  document.getElementById('account-management').appendChild(accountManagementComponent);

        <input type="radio" name="my_tabs_2" class="tab" aria-label="Payouts"/>
        <div class="tab-content p-5 space-y-5">
            <div id="payouts">
                <h2 class="text-xl font-semibold mb-4">Payouts</h2>
            </div>
            <div id="payments">
                <h2 class="text-xl font-semibold mb-4">Past payments</h2>
            </div>
        </div>

        <input type="radio" name="my_tabs_2" id="open-account-management" class="tab" aria-label="Stripe Account Management"/>
        <div class="tab-content p-5 space-y-5">
            <div id="account-management">
            </div>
        </div>

This is my js and html

#

#

Indeed, they work on the same server

zealous crown May 30, 2025, 7:09 PM

#

Oh yeah that should be fine

#

Hm

#

Ok can you try one thing

#

Can you set the following in your csp: https://docs.stripe.com/connect/get-started-connect-embedded-components?platform=web#csp-and-http-header-requirements

scenic crane May 30, 2025, 7:11 PM

#

Coolio let me try that

#

absolute goat 😭

@login_required
def dashboard(request: HttpRequest) -> HttpResponse:
    user: User = request.user  # type: ignore
    if not user.is_organizer:
        return render(request, "dashboard/complete_organizer_profile.html")

    organizer = Organizer.objects.get(user=user)
    events = Event.objects.filter(organizer=organizer)
    response = render(request, "dashboard/dashboard.html", {"events": events})
    # Set CSP header that allows all your resources
    csp_policy = (
        "default-src 'self'; "
        "script-src 'self' 'unsafe-inline' 'unsafe-eval' "
        "https://connect-js.stripe.com https://js.stripe.com "
        "https://cdn.jsdelivr.net https://unpkg.com; "
        "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net "
        "sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk=; "
        "font-src 'self' https://cdn.jsdelivr.net https://fonts.gstatic.com; "
        "frame-src 'self' https://connect-js.stripe.com https://js.stripe.com; "
        "img-src 'self' https://*.stripe.com data: blob:; "
        "connect-src 'self' https://api.stripe.com https://connect-js.stripe.com https://q.stripe.com;"
    )

    response["Content-Security-Policy"] = csp_policy
    response["Cross-Origin-Opener-Policy"] = "unsafe-none"
    print("CSP HEADER:", response.get("Content-Security-Policy"))
    return response

This fixed it. I feel so dumb I thought I tried everything 😭

zealous crown May 30, 2025, 7:23 PM

#

Woohoo!

scenic crane May 30, 2025, 7:24 PM

#

Thank you

#anom4ly_error