Stripe 实现出现错误无法读取 null 的属性“addEventListener”
Posted
技术标签:
【中文标题】Stripe 实现出现错误无法读取 null 的属性“addEventListener”【英文标题】：Stripe implementation got error Cannot read property 'addEventListener' of null 【发布时间】：2017-12-08 10:53:18 【问题描述】：我正在尝试将 Stripe 实现到我的 ASP.NET C# 我关注并整合了 Stripe Elements 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>
有人能告诉我为什么我在运行 chrome 控制台时出现错误 Uncaught TypeError: Cannot read property 'addEventListener' of null 吗？ 错误来自 form.addEventListener('submit', function (event)
【问题讨论】：
哪个.addEvenetListener 为您抛出错误？ card? form?我假设card，因为它实际上不是 DOM 中的元素。 .mount 是 Strip 函数吗？因为它不是用于将创建的元素附加到父元素的 JavaScript 函数。那将是('#card-element').appendChild(card)。
请发布整个错误！
@ChrisHappy 嗨，错误是 Uncaught TypeError: Cannot read property 'addEventListener' of null from the "form.addEventListener('submit', function (event) "
@ObsidianAge 感谢回复，错误来自 form.addEventListener('submit', function (event)
【参考方案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 在表单中创建表单，虽然它相当复杂，在这种情况下不需要。
希望这会有所帮助！ :)
【讨论】：
感谢您的帮助，它有效！我可以再问你一个问题吗？我试图运行控制台，一切正常。请问如何通过控制台查看token的值？ stripeToken 值以上是关于Stripe 实现出现错误无法读取 null 的属性“addEventListener”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 null 的属性“提交”以进行条带支付
“未捕获的类型错误：在 angularJS/NodeJS 中使用条带支付方法 Stripe.charges.create() 时无法读取未定义的属性‘创建’”
Stripe PaymentIntent.create 导致 TypeError：无法读取未定义的属性“创建”（谷歌云函数）