fix: remove unnecessary stripe iframes (#37428)

* fix: Remove stripe iframes when navigating away from /donate while still leaving two that may/may not be essential to Stripe

* Moved MutationObserver code into Header component

* fix: make MutationObserver remove old iframes


Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/Header/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 
+import stripeObserver from './stripeIframesFix';
 import UniversalNav from './components/UniversalNav';
 
 import './header.css';
@@ -19,6 +20,10 @@ export class Header extends React.Component {
 
   componentDidMount() {
     document.addEventListener('click', this.handleClickOutside);
+
+    // Remove stacking Stripe iframes with each navigation
+    // after visiting /donate
+    stripeObserver();
   }
 
   componentWillUnmount() {

client/src/components/Header/stripeIframesFix.js

@@ -0,0 +1,30 @@
+const stripeObserver = () => {
+  const config = { attributes: false, childList: true, subtree: false };
+
+  const filterNodes = nl =>
+    Array.from(nl)
+      .filter(b => b.nodeName === 'IFRAME')
+      .filter(b => /__privateStripeController/.test(b.name));
+
+  const mutationCallback = a => {
+    const controllerAdded = a.reduce(
+      (acc, curr) =>
+        curr.type === 'childList'
+          ? [...acc, ...filterNodes(curr.addedNodes)]
+          : acc,
+      []
+    )[0];
+    if (controllerAdded) {
+      const allControllers = filterNodes(document.body.childNodes);
+      allControllers.forEach(controller => {
+        if (controller.name !== controllerAdded.name) {
+          controller.remove();
+        }
+      });
+    }
+  };
+
+  return new MutationObserver(mutationCallback).observe(document.body, config);
+};
+
+export default stripeObserver;

client/src/pages/donate.js

@@ -48,6 +48,7 @@ export class DonatePage extends Component {
     this.handleStripeLoad = this.handleStripeLoad.bind(this);
     this.toggleOtherOptions = this.toggleOtherOptions.bind(this);
   }
+
   componentDidMount() {
     if (window.Stripe) {
       this.handleStripeLoad();