React-Native，未显示实时API密钥的Stripe卡元素

如何解决React-Native，未显示实时API密钥的Stripe卡元素

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

我使用条纹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>
  );
}

解决方法

Stripe.js要求您在生产环境中通过HTTPS运行站点。为了简化测试，使用测试API密钥时取消了此限制，这就是以前为您服务的原因。默认情况下，React Native将通过about:blank提供任何原始HTML。因此，当您从测试切换到实时可发布密钥时，Stripe会引发错误，指出实时Stripe.js集成必须使用HTTPS。有两种解决方法：

代替向WebView组件提供原始HTML，您可以通过HTTPS托管站点，并在实例化该组件时将其作为源URI传递。
您可以提供baseURL选项，该选项指向通过https服务的网站。 React Native将用此URL替换about:blank，并且原始HTML中的任何非绝对链接都将相对于该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>
  );
}