nicholaspuglia_payment-element-react-googlepay | Stripe Developers | Page 1

karmic shuttleBOT Jan 30, 2025, 11:43 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/1334670383026016297

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

#

gusty geyser Jan 30, 2025, 11:45 PM

#

Hi 👋

Can you share the JavaScript code you are using to create the Payment Element and possibly a publicly accessible front-end where I can see this behavior?

timid kernel Jan 30, 2025, 11:46 PM

#

I will record a video of the behaviour and copy some code snippets

gusty geyser Jan 30, 2025, 11:46 PM

#

You can skip the video

timid kernel Jan 30, 2025, 11:52 PM

#

Ok so this is how we render the component
<StripeElement options={stripePaymentElementOptions} onChange={onPaymentElementChange}/>
I have a useEffect to set the options based on some selectors
useEffect(() => { setStripePaymentElementOptions({ wallets: { applePay: applePayAvailable ? 'auto' : 'never' as PaymentWalletOption, googlePay: googlePayAvailable ? 'auto' : 'never' as PaymentWalletOption, }, defaultValues: { billingDetails: { name: props.customer_name, email: props.customer_email, address: { country: props.regionCode, }, }, }, }) }, [googlePayAvailable, applePayAvailable, props.customer_email, props.customer_name, props.regionCode])

#

I have made sure that the googlePayAvailable selector is false and have console logged the options object and googlePay is set to 'never'

#

The unexpected behaviour is weird because when a customer has saved card we display them as a list and only show the Payment Element when they select the "new card" option. In this scenario the googlePay option doesn't display

#

I think the video might help show what I'm saying

gusty geyser Jan 30, 2025, 11:58 PM

#

Can you hard code the values, just to avoid any potential issues there?

timid kernel Jan 30, 2025, 11:59 PM

#

Just tried hard coding the value. That didn't resolve it

#

I have a feeling it's something to do with the widget rendering

gusty geyser Jan 31, 2025, 12:05 AM

#

Hmmm... I just tested this myself and I can hide Google pay in the tabs layout. Going to test with accordion

#

Nope, still hidden

timid kernel Jan 31, 2025, 12:10 AM

#

As soon as I add another radio option to delay the widget from rendering it displays correctly

#

gusty geyser Jan 31, 2025, 12:12 AM

#

Yeah the videos don't realy clarify anything for me. Can you remove this from the Use Effect and try hard-coding a specific object const that you pass to the PaymentElement provider?

Try just

const payOptions = {
  wallets: {
    googlePay: 'never',
  }
}

timid kernel Jan 31, 2025, 12:15 AM

#

Yeah it works when I don't have the useEffect and just hardcode it directly

#

But I need that useEffect since the value of googlePayAvailable can change

gusty geyser Jan 31, 2025, 12:16 AM

#

Right, so it's a React problem

#

Just making sure we identify the issue

#

So, for some reason, your useEffect setup is not passing never when you think it is

timid kernel Jan 31, 2025, 12:17 AM

#

Yeah for sure, don't think it's a stripe problem

#

If those options are undefined maybe it shows googlePay by default?

gusty geyser Jan 31, 2025, 12:19 AM

#

Yeah, anything that isn't the string 'never' would result in Google Pay rendering

timid kernel Jan 31, 2025, 12:20 AM

#

So maybe because the inital value is undefined when it changes in the useEffect the Payment Element component isn't being re-rendered? But that doesn't really make sense because I thought any state changes would cause a full re-render of the component

gusty geyser Jan 31, 2025, 12:21 AM

#

Unfortunately I'm not a React developer and generally hate the way React hooks work so I'm not sure what help to offer.

Could you start with 'never' as the default and update the value if you _should _ display GooglePay

timid kernel Jan 31, 2025, 12:22 AM

#

Yeah I'll try that thanks

#

I think we can end here, since it's not a stripe thing

#

thanks for the help

gusty geyser Jan 31, 2025, 12:23 AM

#

Sure thing, happy to shed what 💡 I can 🙂

#nicholaspuglia_payment-element-react-googlepay