Menu
In my react-native project i have used react-native-webview and stripe js (https://js.stripe.com/v3)
Using stripe js i am creating card element to collect card details
var elements = stripe.elements()
var card = elements.create('card');
card.mount('#card-element');
when user press submit button i am calling stripe.confirmPaymentIntent() function to complete the payment.
But i am facing problem when i use PRODUCTION PUBLIC_KEY card element is not displaying, for test PUBLIC_KEY card element displaying properly.
Any solution ?
My project details are
xcode version - 12.1 IOS version - 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>
);
}
936
Stripe.js requires that you run your site over HTTPS in production. To make testing easier, this restriction is lifted when you use your test API keys, which is why it was working for you before. React Native will by default serve any raw HTML over about:blank. So, when you switched from your test to live publishable key, Stripe would have thrown an error saying that live Stripe.js integrations must use HTTPS. There are two options to fix this:
about:blank with this URL and any non-absolute links in the raw HTML will be relative to that URL. For example: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>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
