title: React-Native, Stripe card element not displaying for live API key
body: <p>In my react-native project i have used react-native-webview and stripe js (<a href="https://js.stripe.com/v3" rel="nofollow noreferrer">https://js.stripe.com/v3</a>)</p>
  <p>Using stripe js i am creating card element to collect card details</p>
  <pre><code>var elements = stripe.elements()
  var card = elements.create('card');
  card.mount('#card-element');
  </code></pre>
  <p>when user press submit button i am calling
  stripe.confirmPaymentIntent() function to complete the payment.</p>
  <p>But i am facing problem when i use PRODUCTION PUBLIC_KEY card element is not displaying, for test PUBLIC_KEY card element displaying properly.</p>
  <p>Any solution ?</p>
  <p>My project details are</p>
  <ul>
  <li>&quot;react&quot;: &quot;16.9.0&quot;</li>
  <li>&quot;react-native&quot;: &quot;0.61.5&quot;</li>
  <li>&quot;react-native-webview&quot;: &quot;10.3.2&quot;</li>
  </ul>
  <p>xcode version - 12.1
  IOS version - 14.1</p>
  <pre><code>function stripeCheckoutRedirectHTML(PUBLIC_KEY) {
    return `&lt;!DOCTYPE html&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;html&gt;
  &lt;body&gt;
    &lt;!-- Load Stripe.js on your website. --&gt;
    &lt;script src=&quot;https://js.stripe.com/v3&quot;&gt;&lt;/script&gt;
    &lt;h1 id=&quot;error-message&quot;&gt;&lt;/h1&gt;
    &lt;form method=&quot;post&quot; id=&quot;payment-form&quot;&gt;
      &lt;div class=&quot;form-row&quot;&gt;
        &lt;label for=&quot;card-element&quot;&gt;
          Credit or debit card
        &lt;/label&gt;
        &lt;div id=&quot;card-element&quot;&gt;
          &lt;!-- A Stripe Element will be inserted here. --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button&gt;Submit Payment&lt;/button&gt;
    &lt;/form&gt;
    &lt;script&gt;
      var stripe = Stripe(${PUBLIC_KEY});
      var elements = stripe.elements();
      var card = elements.create('card');
      card.mount('#card-element');
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;`;
  }
  </code></pre>
  <pre><code>export default function Payment({route, navigation}) {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.body} showsVerticalScrollIndicator={false}&gt;
          &lt;WebView
            originWhitelist={['*']}
            source={{
              html: stripeCheckoutRedirectHTML(Config.PUBLIC_KEY),
            }}
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>