Update google and apple pay amount

We’re using the Online Web payments SDK and are using google/apple pay along with the card entry form. We want to be able to update the amount based on the user selection, e.g. adding a voucher. I seem to be able to do this by reloading the whole google pay/apple pay components but I was hoping there was a better way to do this as it causes flashes and sometimes duplicate buttons.

From the docs I can see that you can update the amount inside google pay when the user changes the address using

req.addEventListener('shippingoptionchanged', (option) => {
 return {
     lineItems,
     total,
   };
}

Is it possible to just call an update function to change the total before the user clicks the apple pay/google play button?

:wave: Are you referring to the amount that’s displayed when you click on Google Pay or Apple Pay? :slightly_smiling_face:

Hi Bryan, yes after clicking the google pay button it shows the original price that it was first initialised with. I was wondering if there was a way to dynamically update it with the new price without having to reload the whole button.

My current workaround is to reload the whole thing with

const paymentRequest = payments.paymentRequest({...})
const googlePay = await payments.googlePay(paymentRequest);
await googlePay.attach('#google-pay-button');

As there is an event listener to update the price on shipping change I assumed there is a way to update it without reloading everything but I can’t see any docs showing the function or how the event listeners work in the code.

I think this might be what you are looking for: https://developer.squareup.com/reference/sdks/web/payments/objects/PaymentRequest#PaymentRequest.update