React-Native，Stripe 卡片元素不显示实时 API 键

Question

在我的 react-native 项目中，我使用了 react-native-webview 和 stripe js (https://js.stripe.com/v3)

我正在使用 stripe js 创建卡片元素来收集卡片详细信息

var elements = stripe.elements()
var card = elements.create('card');
card.mount('#card-element');

当用户按下提交按钮时，我正在呼叫 stripe.confirmPaymentIntent()函数完成支付

但是我在使用 PRODUCTION PUBLIC_KEY 卡片元素时遇到问题，为了测试 PUBLIC_KEY 卡片元素是否正确显示。

有什么解决办法吗？

我的项目详情是

“反应”：“16.9.0”
“本机反应”：“0.61.5”
"react-native-webview": "10.3.2"

xcode 版本 - 12.1 IOS 版本 - 14.1

function stripeCheckoutRedirectHTML(PUBLIC_KEY) {
  return `<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<body>
  <!-- Load Stripe.js on your website. -->
  <script src="https://js.stripe.com/v3"></script>
  <h1 id="error-message"></h1>
  <form method="post" id="payment-form">
    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div id="card-element">
        <!-- A Stripe Element will be inserted here. -->
      </div>
    </div>
    <button>Submit Payment</button>
  </form>
  <script>
    var stripe = Stripe(${PUBLIC_KEY});
    var elements = stripe.elements();
    var card = elements.create('card');
    card.mount('#card-element');
  </script>
</body>

</html>`;
}

export default function Payment({route, navigation}) {
  return (
    <View style={styles.container}>
      <View style={styles.body} showsVerticalScrollIndicator={false}>
        <WebView
          originWhitelist={['*']}
          source={{
            html: stripeCheckoutRedirectHTML(Config.PUBLIC_KEY),
          }}
        />
      </View>
    </View>
  );
}

Answer 1

Stripe.js 要求您运行您的网站在生产中通过 HTTPS。为了使测试更容易，当您使用测试 API 键时会取消此限制，这就是它之前对您有用的原因。默认情况下，React Native 将在 about:blank 上提供任何原始 HTML。因此，当您从测试切换到实时可发布密钥时，Stripe 会抛出一个错误，指出实时 Stripe.js 集成必须使用 HTTPS。有两个选项可以解决此问题：

您可以通过 HTTPS 托管您的站点，并在实例化该组件时将其作为源 URI 传递，而不是向 WebView 组件提供原始 HTML。
您可以提供指向通过 https 提供服务的网站的基本URL 选项。 React Native 将用这个 URL 替换 about:blank 并且原始 HTML 中的任何 non-absolute 链接都将相对于那个 URL。例如：

export default function Payment({route, navigation}) {
  return (
    <View style={styles.container}>
      <View style={styles.body} showsVerticalScrollIndicator={false}>
        <WebView
          originWhitelist={['*']}
          source={{
            html: stripeCheckoutRedirectHTML(Config.PUBLIC_KEY),
            baseUrl: 'https://example.com',
          }}
        />
      </View>
    </View>
  );
}

React-Native，Stripe 卡片元素不显示实时 API 键

React-Native, Stripe card element not displaying for live API key

html

javascript

stripe-payments

react-native

react-native-webview