priyanka_unexpected | Stripe Developers | Page 1

gentle mapleBOT Apr 9, 2025, 1:14 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/1359516794871742515

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

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.

priyanka_error, 1 day ago, 3 messages

wanton dune Apr 9, 2025, 1:18 PM

#

Hi there 👋 can you tell me more about the race condition you're seeing? What is your code trying to do? Are you folloiwng the guidance provided in our reference doc for the paymentRequest.update function?
https://docs.stripe.com/js/payment_request/update

shadow gazelle Apr 9, 2025, 1:33 PM

#

paymentRequest.update({
total: {
label: priceData?.description,
amount: priceData.total_price,
},
})
Using priceData in the dependency for the above useeffect.
When there is a pricedata change, we are making api request to update price changes but when we click on gpay payment button element, the price is still old that is without the offer update.

#

The price is not updated immediately

wanton dune Apr 9, 2025, 1:34 PM

#

Hm, that doesn't sound like a race condition if it's consistently behaving that way. Are you logging the contents of your variable to make sure it's getting updated before you call .update?

shadow gazelle Apr 9, 2025, 1:36 PM

#

if there is already a payment Request we are updating it by calling update method or else creating new request

wanton dune Apr 9, 2025, 1:40 PM

#

That's not the concern though right? The concern is that your priceData.total_price isn't getting updated before you're calling paymentRequest.update?

shadow gazelle Apr 9, 2025, 1:45 PM

#

yes correct

#

i was explaing the functionality

wanton dune Apr 9, 2025, 1:47 PM

#

So are you logging the contents of priceData.total_price before you call paymentRequest.update? Are you seeing that it's updated as expected before you make the call to us?

shadow gazelle Apr 9, 2025, 1:52 PM

#

wanton dune Apr 9, 2025, 1:54 PM

#

How are you calling that? Is it inside of your click handler?

shadow gazelle Apr 9, 2025, 1:57 PM

#

