Implementing Google Pay Button in React Application

[nitzanma]

Hi,
We have a mobile application, where the payment part is implemented in a WebView React Application.

We understand that we need to implement the Google Pay button in the Webview side, using your API, but we wish to implement button for UI only, and leave the payment data to be created and taken care of in the mobile side.
Meaning - click on the button will let mobile side knows that they should start the payment flow. the button will not pass the PaymentRequest through the React Component if possible - mobile will, and mobile side will take care of the payment process in front of Google, will make the device pop the Google Pay drawer, and in the end they will let us know that payment went successfully (passing us token by native bridge).

Is there a way for us, to use your API in this way?

Thanks

[nitzanma]

@dmengelt any input for that please?

[dmengelt]

@nitzanma I'm not sure if I fully understand your use case. Did you manage to have a look at our react-native wrapper?

https://github.com/google-pay/react-native-make-payment

[nitzanma]

@dmengelt
We don't use React Native actually.

I'll try to explain - We have an app (separately written for Android and iOS). App has a flow, that when reaching to payment stage - it opens a Webview which is written in React. This WebView is kind of a proxy, meaning it shows UI with the details needed, but the actual payment flow and logic happens between the mobile and our backend.
The Webview and the Mobile side passes information with what called native bridges.
In regular payment flow (no Gpay, simple credit card payment) after entering card details in the WebView, the user clicks Confirm. At this point the Webview lets Mobile side knows this was confirmed, and mobile side proceed the app flow.

We thought about doing the same for Google Pay - WebView to show the GPay button. Clicking the button will let mobile side know, and they (Mobile) will prepare PaymentRequest to invoke the GPay UI drawer to open, letting the customer to complete the payment.

The thing is that the react implementation forces to pass the Payment Request data from the button component, and we wanted to understand if there's a way to ignore it, and keep the flow as it is now (exaplaind in the prev paragraph).

it's true that WebView is initiated from the Mobile side, but since these are two completely different apps, written using different tech stack, we treat them separately.

Hope it shades more light on my question.
Thanks for the effort!

[dmengelt]

How about not using the react-component but our createButton() API directly?

You can see that you can define a onClick() handler. So if onClick() gets triggered, you let the mobile side know to actually start Google Pay.

[nitzanma]

@dmengelt , what is the package I should install for that?

[dmengelt]

We don't provide a package just for the createButton() functionality. You would need to load the script on your own. Maybe you could have a look here for a starting point.