#valerio-sevilla_code

1 messages · Page 1 of 1 (latest)

glad galleonBOT
#

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

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

lament turtleBOT
#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

lime needle
#

hi! just to clear, how/when does "Unhandled payment Element loaderror" happen?

high pine
#

Hi! Right when trying to render the component.

lime needle
#

I see, but you're able to force a load error?

#

ah ok you force it by not providing the other required params

high pine
#

Actually, I removed other params just for the example. The parameters are fine; I am playing with a payment method configuration and when there is no valid payment method, I get this error. When this happens, I need to be able to properly handle the error, but the onLoadError callback is never called.

lime needle
#

that might be expected, I think the purpose of this event is to capture network problems rather than logic/integration problems that prevent the element loading, but I'm looking into it

#

ok yeah I checked and the idea of this event is it happens when the call we make to an internal API (v1/elements/sessions) fails, it's more to capture problems like a bad network or networks blocking api.stripe.com domains, or server-side outages on our side, rather than this use case

#

I think in your use case you instead want to keep canUseStripe as false until the Element has rendered, so i.e. set to true in onReady.

glad galleonBOT
high pine
#

Hmmm I see. The problem I have, is that after this, when the parent component is unmounted I eventually get errors like

IntegrationError: This Element has already been destroyed. Please create a new one.

and

The above error occurred in the <PaymentElement> component:
....

Which in the end breaks the UI. Can you advise of any way to prevent this?

sleek gust
#

Can you share your full code? I guess canUseStripe is a conditional that wraps the <PaymentElement /> component?

high pine
#

Actually, canUseStripe is not that relevant here - it was part of a test trying to anticipate whether or not there were any available payment methods, then deciding if PaymentElement had to be rendered. But for this I needed another PaymentElement to start with :D.

Considering the PaymentElement does not actually render when there is no available payment method, the behaviour is sort of what I need; problem is the error is not caught and makes the unmounting fail as explained above. Right now I have this:

<PaymentElement
  options={{
      layout: {
          type: 'accordion',
          defaultCollapsed: true,
          radios: true,
          spacedAccordionItems: false,
      },
      fields: {
          billingDetails: {
              name: 'never',
              email: 'never',
              phone: 'auto',
              address: 'auto',
          },
      },
  }}
  onLoadError={(error: Object) => {
      console.error(
          'Stripe Payment Element failed to load: ' +
              JSON.stringify(error),
      );
  }}
/>
sleek gust
#

What do you mean by 'no available oayment method' exactly?

#

As my colleague described, the onLoadError is for handling terminal network errors etc where your integration cannot reach Stripe for whatever reason. It's not really relevant in the scenario you describe

high pine
#

I see. Is there any way to properly handle other errors like this one? It doesn't seem to be a rare error - it happens both if the payment method configuration is empty, and if all active payment method types are not available in the user's location.

sleek gust
#

What is the actual error? What happens to the PE instance?

high pine
#

The PE doesn't render at all (fine by me); in the JS console I get

Unhandled payment Element loaderror
{error: {…}}
    error:
        message: "No valid payment method types for this configuration. Please ensure that you have activated payment methods compatible with your chosen currency in your dashboard (https://dashboard.stripe.com/settings/payment_methods) and that the `amount` (1635) is not lower than the `currency` (eur) minimum: https://stripe.com/docs/currencies#minimum-and-maximum-charge-amounts."
        type: "validation_error"
        [[Prototype]]: Object
            ...
sleek gust
#

How/where do you catch that error?

high pine
#

It is printed in the JS console, when trying to render a PaymentElement with no available payment method types.

#

Which in principle I could ignore, but then I have the issue when unmounting the container component - getting the other two errors, which are more severe and break the UI:

helpers.js:123 Uncaught 
IntegrationError: This Element has already been destroyed. Please create a new one.
....

and

instrument.js:121 The above error occurred in the <PaymentElement> component:
    in PaymentElement (created by ....)
    ...
lunar grotto
#

hi! I'm taking over this thread.

#

give me a few minutes to catchup.

#

The PE doesn't render at all (fine by me); in the JS console I get
in this case did onLoadError ran?

high pine
#

Nope, I haven't gotten that callback run in any of my tests. According to the other folks, this actually makes sense, but in that case I don't know how to handle this particular error.

lunar grotto
#

got it. I think it should have triggered onLoadError, so this could be a bug.