Its in the useEffect(() => {
if (!stripe || !priceData?.currency || !priceData?.total_price) return;

  try {
    if (!paymentRequest) {}

else{paymentRequest.update({
total: {
label: priceData?.description,
amount: priceData.total_price,
},
})
[priceData, stripe, paymentRequest]);
then in UI:
paymentRequest && (
<Stack
id="fast-pay"
component="div"
spacing={3}
>
<Typography
variant="h5"
color="primary"
sx={{ marginBottom: 1 }}
>
Express Checkout
</Typography>
<PaymentRequestButtonElement
options={{
paymentRequest,
}}
/>
<Divider>
<Typography
variant="body14"
color="text.secondary"
>
OR
</Typography>
</Divider>
</Stack>
)

wanton dune Apr 9, 2025, 1:59 PM

#

Sorry, I'm not the most familiar with React, does that mean it's not part of your click handler for the Payment Request Button? Asking as we do recommend calling from within the click handler if you're trying to update the Payment Request object just before showing the payment request modal.

To update the PaymentRequest right before the payment interface is initiated, call paymentRequest.update in your click event handler.
https://docs.stripe.com/js/payment_request/update#:~:text=To update the PaymentRequest right before the payment interface is initiated%2C call paymentRequest.update in your click event handler

Stripe JS Reference

shadow gazelle Apr 9, 2025, 2:06 PM

#

I tried with onClick it seems its not suggested for react, can you check with someone with React?

wanton dune Apr 9, 2025, 2:08 PM

#

Where are you seeing that's not recommended? Is that recommendation about that type of Event specifically, or using event listeners in general?

I'm asking since our guide for building a Payment Request Button integration within React should use event listeners, at least for things like handling shippinga ddress updates:
https://docs.stripe.com/stripe-js/elements/payment-request-button?client=react#collecting-shipping-info

shadow gazelle Apr 9, 2025, 2:18 PM

#

Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Grid2), expected a ReactNode.

#

getting this error

gentle mapleBOT Apr 9, 2025, 2:21 PM

#

wanton dune Apr 9, 2025, 2:21 PM

#

Getting that error where? What code are you trying to run?

shadow gazelle Apr 9, 2025, 2:25 PM

#

wanton dune Apr 9, 2025, 2:29 PM

#

Wait, is your code to update your priceData.total_price also being called in that handler? Or like where are you first updating the amount you're providing to the payment request object?

Also, I don't see ForwardRef(Grid2) in your shared code excerpt, are you able to share any insight on what that is referring to?

shadow gazelle Apr 9, 2025, 2:43 PM

#

<PaymentRequestButtonElement options={paymentRequestOptions} onClick={updatePaymentRequestInstance}/>
const updatePaymentRequestInstance = (event) => {
event.preventDefault();
if (paymentRequest) {
paymentRequest.update({
country: 'US', // Pass in country when updating code to support international plans
currency: priceData.currency.toLowerCase() || 'usd',
total: {
label: priceData?.description,
amount: priceData.total_price, // Stripe accepts amount in cents, which is returned by our API
},
});
}
}
const paymentRequestOptions = useMemo(() => {
return {
paymentRequest: paymentRequest,
};
}, [paymentRequest]);

Unsupported prop change: options.paymentRequest is not a mutable property. Error Component Stack

silk lintel Apr 9, 2025, 2:45 PM

#

Hi taking over as toby had to step away

#

Give me a bit to catch up

shadow gazelle Apr 9, 2025, 2:46 PM

#

Sure

stray geyser Apr 9, 2025, 2:59 PM

#

Hello 👋
Can you change options={paymentRequestOptions} to options={paymentRequestOptions.paymentRequest} ?

#

and see if that works

#

actually that might give you an error as well 🤔

#

let's see if the error changes though

shadow gazelle Apr 9, 2025, 3:03 PM

#

Hi also another issue, In our production environment, we observe that the Payment Request Button displays Link, Apple Pay, and Google Pay options as expected. However, in our test and development environments, only Apple Pay and Google Pay are visible; the Link option is absent. We have ensured that the payment method configuration for Link is activated in all environments. Could you please help us understand why Link is not appearing in the test and development environments despite identical configurations?

stray geyser Apr 9, 2025, 3:03 PM

#

let's focus on one question at a time please

#

just to make sure I'm on the same page -- are you using your own custom button OR using the default button that comes with Payment Request Button?

#

I ask because I see paymentRequest.show() in your React code, which you should only be calling if you're using a custom button

shadow gazelle Apr 9, 2025, 3:06 PM

#

default

stray geyser Apr 9, 2025, 3:06 PM

#

Gotcha. So in that case, you should remove paymentRequest.show(); from your update function

shadow gazelle Apr 9, 2025, 3:07 PM

#

If i remove that on clicking the gpay button nothing happens, so added that

#

now popup is shown

stray geyser Apr 9, 2025, 3:09 PM

#

Are you changing the price after the wallet buttons are clicked on?

#

What exactly triggers price change?

#

paymentRequest.update({..}) runs async so I suspect the bug you're seeing is due to your code calling paymentRequest.show(); on the old paymentRequest object

shadow gazelle Apr 9, 2025, 3:10 PM

#

I think price issue is fixed now

stray geyser Apr 9, 2025, 3:10 PM

#

how did you fix it?

#

Since paymentRequest.update({..}) runs async you might be seeing this pricing issue show up randomly

shadow gazelle Apr 9, 2025, 3:11 PM

#

onClick was not correctly handled

stray geyser Apr 9, 2025, 3:11 PM

#

okay 👍

shadow gazelle Apr 9, 2025, 3:11 PM

#

Please fix link issue

#

In our production environment, we observe that the Payment Request Button displays Link, Apple Pay, and Google Pay options as expected. However, in our test and development environments, only Apple Pay and Google Pay are visible; the Link option is absent. We have ensured that the payment method configuration for Link is activated in all environments. Could you please help us understand why Link is not appearing in the test and development environments despite identical configurations?

stray geyser Apr 9, 2025, 3:11 PM

#

I mean I can't fix link issue myself. I can help you work through it

#

Are you seeing any errors in your console regarding link?

shadow gazelle Apr 9, 2025, 3:13 PM

#

no

stray geyser Apr 9, 2025, 3:14 PM

#

Is the page you're testing with remotely accesible? If so, can you share the URL?

shadow gazelle Apr 9, 2025, 3:14 PM

#

LINK
:
e
abort
:
ƒ ()
authentication
:
accountId
:
null
apiKey
:
"pk_test_51RByZvPgD1KBucBdIXLv1euiBXKuLwEC1cO4HcK5ZnZrYh8mJxxh6iRtloAGYUoMEn2ha3JfDyAzLHlUTvItxuuj00iX9ZsCRy"
[[Prototype]]
:
Object

ƒ toString()

#

It needs vpn

stray geyser Apr 9, 2025, 3:16 PM

#

Hmm okay. Unfortunately, we can't debug this without being able to reproduce. Like I mentioned the last time, link only shows up if few conditions are met - https://docs.stripe.com/stripe-js/elements/payment-request-button?client=html#:~:text=Customers see Apple Pay or Google Pay if they enabled them on their device%2C and depending on the browser they use. If Link appears%2C it could be because customers%3A

shadow gazelle Apr 9, 2025, 3:17 PM

#

Link is supported, but only when card funding sources are used
how to check that?

stray geyser Apr 9, 2025, 3:18 PM

#

You can log into your link account you're testing with and check if you've connected a card or a bank account

shadow gazelle Apr 9, 2025, 3:19 PM

#

I dont have link account

#

but the link option shows on production environment

stray geyser Apr 9, 2025, 3:19 PM

#

I think that's probably why link isn't showing up

Customers see Apple Pay or Google Pay if they enabled them on their device, and depending on the browser they use. If Link appears, it could be because customers:

Don’t have Apple Pay or Google Pay enabled on their device.

Use Chrome with active, authenticated Link sessions.

shadow gazelle Apr 9, 2025, 3:19 PM

#

not on test

#

on test i can see apple pay

stray geyser Apr 9, 2025, 3:20 PM

#

Yup so that seems expected based on the above

#

are you seeing apple pay or google pay on production?

shadow gazelle Apr 9, 2025, 3:21 PM

#

_canMakePaymentAvailability
:
APPLE_PAY: null
BROWSER:null
GOOGLE_PAY: true
LINK: false

#

No not google pay on production but if i open different browser with google pay false on test environment also i cannot see link

#

canMakePaymentAvailability
:
APPLE_PAY: null
BROWSER: false
GOOGLE_PAY: false
LINK: false

stray geyser Apr 9, 2025, 3:24 PM

#

With Payment Request Button,

Google Pay is only supported on Chrome
Apple Pay is only supported on Safari
Link only shows up if Apple Pay and Google Pay aren't showing up OR if your browser has an authenticated link session

You'd want to make sure you've registered the domain for your production site - https://docs.stripe.com/payments/payment-methods/pmd-registration

That affects wallet availability too

shadow gazelle Apr 9, 2025, 3:25 PM

#

I am able to see link on production

stray geyser Apr 9, 2025, 3:25 PM

#

That's because your google pay isn't showing up

shadow gazelle Apr 9, 2025, 3:26 PM

#

This is test on the same browser where gpay is false

#

On browser for the same url with gpay true on test:

stray geyser Apr 9, 2025, 3:28 PM

#

What do you mean by gpay is false?

Do you mean you don't have a wallet configured? How are you disabling google pay here?

shadow gazelle Apr 9, 2025, 3:28 PM

#

In different browser profile where wallet is not configured

stray geyser Apr 9, 2025, 3:29 PM

#

have you registered your test domain? https://docs.stripe.com/payments/payment-methods/pmd-registration?dashboard-or-api=dashboard#testing

shadow gazelle Apr 9, 2025, 3:30 PM

#

yes its registered

stray geyser Apr 9, 2025, 3:30 PM

#

Can you share your account ID?

#

just to clarify, you need to register the domain and the subdomain both

shadow gazelle Apr 9, 2025, 3:30 PM

#

how to check?

#

account id

stray geyser Apr 9, 2025, 3:30 PM

#

You can go to - https://dashboard.stripe.com/settings/user and scroll all the way to the bottom

shadow gazelle Apr 9, 2025, 3:32 PM

#

test: acct_19avFnB6uaytLGAa

#

production I think: acct_103zxh4iXjmKuwuf

stray geyser Apr 9, 2025, 3:35 PM

#

Thanks. It looks like Link is disabled on Payment Request Button for the test account for some reason. My team won't know why.

Do you have a Stripe rep / contact? If so, you can ask them to have it enabled. Or else you can write in and create a support ticket to get this enabled -
https://support.stripe.com/?contact=true

Stripe: Help & Support

Find help and support for Stripe. Our support site provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

shadow gazelle Apr 9, 2025, 3:36 PM

#

Is it the issue?

#

Could you enable?

stray geyser Apr 9, 2025, 3:37 PM

#

I can't do that unfortunately.. My team won't have the right access/tools to do this.

shadow gazelle Apr 9, 2025, 3:37 PM

#

Thanks

#

for production is it enabled? Can you send any confirmation regarding the same?

#

discrepency between test and prod

stray geyser Apr 9, 2025, 3:38 PM

#

I don't see the same block on the production. So yeah it shouldn't be disabled on the production.

#

Disabled for just that test account

shadow gazelle Apr 9, 2025, 3:40 PM

#

block means?

#

U assumed?

stray geyser Apr 9, 2025, 3:40 PM

#

not sure what you mean by that

shadow gazelle Apr 9, 2025, 3:40 PM

#

I don't see the same block on the production. So yeah it shouldn't be disabled on the production.
means?

#

How did you confirm from stripe that it is not enabled?

stray geyser Apr 9, 2025, 3:42 PM

#

I looked it up using the account IDs you've shared plus our own internal tools

shadow gazelle Apr 9, 2025, 3:42 PM

#

Can you share the block?

stray geyser Apr 9, 2025, 3:42 PM

#

What do you mean by share the block?

shadow gazelle Apr 9, 2025, 3:42 PM

#

stray geyser I don't see the same block on the production. So yeah it shouldn't be disabled o...

this

#

I want to share to my team that Stripe has confirmed

stray geyser Apr 9, 2025, 3:43 PM

#

You can copy this thread URL on discord and use that for reference.
I can't share any internal details around this.

#

But yeah, I can confirm that there's a difference between your testing and production accounts.
Your test account has link disabled for Payment Request Button

shadow gazelle Apr 9, 2025, 3:44 PM

#

Okay thanks for the confirmation

gentle mapleBOT Apr 9, 2025, 3:46 PM

#

stray geyser Apr 9, 2025, 3:46 PM

#

Anything else we can help you with?

shadow gazelle Apr 9, 2025, 3:47 PM

#

no thanks:)

#priyanka_unexpected