kavo-react-errors | Stripe Developers | Page 1

zenith horizonBOT Nov 27, 2023, 11:22 PM

#

hollow moon Nov 27, 2023, 11:26 PM

#

Hi, where are you exactly seeing these? Can you add a bit more details here?

smoky rapids Nov 27, 2023, 11:28 PM

#

certainly!

#

the stack trace isnt too helpful but starting out:

#

#

zenith horizonBOT Nov 27, 2023, 11:29 PM

#

smoky rapids Nov 27, 2023, 11:30 PM

#

a screenshot of where the client side stripe code errors ^

zenith horizonBOT Nov 27, 2023, 11:30 PM

#

frigid totem Nov 27, 2023, 11:32 PM

#

kavo-react-errors

smoky rapids Nov 27, 2023, 11:32 PM

#

I am unfortunately unable to provide any more details on the "Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type"." warning. I cant seem to determine where that warning originates but from reading through other discussions, it seems to be coming from the icons that get generated through the PaymentElement

#

frigid totem Nov 27, 2023, 11:32 PM

#

@smoky rapids can you share

Real code as text here instead of a picture
An exact URL where we can reproduce this issue

smoky rapids Nov 27, 2023, 11:33 PM

#

sure, would it be okay if I direct messaged you?

frigid totem Nov 27, 2023, 11:34 PM

#

no please share here a simple repro, you can try on jsfiddle or similar if you don't want to share your real website's URL

smoky rapids Nov 27, 2023, 11:37 PM

#

