Akshay - Payment Request Button Line Items | Stripe Developers | Page 1

mystic kestrel Nov 15, 2021, 9:32 PM

#

Hello! Yep, they work. Are you using Apple Pay or Google Pay?

fierce lark Nov 15, 2021, 9:32 PM

#

Google Pay

mystic kestrel Nov 15, 2021, 9:33 PM

#

Click on the blue i-in-a-circle button next to the price in the Google Pay sheet.

fierce lark Nov 15, 2021, 9:33 PM

#

I don't see that little i anymore

#

It used to be there

mystic kestrel Nov 15, 2021, 9:35 PM

#

Can you show me a screenshot of what you're seeing?

fierce lark Nov 15, 2021, 9:35 PM

#

https://04ae-2601-640-8981-6b90-f5d0-226e-7e9d-fcda.ngrok.io/checkout/b/kit/ava/KzTeM2wO

#

If you click the GPay button you should see 16.34 as the total amount

#

And the default selected shipping option is "Akshay Custom ($1.23)

#

But nothing for me to click on to show line items

mystic kestrel Nov 15, 2021, 9:38 PM

#

Ah, yep, I don't see line items there. Can you share the code you're using to set the line items?

fierce lark Nov 15, 2021, 9:38 PM

#

await ev.updateWith({
            status: 'success',
            total: {
              amount: paymentIntent.amount,
              label: 'Total',
            },
            shippingOptions: shippingOptionsArr,
            displayItems: [
              {
                amount: subtotal,
                label: 'Subtotal',
              },
              {
                amount: tax,
                label: taxLabel,
              },
              {
                amount: defaultShipping,
                label: 'Shipping',
              },
            ],
          })

#

this is within a shipping address event listener

mystic kestrel Nov 15, 2021, 9:40 PM

#

It doesn't look like you're asking for a shipping address though?

#

So that's never going to fire?

fierce lark Nov 15, 2021, 9:40 PM

#

Let me share the full code

#

I just pasted a snippet

mystic kestrel Nov 15, 2021, 9:41 PM

#

No, I mean, when I go to your link above I'm not being asked for a shipping address.

fierce lark Nov 15, 2021, 9:41 PM

#

Do you have a shippin gaddress saved in your browser?

#

https://pastecode.io/s/sv4ff0dt

mystic kestrel Nov 15, 2021, 9:42 PM

#

I thought I did...

#

Even if I didn't, though, it would prompt me to enter a new one.

fierce lark Nov 15, 2021, 9:43 PM

#

Interesting

mystic kestrel Nov 15, 2021, 9:43 PM

#

Yeah, so this code isn't relevant to the issue. The issue is that shippingaddresschange will never be called because you're not requesting shipping info in the first place: https://stripe.com/docs/js/payment_request/create#stripe_payment_request-options-requestShipping

fierce lark Nov 15, 2021, 9:43 PM

#

Well I know that event is triggered because we retrieve the shipping info properly

#

const pr = stripe.paymentRequest({
            country: 'US',
            currency: paymentIntent.currency,
            total: {
              amount: paymentIntent.amount,
              label: 'Total',
            },
            requestPayerName: true,
            requestPayerEmail: true,
            requestShipping: true,
          })

#

Here's my payment request

mystic kestrel Nov 15, 2021, 9:44 PM

#

Interesting!

#

Oh, it's on the next page after clicking Continue...

fierce lark Nov 15, 2021, 9:45 PM

#

Oh yeah lol the interface varies

#

Sometimes it goes straight to the next page, sometimes it goes to that intermediate page

mystic kestrel Nov 15, 2021, 9:45 PM

#

Why do they have to change this all the time? 😅

fierce lark Nov 15, 2021, 9:45 PM

#

It's soooo weird

#

I wasn't sure if that was a Stripe thing or GPay thing lol

mystic kestrel Nov 15, 2021, 9:46 PM

#

As far as I know it's a Google thing. Anyway, I think the issue is that you're not specifying any displayItems when creating the button initially. If you specify one that matches the total info does that get it working?

fierce lark Nov 15, 2021, 9:46 PM

#

hmm let me try that

#

sadly no

mystic kestrel Nov 15, 2021, 9:48 PM

#

Is that change live? Can I reload and see the difference?

fierce lark Nov 15, 2021, 9:48 PM

#

oh wait

#

I mispelled the name

#

It does work!

mystic kestrel Nov 15, 2021, 9:48 PM

