Next.js Discord

Discord Forum

My stripe payment form isn't loading on deployment..

Unanswered
Max | Third Vibes posted this in #help-forum
Open in Discord
Max | Third VibesOP
it works fine when testing but when my site is deployed the form doesn't load, can't figure out why

return (
        <div>
            {/*<h1>Complete Your Subscription</h1>*/}
            {plan !== 'free' && clientSecret && (
                <Elements stripe={stripePromise} options={{ clientSecret }}>
                    <SubscriptionForm
                        userId={userId}
                        plan={plan}
                        firstName={firstName}
                        lastName={lastName}
                        email={email}
                    />
                </Elements>
            )}
            {plan === 'free' && (
                <SubscriptionForm
                    userId={userId}
                    plan={plan}
                    firstName={firstName}
                    lastName={lastName}
                    email={email}
                />
            )}
            {error && <p>{error}</p>}
        </div>
    );
};

3 Replies

Catla
Why do you have }; at the end?
@Catla Why do you have }; at the end?
Max | Third VibesOP
because this is above the return: 
const SubscribePage: React.FC = () => {
    const searchParams = useSearchParams();
    const [clientSecret, setClientSecret] = useState<string | null>(null);
    const [error, setError] = useState<string | null>(null);

    const userId = searchParams?.get('userId') || '';
    const plan = (searchParams?.get('plan') as 'free' | 'basic' | 'premium') || 'free';
    const firstName = searchParams?.get('firstName') || '';
    const lastName = searchParams?.get('lastName') || '';
    const email = searchParams?.get('email') || '';

    useEffect(() => {
        if (plan !== 'free') {
            const fetchClientSecret = async () => {
                try {
                    console.log('Requesting client secret with:', {
                        userId,
                        plan,
                        firstName,
                        lastName,
                        email,
                    });

                    const { data } = await axios.post('/api/create-payment-intent', {
                        userId,
                        plan,
                        firstName,
                        lastName,
                        email,
                    });

                    console.log('Received client secret:', data.clientSecret);
                    setClientSecret(data.clientSecret);
                } catch (error) {
                    console.error('Error fetching client secret:', error);
                    setError('Failed to fetch payment details.');
                }
            };

            fetchClientSecret();
        }
    }, [userId, plan, firstName, lastName, email]);

    if (!userId || !plan || !firstName || !lastName || !email) {
        return <p>Invalid subscription details. Please try again.</p>;
    }
Catla
I would be logging the variables out to see what they're set to during each step. Also check any API log files if errors are triggered. Personally based on the first snippet of code apart from the }; thing you clarified, nothing looks out of place code wise. If plan isn't TRUE and clientSecret isn't TRUTHY then it wont show the form. Dive into thoses more and see what they're set to and debug from there.