feat: load scripts conditionally based on path (#37344)

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/utils/gatsby/layoutSelector.js

@@ -7,6 +7,19 @@ import {
 } from '../../src/components/layouts';
 import FourOhFourPage from '../../src/pages/404';
 
+const scriptAdd = (id, key, async, src) => {
+  var s = document.createElement('script');
+  s.type = 'text/javascript';
+  s.id = id;
+  s.key = key;
+  s.async = async;
+  s.onload = function() {
+    console.log('Stripe injected');
+  };
+  s.src = src;
+  document.getElementsByTagName('head')[0].appendChild(s);
+};
+
 export default function layoutSelector({ element, props }) {
   const {
     location: { pathname }
@@ -27,6 +40,10 @@ export default function layoutSelector({ element, props }) {
       </DefaultLayout>
     );
   }
+  if (/^\/donate(\/.*)*/.test(pathname)) {
+    scriptAdd('stripe-js', 'stripe-js', false, 'https://js.stripe.com/v3/');
+    return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
+  }
   return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
 }