Fix Stripe loading

Author: CompuIves

packages/app/src/app/components/SubscribeForm/SubscribeForm.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import { StripeProvider, Elements } from 'react-stripe-elements';
 import { STRIPE_API_KEY } from '@codesandbox/common/lib/utils/config';
+import { useScript } from 'app/hooks';
 import { CheckoutForm } from './CheckoutForm';
 import { Container } from './elements';
 
@@ -14,6 +16,8 @@ interface ISubscribeFormProps {
   hasCoupon?: boolean;
 }
 
+const context = window as any;
+
 export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
   name,
   subscribe,
@@ -22,20 +26,33 @@ export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
   isLoading = false,
   error,
   hasCoupon,
-}) => (
-  <Container>
-    <StripeProvider apiKey={STRIPE_API_KEY}>
-      <Elements>
-        <CheckoutForm
-          buttonName={buttonName}
-          loadingText={loadingText}
-          subscribe={subscribe}
-          name={name}
-          isLoading={isLoading}
-          error={error}
-          hasCoupon={hasCoupon}
-        />
-      </Elements>
-    </StripeProvider>
-  </Container>
-);
+}) => {
+  const [stripe, setStripe] = React.useState(null);
+  const [loaded] = useScript('https://js.stripe.com/v3/');
+
+  React.useEffect(() => {
+    if (context.Stripe) {
+      setStripe(context.Stripe(STRIPE_API_KEY));
+    }
+  }, [loaded]);
+
+  return (
+    <>
+      <Container>
+        <StripeProvider stripe={stripe}>
+          <Elements>
+            <CheckoutForm
+              buttonName={buttonName}
+              loadingText={loadingText}
+              subscribe={subscribe}
+              name={name}
+              isLoading={isLoading}
+              error={error}
+              hasCoupon={hasCoupon}
+            />
+          </Elements>
+        </StripeProvider>
+      </Container>
+    </>
+  );
+};

packages/app/src/app/pages/Patron/index.js

@@ -19,7 +19,6 @@ class Patron extends React.Component {
       <MaxWidth>
         <Helmet>
           <title>Patron - CodeSandbox</title>
-          <script async src="https://js.stripe.com/v3/" />
         </Helmet>
         <Margin vertical={1.5} horizontal={1.5}>
           <Navigation title="Become a Patron" />

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Helmet from 'react-helmet';
 import { inject, observer } from 'app/componentConnectors';
 import { SubscribeForm } from 'app/components/SubscribeForm';
 import { Card } from './Card';
@@ -50,9 +49,6 @@ class PaymentInfoComponent extends React.Component<Props> {
     const { preferences } = this.props.store;
     return (
       <Container>
-        <Helmet>
-          <script async src="https://js.stripe.com/v3/" />
-        </Helmet>
         <Title>Payment Info</Title>
         {preferences.isLoadingPaymentDetails ? (
           <div>Loading payment details...</div>