diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx index 553089e28..64336985c 100644 --- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx +++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx @@ -1,5 +1,9 @@ import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js' -import { loadStripe, Stripe, StripeElements } from '@stripe/stripe-js' +import { Stripe, StripeElements } from '@stripe/stripe-js' +// we need to load this from submodule instead of root +// @see: https://www.npmjs.com/package/@stripe/stripe-js # Importing loadStripe without side effects +// tslint:disable-next-line:no-submodule-imports +import { loadStripe } from '@stripe/stripe-js/pure' import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react' import { toastr } from 'react-redux-toastr' import { NavigateFunction, useNavigate, useParams } from 'react-router-dom' @@ -269,14 +273,19 @@ const Review: FC = () => { ) } -const stripePromise: Promise = loadStripe(EnvironmentConfig.STRIPE.API_KEY, { - apiVersion: EnvironmentConfig.STRIPE.API_VERSION, -}) +let stripePromise: Promise -const output: () => JSX.Element = () => ( - - - -) +const output: () => JSX.Element = () => { + if (!stripePromise) { + stripePromise = loadStripe(EnvironmentConfig.STRIPE.API_KEY, { + apiVersion: EnvironmentConfig.STRIPE.API_VERSION, + }) + } + return ( + }> + + + ) +} export default output diff --git a/src/routes/Review/index.jsx b/src/routes/Review/index.jsx index aaf33bfb9..6e1793fb2 100644 --- a/src/routes/Review/index.jsx +++ b/src/routes/Review/index.jsx @@ -1,6 +1,6 @@ import { useNavigate } from "react-router-dom"; import { Elements, useElements, useStripe } from "@stripe/react-stripe-js"; -import { loadStripe } from "@stripe/stripe-js"; +import { loadStripe } from "@stripe/stripe-js/pure"; import { toastr } from "react-redux-toastr"; import React, { useEffect, useState } from "react"; import { connect, useDispatch, useSelector } from "react-redux"; @@ -40,9 +40,7 @@ import { import AboutYourProject from "./components/AboutYourProject"; import styles from "./styles.module.scss"; -const stripePromise = loadStripe(config.STRIPE.API_KEY, { - apiVersion: config.STRIPE.API_VERSION, -}); +let stripePromise; /** * Review Page @@ -303,6 +301,12 @@ const Review = ({ }; const ReviewWrapper = (props) => { + if (!stripePromise) { + stripePromise = loadStripe(config.STRIPE.API_KEY, { + apiVersion: config.STRIPE.API_VERSION, + }); + } + return ( diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx index 1496059df..3170a275d 100644 --- a/src/routes/ReviewLegacy/index.jsx +++ b/src/routes/ReviewLegacy/index.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { connect, useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { toastr } from "react-redux-toastr"; -import { loadStripe } from "@stripe/stripe-js"; +import { loadStripe } from "@stripe/stripe-js/pure"; import { Elements, useElements, useStripe } from "@stripe/react-stripe-js"; import _ from "lodash"; @@ -43,9 +43,7 @@ import { Breadcrumb, OrderContractModal } from "../../../src-ts"; import AboutYourProject from "../../routes/Review/components/AboutYourProject"; import PageH2 from "../../components/PageElements/PageH2"; -const stripePromise = loadStripe(config.STRIPE.API_KEY, { - apiVersion: config.STRIPE.API_VERSION, -}); +let stripePromise; /** * Review Legacy Page @@ -308,6 +306,12 @@ const ReviewLegacy = ({ }; const ReviewWrapper = (props) => { + if (!stripePromise) { + stripePromise = loadStripe(config.STRIPE.API_KEY, { + apiVersion: config.STRIPE.API_VERSION, + }); + } + return (