Callback to execute additional logic before opening the Payment Pequest UI

[nielsengoncalves]

Hello,

We're using the React component and we have a requirement that we need to do some additional logic when user clicks the Google Pay button before opening the popup.

It would be nice if there was a possibility to use some of components callback to achieve that, something such as onSelect or any other naming that fits better.

<GooglePayButton
  environment="TEST"
  paymentRequest={{...}}
  onSelect={() => {
    // Additional logic that should happen before popup is open
  }}
/>

[socsieng]

@nielsengoncalves, this is something we've considered and haven't implemented as this request hasn't previously been requested. FYI, it would likely be called onClick.

One of the things I would like to better understand is what you are planning to use this.

A challenge with this is the fact that the payment sheet must be triggered by a user gesture and some browsers have different ways for determining if the sheet was triggered by a user gesture.

I've previously run into issues with browsers where some latency between the click and displaying the payment sheet can cause the browser to think that the payment sheet was triggered without a user gesture and therefore error out without displaying the payment sheet. An example of this includes making a network request onClick before displaying the payment sheet.

Depending on what you are trying to do, there may be other alternatives. For example, if you would like to dynamically calculate total price, the onPaymentAuthorized or onPaymentDataChanged callbacks provides an opportunity for you to make requests etc. to calculate the total price.

[nielsengoncalves]

Thank you for your reply @socsieng,

In our use case, we need to keep track of each payment attempts that our users are performing for each payment method that we have in our system. With that we can calculate the conversion rate per payment method and take better business decisions, etc.

Technically speaking, we need to call an endpoint when user selects the google pay which will be responsible for creating the attempt that will have its status updated on further steps.

We can't just use onLoadPaymentData because if customers select Google Pay and for some reason just close the popup, their intent would not be registered correctly.

[socsieng]

Sounds good. Thanks for the context.

I'll publish something later today.

[socsieng]

@nielsengoncalves, this should now be available as of v2.5.0 in the form of an onClick callback.

Please let me know if you have any questions or issues.

[nielsengoncalves]

@socsieng it works as expected, thank you so much!