Mirror — see github.com/blacksky-algorithms/blacksky.community
Merge pull request #81 from blacksky-algorithms/stripe
fix: lazy load stripe on support page and unmount after
+22
-8
+9
-2
src/view/screens/Support.tsx
+9
-2
src/view/screens/Support.tsx
···
13
13
import * as Layout from '#/components/Layout'
14
14
import {InlineLinkText} from '#/components/Link'
15
15
import {Text} from '#/components/Typography'
16
-
import {SupportStripeCheckout} from './SupportStripeCheckout'
16
+
17
+
// Lazy-loaded so the Stripe SDK (and the js.stripe.com script it injects) are
18
+
// only fetched when the user actually navigates to this screen.
19
+
const SupportStripeCheckout = React.lazy(
20
+
() => import('./SupportStripeCheckout'),
21
+
)
17
22
18
23
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'>
19
24
export const SupportScreen = (_props: Props) => {
···
66
71
</View>
67
72
</View>
68
73
69
-
<SupportStripeCheckout />
74
+
<React.Suspense fallback={null}>
75
+
<SupportStripeCheckout />
76
+
</React.Suspense>
70
77
</View>
71
78
</Layout.Content>
72
79
</Layout.Screen>
+2
src/view/screens/SupportStripeCheckout.tsx
+2
src/view/screens/SupportStripeCheckout.tsx
+11
-6
src/view/screens/SupportStripeCheckout.web.tsx
+11
-6
src/view/screens/SupportStripeCheckout.web.tsx
···
1
-
import React, {useCallback, useMemo, useState} from 'react'
1
+
import {useCallback, useMemo, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
···
6
6
EmbeddedCheckout,
7
7
EmbeddedCheckoutProvider,
8
8
} from '@stripe/react-stripe-js'
9
-
import {loadStripe} from '@stripe/stripe-js'
9
+
import {loadStripe} from '@stripe/stripe-js/pure'
10
10
11
11
import {atoms as a, useTheme} from '#/alf'
12
12
import {Button, ButtonText} from '#/components/Button'
···
14
14
import * as TextField from '#/components/forms/TextField'
15
15
import {Text} from '#/components/Typography'
16
16
import {STRIPE_API_URL, STRIPE_PUBLISHABLE_KEY} from '#/env/common'
17
-
18
-
const stripePromise = STRIPE_PUBLISHABLE_KEY
19
-
? loadStripe(STRIPE_PUBLISHABLE_KEY)
20
-
: null
21
17
22
18
const PRESET_AMOUNTS = [5, 10, 25, 50]
23
19
···
29
25
const [clientSecret, setClientSecret] = useState<string | null>(null)
30
26
const [error, setError] = useState<string | null>(null)
31
27
const [loading, setLoading] = useState(false)
28
+
29
+
// Defer Stripe.js loading until this component actually mounts, so visitors
30
+
// who never open the Support page don't trigger requests to js.stripe.com.
31
+
const stripePromise = useMemo(
32
+
() => (STRIPE_PUBLISHABLE_KEY ? loadStripe(STRIPE_PUBLISHABLE_KEY) : null),
33
+
[],
34
+
)
32
35
33
36
const parsedAmount = useMemo(() => {
34
37
const num = parseFloat(amount)
···
192
195
</View>
193
196
)
194
197
}
198
+
199
+
export default SupportStripeCheckout