React-Native，条纹卡元素未显示实时 API 密钥
Posted
技术标签:
【中文标题】React-Native，条纹卡元素未显示实时 API 密钥【英文标题】：React-Native, Stripe card element not displaying for live API key 【发布时间】：2021-02-18 10:39:31 【问题描述】：在我的 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” “react-native”：“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>
);
【问题讨论】：
【参考方案1】：Stripe.js 要求您在生产环境中通过 HTTPS 运行您的网站。为了使测试更容易，当您使用测试 API 密钥时，此限制会被取消，这就是它之前为您工作的原因。默认情况下，React Native 将通过about:blank 提供任何原始 HTML。因此，当您从测试切换到实时可发布密钥时，Stripe 会抛出一个错误，指出实时 Stripe.js 集成必须使用 HTTPS。有两种方法可以解决此问题：
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>
);
【讨论】：
以上是关于React-Native，条纹卡元素未显示实时 API 密钥的主要内容，如果未能解决你的问题，请参考以下文章