#aksong-paymentRequest

1 messages · Page 1 of 1 (latest)

jagged owl
surreal quarry
#

fwiw, i'm able to process 'normal' wallet payments just fine where the order total isn't changed during checkout

jagged owl
#

just to clarify your question, you are saying that the amount is not updated in the google pay dialog even though you have called paymentRequest.update to update it?

surreal quarry
#

right

jagged owl
#

paymentRequest.update can only be called when the browser payment interface is not showing. Listen to the click and cancel events to detect if the payment interface has been initiated. To update the PaymentRequest right before the payment interface is initiated, call paymentRequest.update in your click event handler.

#

Did you call it when the payment interface is showing?

surreal quarry
#

yeah, by browser interface, i took that to mean on mobile, the bottom panel for google pay

#

or does that mean the wallet "google pay" button?

#

i'm calling .update when the payment button is visible, not when the actual payment dialog is visible

jagged owl
#

can you share with me your code?

surreal quarry
#

update call is on 102

#

prOrderTotalCents is stored in useState

jagged owl
#

Hi I don't see line number here, and also can you copy and paste code instead of posting an image?

surreal quarry
jagged owl
#

Hi there, can you add await to pr.update in line 102?

surreal quarry
#

testing. btw, i can't really test locally, even using https + ngrok

#

i'm deploying to a dev site on aws

#

any secret to this?

jagged owl
#

I'm using the same setup as well, google pay/apple pay require your page to be served over https

surreal quarry
#

yeah, i tried using ngrok which gives an https url

#

but never really worked

jagged owl
#

You also need to add async in line 57, i.e., useEffect(async () => {

surreal quarry
#

yeah, it's not just that. useEffect fn's can't be async. need to define an async method inside the fn

#

react...

jagged owl
#

You might want to figure this out. I have tested in my integration and adding await in front of paymentRequest.update did the trick 🙂

surreal quarry
#

it'd be nice if the doc's had some indication that this is necessary

jagged owl
#

That's true, I'll give this feedback to the team

surreal quarry
#

i suppose it should have occurred to me since i'm making a call to stripe, tho 🙂

#

in my defense, it is kinda late 4 me today... :p

#

i don't think my use case is all that unusual. it'd be great if the original link i posted had taken this into acct

#

it'd certainly make the whole implementation process more dev friendly

jagged owl
#

Thanks for letting me know and I'll make sure the relevant team look into this matter.

surreal quarry
#

building now. will take a few more min to confirm the fix

#

hmm, not working..

#

what if i open the payment interface (click the google pay button), close it, update the amount and then click the google pay button again?

jagged owl
#

I just tested my integration again, it works without adding the awaits

surreal quarry
#

did u try clicking the pmt button, closing, updating, then clicking the pmt button again?

jagged owl
#

Yup, as long as the payment interface is closed, I'm about to update the amount

#

I'm updating the paymentRequest in a onChange handler, that's something different from your integration

surreal quarry
#

can u post ur code?

#

onchg of the total?

jagged owl
# 
 return (
      <>
        <PaymentRequestButtonElement options={{ paymentRequest }} />
        <Row align="middle">
          <Col span={8}>
            <Title level={5}>Input Amount</Title>
          </Col>
          <InputNumber
            style={{
              width: '50%',
            }}
            step="0.10"
            value={amount}
            min={0}
            max={10000000}
            onChange={async (newAmount) => {
              setAmount(newAmount)
              paymentRequest.update({
                total: {
                  label: 'TEST Lable',
                  amount: newAmount * 100,
                },
              })
            }}
            precision={2}
          />
        </Row>
      </>```
#

so basically I have a inputNumber to edit the amount, and I update the paymentRequest in its onchange

#

I'm using antd btw

surreal quarry
#

ic

#

my structure is a little diff, but should behave similarly...

jagged owl
#

so far this is the only difference I spot. btw did you see the console.log("update PR", prOrderTotalCents, orderTotals.orderTotalCents!); in your console?

surreal quarry
#

hmm... i'm going to move that update code to a separate useEffect

#

`
useEffect(() => {
const updateTotalAsync = async amount => {
if (paymentRequest) {
console.log("updateTotalAsync", amount);
await paymentRequest.update({
total: {
label: t("orderTotal"),
amount
}
});
}
};

    if (paymentRequest && orderTotals.orderTotalCents! !== prOrderTotalCents) {
        updateTotalAsync(orderTotals.orderTotalCents!);
        setPrOrderTotalCents(orderTotals.orderTotalCents);
    }
}, [orderTotals.orderTotalCents, paymentRequest, prOrderTotalCents, t]);

`

#

hmm, i think i know what's happening. need to refactor

#

can u upload your file here?

jagged owl
surreal quarry
#

thx

jagged owl
#

No problem. Hope it helps

surreal quarry
#

WORKS!

jagged owl
#

Cool! what did you change?

surreal quarry
#

splitting out the update to a separate useEffect + making sure i didn't repeat the setup fixed it

#

now i'm chking if(!paymentRequest) { ... setup the wallet}

#

in the big useEffect

jagged owl
#

I see, I guess some items in the original useEffect dependcy array prevent paymentRequest.update() getting called?

surreal quarry
#

i think it was always calling the other setup

#

anyhow, thanks for the help!

jagged owl
#

Happy to help!

surreal quarry
#

👍 🤟 🤛 👊