React-Native, Stripe card element not displaying for live API key

Question

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

"react": "16.9.0"
"react-native": "0.61.5"
"react-native-webview": "10.3.2"

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

score 7 · Accepted Answer · answered Nov 05 '20 at 20:01

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:

Instead of providing raw HTML to the WebView component you can host your site over HTTPS and pass that as the source URI when instantiating the component.
You can provide a baseURL option that points to a site served over https. React Native will replace 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>
  );
}

React-Native, Stripe card element not displaying for live API key

1 Answers1