this is the bundled output in production via Stripe:

 key: "_setupPaymentRequest",
                    value: function(e) {
                        var t = this;
                        this._pr = null,
                        this._isShowing && (this._controller.event("pr-close"),
                        this._isShowing = !1),
                        this._controller._events.abort.off(),
                        this._controller._events.show.off(),
                        this._controller._events.update.off(),
                        this._paymentRequestOptions = e;
                        var n, r = K(this._authentication, this._paymentRequestOptions, null), a = r.details, s = r.options, u = r.methods;
                        if (O)
                            try {
                                this._pr = new O(u,a,s)
                            } catch (e) {}

frigid totem Nov 27, 2023, 11:37 PM

#

Sorry I can't really read this

smoky rapids Nov 27, 2023, 11:38 PM

#

the Empty total label may be confusing the user error is from this._pr = new O(u,a,s)

#

I am unable to provide a public link at this time, however I can message you a link privately

frigid totem Nov 27, 2023, 11:41 PM

#

Sorry I'm helping other people too. I am trying to help you but would need you to spend a few minutes making a simple reproduction so that I can see what's happening

smoky rapids Nov 27, 2023, 11:44 PM

#

generally speaking, where would a a label property need to be added? In stripe.retrievePaymentIntent(secret)? stripe.confirmPayment? The server side create-payaments-api?

frigid totem Nov 27, 2023, 11:44 PM

#

I'm sorry I really don't follow you at all right now

#

There's no need to add a label, there's no API for it, it has to be something with the way you initialize PaymentElement, hence why I need to

See your exact code
See it live to help debug it

smoky rapids Nov 27, 2023, 11:45 PM

#

okay thank you that is helpful

#

import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

...

const stripe = useStripe();
const elements = useElements();

...

<PaymentElement options={{ layout: 'tabs' }} />

#

const CheckoutTransmissionForm: React.FC<CheckoutTransmissionFormProps> = ({ tier }): JSX.Element => {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState<null | string>();
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    const secret = new URLSearchParams(window.location.search).get('payment_intent_client_secret');
    if (!secret) {
      return;
    }

    stripe.retrievePaymentIntent(secret).then(({ paymentIntent }) => {
      if (!paymentIntent) {
        setMessage('Something went wrong.');
        return;
      }
      switch (paymentIntent.status) {
        case 'succeeded':
          setMessage('Payment succeeded!');
          break;
        case 'processing':
          setMessage('Your payment is processing.');
          break;
        case 'requires_payment_method':
          setMessage('Your payment was not successful, please try again.');
          break;
        default:
          setMessage('Something went wrong.');
          break;
      }
    });
  }, [stripe]);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded so disable form submission until Stripe.js has loaded
      return;
    }

    setIsLoading(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${new URL(window.location.href).origin}/payments/complete`,
      },
    });

    if (error.type === 'card_error' || error.type === 'validation_error') {
      setMessage(error.message);
    } else {
      setMessage('An unexpected error occurred.');
    }

    setIsLoading(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      ...
      <PaymentElement options={{ layout: 'tabs' }} />
      ...
    </form>
  )

#

would be happy to share with you the link privately

frigid totem Nov 27, 2023, 11:54 PM

#

😅

#

Sorry I keep waiting for you to spend a few minutes making the most basic example online so I can look at it so that I can help you

smoky rapids Nov 27, 2023, 11:55 PM

#

you asked for code which I have given, and I will happily provide you with a live link to help debug it

frigid totem Nov 27, 2023, 11:56 PM

#

Right now there's nothing in your code that could explain this. You don't use the Appearance API or do anything fancy that I can see. But you refuse to share a simple link publicly which is totally fair but you can spend a few minutes making the most basic repro on jsbin or jsfiddle or similar so that you can show the issue

smoky rapids Nov 28, 2023, 12:00 AM

#

it seems to be a niche issue that I am only seeing in production. Again I would be happy to provide you with the link privately. The screenshots are taken directly from Stripe code that gets bundled in production from "@stripe/react-stripe-js": "^2.4.0", and "@stripe/stripe-js": "^2.2.0"

frigid totem Nov 28, 2023, 12:01 AM

#

sure DM me the link, we're running in circles so ¯_(ツ)_/¯

#

I don't plan to sign up or do anything, sorry that's why I need a simple repro and not an entirely complex website to just see a bug

#

Please make sure to provide an exact end to end repro with all the information needed so that I can help you

smoky rapids Nov 28, 2023, 12:08 AM

#

there is no need to create your own account. I have sent you the details which is just two clicks total

#

I would really appreciate the help, this has been bugging me for a couple of weeks now

frigid totem Nov 28, 2023, 12:09 AM

#

I just tried https://stripe.com/docs/payments/quickstart?lang=php&client=react end to end locally with no change and it works fine for me, no errors

#

I can't seem to edit your code or see it. All I see is a log with payments:1 and no info

smoky rapids Nov 28, 2023, 12:11 AM

#

can you see the error I had detailed prior which links directly to Stripe code?

frigid totem Nov 28, 2023, 12:11 AM

#

Well I see the error you mentioned but it points to payments:1 with no info

smoky rapids Nov 28, 2023, 12:11 AM

#

that isnt an error, thats a warning

#

Im referring to the error in red that points to _setupPaymentRequest

frigid totem Nov 28, 2023, 12:12 AM

#

No I don't see that

smoky rapids Nov 28, 2023, 12:12 AM

#

#

clicking on the top right of the error would direct you to the bundled _setupPaymentRequest code

frigid totem Nov 28, 2023, 12:14 AM

#

Sure but I don't get that error on load at all

smoky rapids Nov 28, 2023, 12:15 AM

#

ah interesting, may be browser dependent

#

I see it on Chrome

frigid totem Nov 28, 2023, 12:15 AM

#

#

I'm in Chrome,don't see it on load

#

might be because of some Chrome extension(s) you have? Try disabling them all first

smoky rapids Nov 28, 2023, 12:17 AM

#

interesting behavior

#

I just tried incognito with no extensions (latest chrome)

#

and see the error

frigid totem Nov 28, 2023, 12:18 AM

#

do you see it on https://stripe.com/docs/payments/payment-element?

smoky rapids Nov 28, 2023, 12:19 AM

#

woah!

#

yes I do

#

frigid totem Nov 28, 2023, 12:20 AM

#

thanks that helps, sorry I should have started there, the way you framed it I thought it was an integration issue on your end or something

#

So not sure what it is, I think you can just safely ignore but I'll flag internally

smoky rapids Nov 28, 2023, 12:20 AM

#

sorry I should have been a bit more detailed and broadened my experience

#

is there a ticket that I can add details to?

#

may help in some way?

frigid totem Nov 28, 2023, 12:21 AM

#

no

#

Can you share your exact OS + Chrome version?

smoky rapids Nov 28, 2023, 12:23 AM

#

sure!

#

here is a better screenshot showing me navigating to Stripe (the link provided) and showcasing the exact error I am seeing as well as the warnings:

#

frigid totem Nov 28, 2023, 12:24 AM

#

are you using some kind of custom mode to make the page appear as mobile or responsive?

smoky rapids Nov 28, 2023, 12:24 AM

#

Chrome is up to date
Version 119.0.6045.159 (Official Build) (arm64)

#

regarding the link I shared?

frigid totem Nov 28, 2023, 12:25 AM

#

Regarding the way you debug mostly, I'm just asking if you changed the view in CDT

smoky rapids Nov 28, 2023, 12:26 AM

#

sorry what do you mean by CDT?

#

I am not using anything custom, I just navigated to the link your provided, ensured my extensions were disabled, opened dev tools, refreshed the page, and took a screenshot

frigid totem Nov 28, 2023, 12:26 AM

#

Chrome Developer Tool

smoky rapids Nov 28, 2023, 12:27 AM

#

no custom profilers / toggles were done on my side

frigid totem Nov 28, 2023, 12:27 AM

#

sounds good. So really for now I would just simply ignore. It doesn't break anything, it's just a console error and I flagged internally

smoky rapids Nov 28, 2023, 12:27 AM

#

cool thank you sir. I assumed I could disregard the warnings but the error was throwing me off a bit

frigid totem Nov 28, 2023, 12:29 AM

#

yep totally fair it's confusing where internal scripts like this raise an error. It's coming straight from Google's API in Chrome but we'll look into it. Just tricky when we can't reproduce

smoky rapids Nov 28, 2023, 12:30 AM

#

yeah the warnings seem to be related to google pay, the "Empty total label may be confusing the user" seems to be stemming from internal _setupPaymentRequest stripe code

frigid totem Nov 28, 2023, 12:31 AM

#

yep

#kavo-react-errors