如何将EventListener 添加到条带元素？答案

【问题标题】：How to addEventListener to stripe elements?如何将EventListener 添加到条带元素？
【发布时间】：2021-10-09 21:57:08
【问题描述】：

我一直在尝试将事件监听器添加到条带结帐表单（默认表单）中的关闭按钮，但它总是给我“无法读取属性 'addEventListener' of null”。这是代码：

<script>
    var pay = document.querySelector(".Header-navClose");
    var pay2 = document.querySelector(".close");
    var modal = document.querySelector(".ReactModal__Content")
    pay.addEventListener("click",()=>{
        pay.style.display="none";
        modal.style.display = "block";
    })
   
</script>

顺便说一句，我使用的是 v2 版本的条带 checkout.js

【问题讨论】：

你不能。 Stripe 元素的全部意义在于它们位于您的代码无法访问的 iframe 中。
如果可能的话，人们会发现如何刷卡号，而人们认为条纹是一种很好且安全的支付方式。

标签： javascript css node.js stripe-payments checkout

【解决方案1】：

当您在网站上嵌入第 3 方 iframe 时，该网站无法更改您网站的样式，您也无法更改他们的样式。在这种情况下，Stripe 控制 iframe 内容，而您控制嵌入它的更广泛的页面。

如需更多可定制的结帐体验，请查看 Stripe.js 和 Stripe Elements：https://stripe.com/docs/stripe-js

【讨论】：

好的，我可以在“支付”按钮下方添加一个“取消”按钮然后访问它吗？
您可以在 iframe 之外添加一个关闭/取消按钮，该按钮可以根据您的需要隐藏/删除 iframe 或将 iframe 或整个页面重定向到其他位置。如果按钮在 iframe 之外，那么 addEventListener 将对其起作用。