React Native Webview / Stripe / Google Pay

react-native

Using React Native Webview to pass a third party site which is using Stripe. They have Google Pay, however the Google Pay button does not appear using React Native Webview. If I take the third party website url and view it via Chrome on Android then Google Pay does appear. Is there something wrong with React Native Webview, or do I need to pass something from app to webview to make third party site work with Google pay appearing?

Solution 1:

The short answer is that this is due to using WebViews in general, on mobile you need to be using the native integration. There isn't anything you can do unless you also control the site because you need to be using the native implementation.

According to Google's docs, for WebViews in general

For Android apps which use WebViews, you must invoke platform specific Android Google Pay APIs. See Binding JavaScript code to Android code for examples.

Looking at the binding example, they expose a JS interface for communicating between native apps from the WebView. You can achieve this communication In React Native with the onMessage function in a WebView and running injectJavaScript on the webview as documented here.

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    // Triggers an alert in the native app.
    const html = `
      <html>
      <head></head>
      <body>
        <script>
          setTimeout(function () {
            window.ReactNativeWebView.postMessage("Hello!")
          }, 2000)
        </script>
      </body>
      </html>
    `;

    const run = `
      document.body.style.backgroundColor = 'blue';
      true;
    `;

    // Will update the background in the web view.
    setTimeout(() => {
      this.webref.injectJavaScript(run);
    }, 3000);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={(r) => (this.webref = r)}
          source={{ html }}
          onMessage={(event) => {
            alert(event.nativeEvent.data);
          }}
          injectedJavaScript={runFirst}
        />
      </View>
    );
  }

If you have message passing working between the app and webview, then you should be able to handle passing along to check for Google Pay support (and rendering whatever experience in the webview). And you can trigger from the view the native payment flow.

React Native Webview / Stripe / Google Pay

Solution 1:

Related

Recent Posts