google-pay
Show loader on INITIALIZE step
Hi 👋
Description:
Library have onPaymentDataChanged callback. It triggering with paymentData arguments.
This callback can return promise.
We handle initialization step -> paymentData.callbackTrigger === 'INITIALIZE' and do some async stuff.
But in this case loader is not shown.
For example for cases callbackTrigger === 'SHIPPING_OPTION' || callbackTrigger === 'SHIPPING_ADDRESS' it shows.
Video:
https://github.com/google-pay/google-pay-button/assets/26421190/e40252d2-144c-4738-a150-f01f510e9ff8
To Reproduce:
Add async stuff to onPaymentDataChanged when paymentData.callbackTrigger === 'INITIALIZE'.
and return promise with new paymentData.
You will see blink price without any loader.
For example:
if(paymentData.callbackTrigger === 'INITIALIZE')
await new Promise(r => setTimeout(r, 2000)); // do some api calls
return newPaymentDataWithUpdatedTotalPrice
Fiddle: https://jsfiddle.net/un0rjm7d/3/
Expected behavior:
In case when paymentData.callbackTrigger === 'INITIALIZE' and onPaymentDataChanged return promise with new paymentData -> show loader until promise will be resolved.
Component information:
- Component
- React component (
@google-pay/button-react)
- React component (
- Component version (3.0.10):
Environment:
- Device: any
- OS: any
- Browser: any
- Country/region: any
Additional context:
On initialization step (after click on Gpay button) we call our api for check internal stuff and can return new totalPrice.
For example we can check address and calculate new price.
But user see old data without loader and trying to click pay -> nothing happens -> price updating -> user confused.
In case when user have slow internet connection he didn't know why he can't pay and decide to leave.
But at the same time when callbackTrigger === 'SHIPPING_OPTION' || callbackTrigger === 'SHIPPING_ADDRESS'
we also do some async stuff but in this case user will see loader until our promise will be resolved.
@DmitriyMuliak thanks for reporting this! this is a bug. we will look into it. Unfortunately I can't give you an estimation on when we will fix this yet.
Hey @dmengelt, I'm also running into the same issue. Do you have any recommendations for workarounds instead of a fix?
So sorry @fox-1m. We fixed this issue some time ago already. However, its part of a bigger project and we are still working on the rollout. Will let everbody know as soon as it is deployed to 100% in prod.
@DmitriyMuliak / @jocmp / @fox-1m With the rollout of the new UI for Google Pay on web this issue got fixed as well.