问题描述
在我的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>
);
}