fix: load stripe conditionally (#37365)

client/gatsby-ssr.js

@@ -38,12 +38,6 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
         `
         }}
         key='gtag-dataLayer'
-      />,
-      <script
-        async={true}
-        id='stripe-js'
-        key='stripe-js'
-        src='https://js.stripe.com/v3/'
       />
     ].filter(Boolean)
   );

client/package.json

@@ -90,6 +90,7 @@
     "format:src": "prettier-eslint --write --trailing-comma none --single-quote './src/**/*.js'",
     "format:utils": "prettier-eslint --write --trailing-comma none --single-quote './utils/**/*.js'",
     "format": "npm run format:gatsby && npm run format:src && npm run format:utils",
+    "serve": "gatsby serve",
     "test": "jest"
   },
   "devDependencies": {

client/src/components/Donation/components/DonateModal.js

@@ -14,6 +14,7 @@ import {
   closeDonationModal,
   isDonationModalOpenSelector
 } from '../../../redux';
+import { stripeScriptLoader } from '../../../utils/scriptLoaders';
 
 import PoweredByStripe from './poweredByStripe';
 import DonateText from './DonateText';
@@ -50,20 +51,29 @@ class DonateModal extends Component {
   }
   componentDidMount() {
     if (window.Stripe) {
-      /* eslint-disable react/no-did-mount-set-state */
+      this.handleStripeLoad();
-      this.setState(state => ({
+    } else if (document.querySelector('#stripe-js')) {
-        ...state,
+      document
-        stripe: window.Stripe(stripePublicKey)
+        .querySelector('#stripe-js')
-      }));
+        .addEventListener('load', this.handleStripeLoad);
     } else {
-      document.querySelector('#stripe-js').addEventListener('load', () => {
+      stripeScriptLoader(this.handleStripeLoad);
-        // Create Stripe instance once Stripe.js loads
+    }
-        console.info('stripe has loaded');
+  }
-        this.setState(state => ({
+
-          ...state,
+  handleStripeLoad() {
-          stripe: window.Stripe(stripePublicKey)
+    // Create Stripe instance once Stripe.js loads
-        }));
+    console.info('stripe has loaded');
-      });
+    this.setState(state => ({
+      ...state,
+      stripe: window.Stripe(stripePublicKey)
+    }));
+  }
+
+  componentWillUnmount() {
+    const stripeMountPoint = document.querySelector('#stripe-js');
+    if (stripeMountPoint) {
+      stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
     }
   }
 

client/src/pages/donate.js

@@ -13,6 +13,7 @@ import DonateForm from '../components/Donation/components/DonateForm';
 import DonateText from '../components/Donation/components/DonateText';
 import PoweredByStripe from '../components/Donation/components/poweredByStripe';
 import { signInLoadingSelector, isSignedInSelector, hardGoTo } from '../redux';
+import { stripeScriptLoader } from '../utils/scriptLoaders';
 
 const mapStateToProps = createSelector(
   signInLoadingSelector,
@@ -45,21 +46,18 @@ export class DonatePage extends Component {
   }
   componentDidMount() {
     if (window.Stripe) {
-      /* eslint-disable react/no-did-mount-set-state */
+      this.handleStripeLoad();
-      this.setState(state => ({
-        ...state,
-        stripe: window.Stripe(stripePublicKey)
-      }));
     } else if (document.querySelector('#stripe-js')) {
       document
         .querySelector('#stripe-js')
         .addEventListener('load', this.handleStripeLoad);
+    } else {
+      stripeScriptLoader(this.handleStripeLoad);
     }
   }
 
   componentWillUnmount() {
     const stripeMountPoint = document.querySelector('#stripe-js');
-
     if (stripeMountPoint) {
       stripeMountPoint.removeEventListener('load', this.handleStripeLoad);
     }

client/src/utils/scriptLoaders.js

@@ -0,0 +1,19 @@
+export const scriptLoader = (id, key, async, src, onload) => {
+  var s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.id = id;
+  s.key = key;
+  s.async = async;
+  s.onload = onload;
+  s.src = src;
+  document.getElementsByTagName('head')[0].appendChild(s);
+};
+
+export const stripeScriptLoader = onload =>
+  scriptLoader(
+    'stripe-js',
+    'stripe-js',
+    false,
+    'https://js.stripe.com/v3/',
+    onload
+  );

package.json

@@ -39,6 +39,7 @@
     "seed": "npm-run-all -p seed:*",
     "seed:auth-user": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedAuthUser",
     "seed:challenges": "cross-env DEBUG=fcc:* node ./tools/scripts/seed/seedChallenges",
+    "serve:client": "cd ./client && npm run serve",
     "test": "npm-run-all -p test:*",
     "test:client": "cd ./client && npm test && cd ../",
     "test:curriculum": "cd ./curriculum && npm test && cd ../",