title: Stripe implementation got error Cannot read property 'addEventListener' of null
body: <p><p>
  I am trying to imeplement Stripe into my ASP.NET C#
  I followed and integrate the Stripe Elements <a href="https://stripe.com/docs/elements" rel="nofollow noreferrer">https://stripe.com/docs/elements</a> <p></p>
  
  <p>My code</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Payment2.aspx.cs" Inherits="Payment2" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          /**
   * The CSS shown here will not be introduced in the Quickstart guide, but shows
   * how you can use CSS to style your Element's container.
   */
          .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;
          }
      &lt;/style&gt;
  
      &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div&gt;
  
              &lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  
              &lt;form action="/Payment2.aspx" 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" role="alert"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;button&gt;Submit Payment&lt;/button&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
      &lt;script&gt;
  
          // Create a Stripe client
          var stripe = Stripe('pk_test_2O7D78OBubjUApxMMbvbHLVr');
  
          // 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);
                  }
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can someone tell me why I had error Uncaught TypeError: Cannot read property 'addEventListener' of null when I run the chrome console?
  Error is from form.addEventListener('submit', function (event) {</p>