bachir_next-render-issue | Stripe Developers | Page 1

open tundraBOT Sep 12, 2025, 1:58 PM

#

👋 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/1416060304835743797

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

#

outer garden Sep 12, 2025, 1:58 PM

#

#

sage apex Sep 12, 2025, 2:07 PM

#

hey there -- you mentioned one of the things you tried was updating @stripe/stripe-js to 7.x

#

if you did this, you app should load basil Stripe.js instead of v3 so something seems to be happening different than you expect

outer garden Sep 12, 2025, 2:09 PM

#

Indeed, it was basil instead of v3, but the Violation message was still the same

sage apex Sep 12, 2025, 2:16 PM

#

Ok as a first pass, I'm not seeing this on my own demo using react/next

#

Is your app publicly accessible anywhere for direct inspection?

open tundraBOT Sep 12, 2025, 2:17 PM

#

outer garden Sep 12, 2025, 2:19 PM

#

No public access unfortunately, and it only happen when running next dev, not when building the app.

sage apex Sep 12, 2025, 2:23 PM

#

And you say you experience some kind of blocking delay?

#

What does your stripe/elements initialization look like?

outer garden Sep 12, 2025, 2:29 PM

#

Yes all inputs on the page where the PaymentElement is rendered takes few seconds to focus/register input etc...

import { PaymentElement as StripePaymentElement, useElements } from "@stripe/react-stripe-js";
...
const elements = useElements();
const onReady = useCallback(() => {
  // Once the stripe elements are ready, we can restore the original payment method types after a short delay
  if (restoreStripePaymentMethods.current) {
    restoreStripePaymentMethods.current = false;
    setTimeout(() => {
      elements?.update({ paymentMethodTypes: stripePaymentMethodTypes });
    }, 600);
  }
}, [elements, stripePaymentMethodTypes]);

const paymentMethodOptions: StripePaymentElementOptions = useMemo(
  () => ({
    business: { name: organization.name },
    fields: {
      billingDetails: {
        name: "never",
        email: "never",
        address: "never",
      },
    },
    wallets: { googlePay: "never", applePay: "never" },
    layout: {
      type: showCustomAccordion ? "tabs" : "accordion",
      defaultCollapsed: displayExpressCheckout,
      ...(!showCustomAccordion && { radios: true }), // radios is only available for accordion layout
    } as LayoutObject,
    paymentMethodOrder: prioritizeBankPayment
      ? [STRIPE_PAYMENT_METHOD_FROM_PAYMENT_METHOD.ach, STRIPE_PAYMENT_METHOD_FROM_PAYMENT_METHOD.card]
      : [STRIPE_PAYMENT_METHOD_FROM_PAYMENT_METHOD.card, STRIPE_PAYMENT_METHOD_FROM_PAYMENT_METHOD.ach],
  }),
  [organization.name, showCustomAccordion, displayExpressCheckout, prioritizeBankPayment]
);

...

return (
    <StripePaymentElement
      key={prioritizeBankPayment ? "prioritizeBankPayment" : "cardFirst"}
      id="payment-element"
      // When have a handler on our custom accordion, so this one becomes redundant
      onChange={showCustomAccordion ? undefined : handleStripePaymentMethodChange}
      options={paymentMethodOptions}
      onReady={onReady}
    />
)

I truncated a lot of code, but that's the gist of it.

#

I didn't add the part with ExpressCheckout component, but I don't think it's related here

sage apex Sep 12, 2025, 2:37 PM

#

An what about the <Elements /> provider outside that?

#

This seems pretty normal, though i dont understand what your showCustomAccordion logic is about

outer garden Sep 12, 2025, 2:45 PM

#


  const stripeInstance = useMemo(() => {
    const stripePublicApiKey =
      organization.country === OrganizationCountry.Canada
        ? (process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY_CA as string)
        : organization.country === OrganizationCountry.GreatBritain
          ? (process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY_UK as string)
          : (process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY_USA as string);

    return loadStripe(stripePublicApiKey, { locale: serializeLocale(locale) });
  }, [shouldLoadStripe, locale, organization.country]);

<StripeContext.Provider
  value={{
    hasPad,
    hasAch,
    stripePaymentMethodTypes,
    stripePaymentMethods,
    zeffyPaymentMethods,
    expressCheckoutWallet,
    setExpressCheckoutWallet,
    initializeStripe,
  }}
>
  <Elements key={locale} stripe={stripeInstance} options={options}>
    {children}
  </Elements>
</StripeContext.Provider>

outer garden Sep 12, 2025, 2:45 PM

#

sage apex This seems pretty normal, though i dont understand what your `showCustomAccordio...

That's a long story...

sage apex Sep 12, 2025, 2:52 PM

#

Yes all inputs on the page where the PaymentElement is rendered takes few seconds to focus/register input etc
That should be the case, if I put additional inputs on my page they are interactive even while Payment ELement is initializing.

#

Can you disable/suppress the payment element entirely and see if that changes the behaviour?

#

I'm also assuming that StripeContext.Provider is something for your own app logic, since it doesnt look like anything we maintain

outer garden Sep 12, 2025, 2:53 PM

#

sage apex I'm also assuming that `StripeContext.Provider` is something for your own app lo...

yes it's our code indeed

sage apex Sep 12, 2025, 2:55 PM

#

It's also suspicious that you say you observe this in the next dev server, but not after a build

outer garden Sep 12, 2025, 3:02 PM

#

im double checkin that too

#

Confirmed that without the PaymentElement, it's working well - no latency on inputs

sage apex Sep 12, 2025, 3:29 PM

#

Ok then next I'd suggest trying <Elements /> and <PaymentElement /> with stripped-down options and handlers. eg:

Remove the ready/change handlers
remove the custom key
try a static/basic options

If you can remove your wrapping provider too that'd help isolate things.

outer garden Sep 12, 2025, 3:30 PM

#

sage apex It's also suspicious that you say you observe this in the next dev server, but n...

Also confirmed that production builds do not trigger the error

sage apex Sep 12, 2025, 3:30 PM

#

Essentially we'd need to narrow this down to a minimal repro, since I don't see these warnings or any such delay in a minimal example currently

outer garden Sep 12, 2025, 3:30 PM

#

Thanks, trying this

sage apex Sep 12, 2025, 3:31 PM

#

I can stay on here a bit longer to help, but if this will take some time to strip down and you want to continue with context we can convert to an email support case

#

Otherwise when i step away later my colleague can continue helping you poke at this until you isolate it

outer garden Sep 12, 2025, 3:32 PM

#

The easiest for you really, email works for me too

sage apex Sep 12, 2025, 3:44 PM

#

Our friendly helper bot will send you a DM with a link you can click!

open tundraBOT Sep 12, 2025, 3:45 PM

#

Hello @outer garden, we have sent you a direct message, please check it at https://discord.com/channels/@me/1315672023623667856

🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.

#

#bachir_next-render-issue

Hello @outer garden, we have sent you a direct message, please check it at https://discord.com/channels/@me/1315672023623667856