dominik_error

[proper lintel]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1409631198271246446

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[weak pier]

import { loadStripe } from '@stripe/stripe-js/pure';

const stripePromise = (async () => {
  for (;;) {
    try {
      // This sleep here makes it easier to reproduce locally, we're delaying the loading of Stripe
      await new Promise((r) => setTimeout(r, 20000));

      return await loadStripe('API_KEY');
    } catch (err) {
      console.error(err);
      await new Promise((r) => setTimeout(r, 5000));
    }
  }
})();

Now to reproduce:

• Load your webapp in your browser in dev
• Within 20 sec, go to devtools and under network throttling, set it to "Offline"
• Wait and observe that it logs Error: Failed to load Stripe.js
• Now go back into devtools, and turn off throttling
• Wait and see that it tries to call loadStripe again, but it keeps on failing with the same error every 5 seconds

Github issue that points out the issue the past years:

https://github.com/stripe/stripe-js/issues/26#issuecomment-1477716731

Third party repository to "tackle" the issue which only helps with a retrying mechanism. This doesnt solve the root issue: https://github.com/wobsoriano/retry-stripe-loader

[fringe wren]

hello! there was a fix made in Nov 2023 (after the repro you shared) that should allow re-loading Stripe.js? are you doing that, since that was the recommended fix

I'm assuming you're not doing anything odd with how you load Stripe.js because that can cause this too

[weak pier]

In the beginning i was just loading stripe normally through loadStripe which had the same issue as in the github issue above

After that, I did a bit of my own implementation with retry mechanism

import { Stripe } from '@stripe/stripe-js';
import { loadStripe } from './load-stripe-retry';

let stripePromise: Stripe | null

export const getStripe = async (timeoutMs: number = 1000): Promise<Stripe | null> => {
  if (!stripePromise) {

    const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string ?? '';

    if (!publishableKey) {
      console.error('Stripe publishable key is not configured. Please check your environment variables.');
      console.error('Expected: NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY');
      return null;
    }

    if (!publishableKey.startsWith('pk_')) {
      console.error('Invalid Stripe publishable key format. Key should start with "pk_"');
      return null;
    }

    try {

      stripePromise = await loadStripe(publishableKey, { retryOptions: { retries: 5, maxTimeout: timeoutMs } });

      console.log('stripePromise', stripePromise);

      return stripePromise;
    } catch (error) {
      console.error('Failed to load Stripe:', error);
      stripePromise = null
      return null;
    }
  }

  try {
    return await stripePromise;
  } catch (error) {
    console.error('Error resolving Stripe promise:', error);
    return null;
  }
};

import type { StripeConstructorOptions } from '@stripe/stripe-js';
import { loadStripe as _loadStripe } from '@stripe/stripe-js';
import type { Options as RetryOptions } from 'p-retry';
import pRetry from 'p-retry';

export const loadStripe = (
    publishableKey: string,
    options?: StripeConstructorOptions & {
        retryOptions?: RetryOptions;
    },
) => {
    const { retryOptions, ...rest } = options || {};
    return pRetry(() => _loadStripe(publishableKey, rest), retryOptions);
};

This is basically the same as the "retry-stripe-loader" plugin

This also didnt help, so I am still stuck with it which

=> This causes major issues in the checkout when loading the stripe Elements, since the stripe Elements do not load sometimes at all

[fringe wren]

so the retry doesn't help? do you see repeat attempts to load Stripe.js ?

[full pilot]

hello! fyi i am taking over this thread