title: Using a Stripe credit card form in Google Chrome extension-- unable to avoid "Payment not secure?"
body: <p>I'm trying to get a simple Stripe credit card form inside the browser popup for a google chrome extension.  However with the latest version of Chrome, the credit card form is always being accompanied with a message of  "Payment not secure":</p>
  
  <p><a href="https://i.stack.imgur.com/K1QAf.png" rel="nofollow noreferrer">Payment not secure</a></p>
  
  <p>I've read what the google chrome docs have to say about this message over here: <a href="https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn" rel="nofollow noreferrer">https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn</a>   </p>
  
  <p>And I think this is the relevant part:</p>
  
  <p><em>To ensure that the Not Secure warning is not displayed for your pages, you must ensure that all forms containing  elements and any inputs detected as credit card fields are present only on secure origins. This means that the top-level page must be HTTPS and, if the input is in an iframe, that iframe must also be served over HTTPS.</em></p>
  
  <p>I've inspected the iframe of the Stripe credit card form, and it seems to be loading all of its resources over https, like Google says it should.  </p>
  
  <p>I am not loading any other resources anywhere else in the extension.</p>
  
  <p>The only other thing I can think of is that the extension popup itself is a chrome-extension:// URL, but I am unsure if that is relevant here.  If that is the problem, does that mean that it's impossible to have a credit card form inside an extension popup without the "payment not secure" message?</p>
  
  <p>Any help or clarification would be much appreciated!</p>
  
  <p>Here is my code:</p>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;script src="stripe.js"&gt;&lt;/script&gt;
      &lt;style&gt;
        body{
          width: 400px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id="PaymentForm"&gt;
        &lt;h2&gt;Enter Payment Details&lt;/h2&gt;
        &lt;div&gt;
          &lt;div id="card-element" class="field"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>popup.js:</p>
  
  <pre><code>window.onload = function(){
    var stripe = Stripe('MY_API_KEY');
    var elements = stripe.elements();
  
    var card = elements.create('card', {
      style: {
        base: {
          iconColor: '#666EE8',
          color: '#31325F',
          lineHeight: '40px',
          fontWeight: 300,
          fontFamily: 'Helvetica Neue',
          fontSize: '15px',
  
          '::placeholder': {
            color: '#CFD7E0',
          },
        },
      }
    });
    card.mount('#card-element');
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After completely uninstalling Chrome and deleting all my profile information at  ~/Library/Application Support/Google/Chrome and then reinstalling it, this credit card form error seems to have disappeared and I no longer see the "payment not secure" message.  Maybe it was just some weird transient bug.  However, the Stripe API still prints an ominous warning to the console:</p>
  
  <p><em>You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.</em></p>
  
  <p>And as said before Stripe seems to be doing everything with https itself, so I'm wondering if this (maybe?) is related to the fact the stripe form is inside a browser popup with a chrome-extension:// url. </p>