Merge pull request #129 from debtcollective/od/window-fix

fix: fix ssr issues related to window
debtcollective · Mar 12, 2021 · 22327be · 22327be
2 parents 6b1fe52 + cff9c18
commit 22327be
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/packages/union-component/src/api/donation.ts b/packages/union-component/src/api/donation.ts
@@ -9,7 +9,8 @@ interface DonationResponse {
 
 export const sendDonation = async (context: DonationMachineContext) => {
   const { cardInformation, billingInformation, paymentServices } = context;
-  const grecaptcha = (window as any).grecaptcha;
+  const grecaptcha =
+    typeof window !== 'undefined' && (window as any).grecaptcha;
   let recaptchaToken;
 
   if (!grecaptcha || !paymentServices.stripeToken?.id) {
@@ -18,7 +19,7 @@ export const sendDonation = async (context: DonationMachineContext) => {
 
   try {
     recaptchaToken = await grecaptcha.execute(
-      (window as any).DC_RECAPTCHA_V3_SITE_KEY,
+      typeof window !== 'undefined' && (window as any).DC_RECAPTCHA_V3_SITE_KEY,
       {
         action: 'donate'
       }

diff --git a/packages/union-component/src/components/DonationPaymentForm.tsx b/packages/union-component/src/components/DonationPaymentForm.tsx
@@ -7,7 +7,6 @@ import { Elements } from '@stripe/react-stripe-js';
 import React, { useState } from 'react';
 import * as DonationWizard from './DonationWizard';
 import StripeCardInput, { DonationPaymentProvider } from './StripeCardInput';
-import { STRIPE_API_KEY } from '../utils/stripe';
 import DonationDropdown from './DonationDropdown';
 import DonationPhoneInput from './DonationPhoneInput';
 import chapters from '../constants/chapters';
@@ -88,6 +87,9 @@ const DonationPaymentForm: React.FC<Props> = ({
     setIsSubmitDisabled(!e.complete);
   };
 
+  const stripePublicToken =
+    typeof window !== 'undefined' && (window as any).DC_STRIPE_PUBLIC_TOKEN;
+
   return (
     <DonationWizard.Container>
       <DonationWizard.Title>
@@ -144,7 +146,7 @@ const DonationPaymentForm: React.FC<Props> = ({
           </DonationDropdown>
         )}
         {amount !== 0 ? (
-          <Elements stripe={loadStripe(STRIPE_API_KEY)}>
+          <Elements stripe={loadStripe(stripePublicToken)}>
             <StripeCardInput onChange={onChangeInputCardElement} />
           </Elements>
         ) : null}

diff --git a/packages/union-component/src/stories/DonationPaymentForm.stories.tsx b/packages/union-component/src/stories/DonationPaymentForm.stories.tsx
@@ -4,18 +4,22 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { DonationPaymentForm } from '../components';
 import { Props as DonationPaymentFormProps } from '../components/DonationPaymentForm';
 import { Elements } from '@stripe/react-stripe-js';
-import { STRIPE_API_KEY } from '../utils/stripe';
 import { loadStripe } from '@stripe/stripe-js';
 
 export default {
   title: 'Example/DonationWidget'
 } as Meta;
 
-const PaymentFormTemplate: Story<DonationPaymentFormProps> = (args) => (
-  <Elements stripe={loadStripe(STRIPE_API_KEY)}>
-    <DonationPaymentForm {...args} />
-  </Elements>
-);
+const PaymentFormTemplate: Story<DonationPaymentFormProps> = (args) => {
+  const stripePublicToken =
+    typeof window !== 'undefined' && (window as any).DC_STRIPE_PUBLIC_TOKEN;
+
+  return (
+    <Elements stripe={loadStripe(stripePublicToken)}>
+      <DonationPaymentForm {...args} />
+    </Elements>
+  );
+};
 
 export const PaymentForm = PaymentFormTemplate.bind({});
 

diff --git a/packages/union-component/src/utils/stripe.ts b/packages/union-component/src/utils/stripe.ts
@@ -1,10 +1,5 @@
 import { DonationMachineContext } from '../machines/donationType';
 
-/**
- * Publishable key that is used in order to load Stripe
- */
-export const STRIPE_API_KEY = (window as any).DC_STRIPE_PUBLIC_TOKEN;
-
 /**
  * Add extra data to the create token process to take advantage
  * of Stripe built-in checks.