Javascript React本机、条带卡元素未显示live API密钥_Javascript_Html_React Native_Stripe Payments_React Native Webview

Javascript React本机、条带卡元素未显示live API密钥

javascript html react-native stripe-payments

Javascript React本机、条带卡元素未显示live API密钥,javascript,html,react-native,stripe-payments,react-native-webview,Javascript,Html,React Native,Stripe Payments,React Native Webview,在我的react native项目中，我使用了react native webview和stripe js（）我正在使用stripe js创建card元素来收集卡的详细信息 var elements = stripe.elements() var card = elements.create('card'); card.mount('#card-element'); 当用户按下提交按钮时，我正在呼叫 stripe.confirmPaymentIntent（）函数完成付款但当我使用生产的公共

在我的react native项目中，我使用了react native webview和stripe js（）

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

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

当用户按下提交按钮时，我正在呼叫 stripe.confirmPaymentIntent（）函数完成付款

但当我使用生产的公共密钥卡元素未显示时，我面临的问题是测试公共密钥卡元素是否正确显示

有解决办法吗

我的项目详情如下

“反应”：“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>`;
}

函数stripeCheckoutRedirectHTML（公钥）{
返回`
信用卡还是借记卡
付款
var stripe=stripe（${PUBLIC_KEY}）；
var elements=stripe.elements（）；
var card=elements.create（'card'）；
卡。挂载（“#卡元素”）；
`;
}

导出默认功能付款（{route，navigation}）{
返回(
);
}

Stripe.js要求您在生产中通过HTTPS运行站点。为了使测试更容易，当您使用测试API键时，这个限制被解除，这就是为什么它以前对您有效。React Native默认情况下将通过

about:blank

提供任何原始HTML。所以，当您从测试切换到live publishable key时，Stripe会抛出一个错误，指出live Stripe.js集成必须使用HTTPS。有两个选项可以解决此问题：

您可以通过HTTPS托管站点，并在实例化组件时将其作为源URI传递，而不是向WebView组件提供原始HTML
您可以提供指向通过https提供服务的站点的baseURL选项。React Native将用此URL替换
```
about:blank
```
，原始HTML中的任何非绝对链接都将与该URL相关。例如：

导出默认功能付款（{route，navigation}）{
返回(
);
}

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

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