#

Yay!

fierce lark Nov 15, 2021, 9:48 PM

#

though you can see now the tax line says "Tax (includes Shipp...)" instead of "Tax (includes Shipping)"

#

Is there a hard character limit?

mystic kestrel Nov 15, 2021, 9:49 PM

#

None that I'm aware of, and it probably varies based on Apple Pay vs. Google Pay vs. Google's general mood this week. 🙂

fierce lark Nov 15, 2021, 9:50 PM

#

XD how kind of Google to be transparent

mystic kestrel Nov 15, 2021, 9:50 PM

#

You could change it to "(with shipping)" instead. 🙂

fierce lark Nov 15, 2021, 9:50 PM

#

Eh what customer is gonna calculate the tax themselves and question why it's not on just the subottal

#

I'd be impressed if someone did haha

#

While I've got you here, I had a higher level question about the event listeners

mystic kestrel Nov 15, 2021, 9:52 PM

#

Shoot.

fierce lark Nov 15, 2021, 9:53 PM

#

It seems like there's a queue of event listeners that are triggered any time the Stripe component is rerendered (rendered in React, not refreshing the page or anything like that). So let's say I update my quantity from 1->2->3->2->1, that's 5 re-renders of the purchase component

#

Then when i click the Gpay button, the event listener gets called 5 times

#

I don't know if what I'm saying exactly makes sense, but my question is how can I make sure the event listener only starts to process events AFTER clicking the button. So those 5 re-renders of the component wouldn't get counted, and then once I click the button and the interface shows up, any shipping address/option change would be counted from then on

mystic kestrel Nov 15, 2021, 9:56 PM

#

I don't know React very well, but "Then when i click the Gpay button, the event listener gets called 5 times" sounds like something is wrong somewhere. The listener should only be getting called once.

#

Did you use the integration guide here to implement the button? https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react

fierce lark Nov 15, 2021, 9:57 PM

#

yep

#

except we are using a custom button

#

Not the PaymentRequestButtonElement

mystic kestrel Nov 15, 2021, 9:59 PM

#

Hm. Is the Payment Request object being created and destroyed on every render?

fierce lark Nov 15, 2021, 10:00 PM

#

no

mystic kestrel Nov 15, 2021, 10:02 PM

#

Can you share the code relevant to this?

fierce lark Nov 15, 2021, 10:02 PM

#

I am currently using a workaround by setting a flag to false initially and then setting it to true after the first interaction with the event listener

#

Let me undo that and share the code, and I'll also make some of the components visible so you can play with the quantity yourself

#

Try this link again - https://04ae-2601-640-8981-6b90-f5d0-226e-7e9d-fcda.ngrok.io/checkout/b/kit/ava/KzTeM2wO

#

And increase/decrease the quantity a few times

#

Then click the pay button with the developer console tab open

#

You'll see a ton of shippingAddressChangeRequest

#

Additionally, the price initially show the correct amount and there are no shipping options, but after the event listener is completed, you might see an incorrect price & a default shipping option

mystic kestrel Nov 15, 2021, 10:10 PM

#

Looking...

fierce lark Nov 15, 2021, 10:11 PM

#

here's the code: https://pastecode.io/s/feqsy8qh
password: rubeus

mystic kestrel Nov 15, 2021, 10:24 PM

#

Nothing is jumping out at me, but asking internally, hang on...

#

Okay, so we think this is because the code that registers to listen for the event is being called again on every render (meaning your code is saying "listen for the shippingaddresschange event" on every render). We think it's because you're missing the second argument in useEffect(): https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

fierce lark Nov 15, 2021, 10:42 PM

#

So I only added that useEffect in order to avoid server-side rendering, if I use an empty array that might avoid it from re-rendering

#

Adding empty array as useEffect dependency causes a different error, let me add some console logs for some clarity

#

It seems like adding the empty array means the event listeners aren't triggered at all anymore

mystic kestrel Nov 15, 2021, 10:50 PM

#

The idea is to add the dependencies in the array that cause the code to be run once only.

#

If you specify an empty array the code will only be run once, but it will likely happen before the paymentRequest is ready.

fierce lark Nov 15, 2021, 10:52 PM

#

what dependencies in this case? paymentRequest?

mystic kestrel Nov 15, 2021, 11:04 PM

#

Possibly, I think it depends on the specifics of the rest of your app's lifecycle.

#Akshay - Payment Request Button Line Items