React Native Webview / Stripe / Google Pay答案

【问题标题】：React Native Webview / Stripe / Google PayReact Native Webview / Stripe / Google Pay
【发布时间】：2022-01-24 18:42:10
【问题描述】：

使用 React Native Webview 传递使用 Stripe 的第三方站点。他们有 Google Pay，但是使用 React Native Webview 时不会出现 Google Pay 按钮。如果我使用第三方网站 url 并通过 Android 上的 Chrome 查看它，那么 Google Pay 确实会出现。 React Native Webview 有什么问题，还是我需要从应用程序传递一些东西到 webview 以使第三方网站与 Google pay 一起出现？

【问题讨论】：

嗨@Matt Holmes，有什么解决方案吗？

标签： react-native

【解决方案1】：

简短的回答是，这是由于通常使用 WebViews，在移动设备上您需要使用 native integration。除非您还控制网站，否则您无能为力，因为您需要使用本机实现。

根据Google's docs，对于一般的WebViews

对于使用 WebView 的 Android 应用，您必须调用特定于平台的 Android Google Pay API。有关示例，请参阅将 JavaScript 代码绑定到 Android 代码。

查看绑定示例，它们公开了一个 JS 接口，用于在 WebView 的本机应用程序之间进行通信。您可以使用 WebView 中的 onMessage 函数在 React Native 中实现这种通信，并在 Web 视图上运行 injectJavaScript，如文档中的 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>
    );
  }

如果您在应用程序和 webview 之间进行消息传递，那么您应该能够处理传递以检查 Google Pay 支持（并在 webview 中呈现任何体验）。并且您可以从视图中触发原生支付流程。

【讨论】：