javascript - Stripe implementation got error Cannot read property 'addEventListener' of null

I am trying to imeplement Stripe into my ASP.NET C# I followed and integrate the Stripe Elements

My code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Payment2.aspx.cs" Inherits="Payment2" %>

<!DOCTYPE html>


<html xmlns="">
<head runat="server">
    <title></title>
    <style>
        /**
 * 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;
        }
    </style>

    <script src="/"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <script src="/"></script>

            <form action="/Payment2.aspx" 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>

                    <!-- Used to display form errors -->
                    <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
            </form>

        </div>
    </form>
    <script>

        // 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` <div>
        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);
                }
            });
        });
    </script>
</body>
</html>

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) {

I am trying to imeplement Stripe into my ASP.NET C# I followed and integrate the Stripe Elements https://stripe./docs/elements

My code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Payment2.aspx.cs" Inherits="Payment2" %>

<!DOCTYPE html>


<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        /**
 * 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;
        }
    </style>

    <script src="https://js.stripe./v3/"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <script src="https://js.stripe./v3/"></script>

            <form action="/Payment2.aspx" 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>

                    <!-- Used to display form errors -->
                    <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
            </form>

        </div>
    </form>
    <script>

        // 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` <div>
        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);
                }
            });
        });
    </script>
</body>
</html>

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) {

Share Improve this question edited Jul 4, 2017 at 23:06 asked Jul 4, 2017 at 22:52 Carmen C 552 silver badges13 bronze badges

Which .addEvenetListener is throwing the error for you? card? form? I'm assuming card, because it isn't actually an element in the DOM. Is .mount a Strip function? Because it's not the JavaScript function for attaching the created element to the parent. That would be ('#card-element').appendChild(card). – Obsidian Age Commented Jul 4, 2017 at 22:54
Please post the entire error! – Chris Happy Commented Jul 4, 2017 at 22:57
@ChrisHappy Hi, the error is Uncaught TypeError: Cannot read property 'addEventListener' of null from the "form.addEventListener('submit', function (event) {" – Carmen C Commented Jul 4, 2017 at 23:06
@ObsidianAge Thanks for reply, the error is from form.addEventListener('submit', function (event) { – Carmen C Commented Jul 4, 2017 at 23:07

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

The problem is that you have a form within a form, which is invalid HTML:

<form id="form1" runat="server">
  <div>
    <script src="https://js.stripe./v3/"></script>
    <form action="/Payment2.aspx" 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>
        <!-- Used to display form errors -->
        <div id="card-errors" role="alert"></div>
      </div>
      <button>Submit Payment</button>
    </form>
  </div>
</form>

You need to update your code to remove the outer form, as your addEventListener() is targeting the inner form:

<div>
  <script src="https://js.stripe./v3/"></script>
  <form action="/Payment2.aspx" 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>
      <!-- Used to display form errors -->
      <div id="card-errors" role="alert"></div>
    </div>
    <button>Submit Payment</button>
  </form>
</div>

Not that it is possible to create a form within a form by utilising jQuery, though it's rather plex, and isn't needed in this case.

Hope this helps! :)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Stripe implementation got error Cannot read property 'addEventListener' of null - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)