Freecodecamp: Stripe iframes stack up

[ojeytonwilliams]

Describe the bug
As you move between challenges Stripe iframes are added to the page, but are never removed. I'm not sure how serious this is, but it seems like a bug.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.freecodecamp.dev/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements
2. Open dev console, scroll to the bottom
3. There should be two Stripe iframes
4. Navigate to the next challenge (press escape, press n)
5. See that a new iframe has been added and the old ones remain

Expected behavior
Stripe iframes from previous pages should be removed

Screenshots

[ahmadabdolsaheb]

moving from the challenge back to the map also adds an iframe.
tested locally

[scissorsneedfoodtoo]

Unfortunately this seems to be a longstanding issue with Stripe and SPAs: https://github.com/stripe/react-stripe-elements/issues/99.

[akshaydeep06]

I would like to work on this if no one is working. Should I proceed ?

[akshaydeep06]

I think I will drop on this because I don't have prior knowledge of REACT.

[ojeytonwilliams]

@scissorsneedfoodtoo thanks for finding that! Maybe we can clean up after Stripe, then. How about just using document.querySelectorAll('iframe[name^="__privateStripeController"]') to grab them and then remove them? All of that would be in componentWillUnmount()

[scissorsneedfoodtoo]

Awesome, I was thinking the same thing. I can whip up a PR right away. Mind if I tag you for review once it's ready?

[ahmadabdolsaheb]

Also if this is caused by the donation modal. we are not using it for now.

[ahmadabdolsaheb]

Additionally, although the modal does not mount, its script gets executed which it should not be.