React Native Webview / Stripe / Google Pay

Question

React Native Webview / Stripe / Google Pay

使用 React Native Webview 传递使用 Stripe 的第三方站点。他们有 Google Pay，但是使用 React Native Webview 时不会出现 Google Pay 按钮。如果我获取第三方网站网址并通过 Android 上的 Chrome 查看它，那么 Google Pay 就会出现。React Native Webview 是否有问题，或者我是否需要将某些内容从应用程序传递到 Webview 才能使第三方网站与 Google pay 一起使用？

Answer 1

Lis*_*isa 3

简而言之，这是由于通常使用 WebViews 造成的，在移动设备上您需要使用本机集成。除非您也控制该站点，否则您无能为力，因为您需要使用本机实现。

根据Google 的文档，对于一般的 WebViews

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

查看绑定示例，它们公开了一个 JS 接口，用于通过 WebView 在本机应用程序之间进行通信。您可以在 React Native 中使用onMessageWebView 中的函数并injectJavaScript在 Webview 上运行来实现此通信，如此处所述。

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>
    );
  }

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	4 年，11 月前
查看次数：	2216 次
最近记录：	3 年，11 月前