Question

我正在尝试将Stripe改编成我的ASP.NET C＃我跟着并整合了条纹元素https://stripe.com/docs/elements

我的代码

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

<!DOCTYPE html>


<html xmlns="http://www.w3.org/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.com/v3/"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <script src="https://js.stripe.com/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>

有人可以告诉我为什么我有错误Uncaught TypeError：无法读取属性＆＃39; addEventListener＆＃39;当我运行chrome控制台时为null？错误来自form.addEventListener（＆＃39;提交＆＃39;，功能（事件）{

Answer 1

问题是您在表单中有一个表单，invalid HTML：

<form id="form1" runat="server">
  <div>
    <script src="https://js.stripe.com/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>

您需要更新代码以删除外部表单，因为addEventListener()定位于内部表单：

<div>
  <script src="https://js.stripe.com/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>

不是is possible使用jQuery在表单中创建表单，虽然它相当复杂，在这种情况下不需要。

希望这有帮助！：）

条带实现得到错误无法读取属性＆＃39; addEventListener＆＃39;为null

1 个答案: