diff --git a/src/components/StripePage/index.tsx b/src/components/StripePage/index.tsx index a9c639f..c427081 100644 --- a/src/components/StripePage/index.tsx +++ b/src/components/StripePage/index.tsx @@ -1,6 +1,6 @@ import { useApi } from "@/api"; import Loader from "@/components/Loader"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { Stripe, loadStripe } from "@stripe/stripe-js"; import { Elements } from "@stripe/react-stripe-js"; import CheckoutForm from "../PaymentPage/methods/Stripe/CheckoutForm"; @@ -31,6 +31,7 @@ export function StripePage(): JSX.Element { if (!activeSubPlan) { navigate(routes.client.priceList()); } + const timeoutRef = useRef(); // const appleReceipt = async () => { // const { subscription_receipt } = await api.createSubscriptionReceipt({ @@ -58,7 +59,7 @@ export function StripePage(): JSX.Element { }, [activeSubPlan, api, locale, navigate]); useEffect(() => { - (async () => { + timeoutRef.current = setTimeout(async () => { const { subscription_receipt } = await api.createSubscriptionReceipt({ token, way: "stripe", @@ -69,7 +70,12 @@ export function StripePage(): JSX.Element { const { client_secret } = subscription_receipt.data; setClientSecret(client_secret); setIsLoading(false); - })(); + }, 4000); + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; }, [api, token]); return (