Show loader on INITIALIZE step

[DmitriyMuliak]

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:

GooglePayInitialize.mp4

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)
• 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.

[dmengelt]

@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.

[jocmp]

Hey @dmengelt, I'm also running into the same issue. Do you have any recommendations for workarounds instead of a fix?

[dmengelt]

Adyen/adyen-web#2804