#Srujan

1 messages · Page 1 of 1 (latest)

tired pythonBOT
latent mulch
#

Hi, can you add more details here so I can further assist?

shut axle
#

Wait...is this not linked to original post?

#

I'm using Payment Element to do card and google / apple pay methods in react app, I need to get the user's selection for either card or google or apple pay for analytics. So i'm trying to use the onChange handler and set a local state with their selection to send the right analytics

# 
    const paymentElement = elements.getElement(PaymentElement);
    if (paymentElement) {
      paymentElement.on('change', (event) => {
        console.log(event.value);
      });
    }
  }```
#

gives me error Property 'on' does not exist on type 'StripeElement'.

latent mulch
#

Taking a look here

shut axle
#

Also unrelated question, but google pay is again not showing up on the payment element. Why is this intermittently working for me? I sometimes get this error Uncaught (in promise) Error: Frame not initialized. at e.canMakePayment

latent mulch
#

Do you have a test link where I can reproduce this on my end?

shut axle
#

Yeah

#

add item to cart, go to cart -> checkout -> enter name/email and click payment to open drawer where payment element is rendered

#

oh it looks like i pass an onChange prop to the PaymentElement there?

latent mulch
#

I'm able to see the Google Pay button on this page. Have you made observations on when exactly these occur? Is the issue occurring on the same browser? Or different browsers?

shut axle
#

just chrome testing

#

It was working yesterday and I've changed nothing, just reloaded the app

#

and now i see it

#

it's the weirdest thing...

#

didn't even reload app, just refreshed page...

latent mulch
#

Are there any extension that might be affecting it?

shut axle
#

possibly, not sure, lemme try disabling extensions

#

well, my best guess is that i intermittently get this error react_devtools_backend.js:4012 Unsupported prop change: options.clientSecret is not a mutable property. but i don't know why because I have these lines going:

    const asyncFetchClientSecret = async () => {
      const fetchedClientSecret = await fetchClientSecret(stripeAmount);
      if (typeof fetchedClientSecret === 'string') {
        setClientSecret(fetchedClientSecret);
      } else {
        return;
      }
    };
    if (stripeAmount) {
      asyncFetchClientSecret();
    }
  }, [stripeAmount]);```
and I'm not changing the amount 
and I also have ```      {stripePromise && clientSecret && (
        <StripeProvider stripe={stripePromise} options={{ clientSecret }}>
          <PaymentsDrawer />
        </StripeProvider>
      )}```
#

so the PaymentElement (inside PaymentsDrawer) shouldn't even render without clientSecret being defined, and once its defined, it doesn't change

latent mulch
#

I tried reproducing it on my end and I was unable to. I've been getting the Google Pay button each time.

shut axle
#

Any ideas where to start? I can't get it now...i'm going to try restarting the app again but why would I be getting unsupported prop change in this scenario?

#

okay i closed devtools and saw that it rendered...weird

latent mulch
#

From my brief investigation, it appears that this error is sent when you try to update the client_secret.

#

Further looking

shut axle
#

okay so I've narrowed it down to it doesn't work when I have my devtools open, but if I close devtools and refresh the page, google pay shows up as an options. What the frigging frick?

latent mulch
#

Upon further looking, I'm still unable to reproduce where Google Pay is not showing.

Separately however, I was able to reproduce the the below warning message:

Unsupported prop change: options.clientSecret is not a mutable property.

The issue appears that you're creating multiple Payment Intents so you have multiple client_secrets with one UI. As for next steps, you'd want to investigate your code on your end and identify where you're initializing the Element and go from there.