title: Stripe payment example is not displaying
body: <p>I am trying to create a really simple example of using Stripe payments.</p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Create a Stripe client
  var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');
  
  // Create an instance of Elements
  var elements = stripe.elements();
  
  // Custom styling can be passed to options when creating an Element.
  // (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
  };
  
  // Create an instance of the card Element
  var card = elements.create('card', {style: style});
  
  // Add an instance of the card Element into the `card-element` &lt;div&gt;
  card.mount('#card-element');
  
  // Handle real-time validation errors from the card Element.
  card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
  });
  
  // Handle form submission
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.StripeElement {
  background-color: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  }
  
  .StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
  }
  
  .StripeElement--invalid {
  border-color: #fa755a;
  }
  
  .StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
      &lt;title&gt;test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form action="/charge" method="post" id="payment-form"&gt;
        &lt;div class="form-row"&gt;
          &lt;label for="card-element"&gt;
            Credit or debit card
          &lt;/label&gt;
          &lt;div id="card-element"&gt;
            &lt;!-- a Stripe Element will be inserted here. --&gt;
          &lt;/div&gt;
  
          &lt;!-- Used to display form errors --&gt;
          &lt;div id="card-errors"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button&gt;Submit Payment&lt;/button&gt;
      &lt;/form&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I followed the example from <a href="https://stripe.com/docs/elements" rel="nofollow noreferrer">Stripe</a>.</p>
  <p>This is the error that I got from the Javascript console:</p>
  <pre class="lang-none prettyprint-override"><code>Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
  Make sure the element exists on the page before calling mount().
       at new t (js.stripe.com/:1)
       at t.value (js.stripe.com/:1)
  </code></pre>
  <p>Based on the error, I think the Stripe JavaScript could not find any <code>#card-element</code>, but it is there.</p>
  <p>This could be a dumb question, but this is my first time using Stripe, so it would be great if someone could help me. Thank you so much.</p>