From 87be96a2448124a83909492384a68ecb58fa5757 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 16 Oct 2019 22:14:53 +0300
Subject: [PATCH] feat: load scripts conditionally based on path (#37344)

---
 client/gatsby-ssr.js                  |  6 ------
 client/utils/gatsby/layoutSelector.js | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index cfdb4f187a..9306aa55aa 100644
--- a/client/gatsby-ssr.js
+++ b/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)
   );
diff --git a/client/utils/gatsby/layoutSelector.js b/client/utils/gatsby/layoutSelector.js
index c2a1d48fdd..1d12fd5bf2 100644
--- a/client/utils/gatsby/layoutSelector.js
+++ b/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>;
 }