Stripe：此元素将被挂载到包含子节点的 DOM 元素答案

【问题标题】：Stripe: This Element will be mounted to a DOM element that contains child nodesStripe：此元素将被挂载到包含子节点的 DOM 元素
【发布时间】：2018-05-07 09:20:47
【问题描述】：

我正在运行 stripe v3，它在 web 控制台中给了我这个警告。

This Element will be mounted to a DOM element that contains child nodes.

元素是否包含“子节点”有什么关系。
如何最好地解决此问题以消除警告并解决问题。

我的 Stripe 代码目前与设置 Stripe Elements 中推荐的代码相同。

参考：https://stripe.com/docs/stripe-js/elements/quickstart

// Create a Stripe client
var stripe = Stripe('pk_test_bJA9VLD3BN4LYxPWPfJ5vcjk');

// 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: '18px',
    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);
    }
  });
});

【问题讨论】：

标签： javascript stripe-payments

【解决方案1】：

这是一个问题，因为子节点将被元素替换。
确保您安装元素的 DOM 节点没有任何子节点。例如。在您的示例中，确保 card-element div 没有任何子节点。

【讨论】：

【解决方案2】：

您提到您正在使用推荐的设置代码。给出的代码在卡片元素中有注释：

<div id="card-element">
  <!-- a Stripe Element will be inserted here. -->
</div>

删除它并享受无错误的控制台。

【讨论】：

鉴于 Stripe 文档的 iframe 中没有出现错误，我认为评论不是问题。
有趣的收获。在我当前的项目中，删除评论消除了错误。我无法确认原因，只是确实如此。希望它适用于其他痴迷的程序员。而且，感谢您的编辑，我应该添加代码以进行澄清。

【解决方案3】：

为时已晚，但可能会帮助其他人。

你不用写

<input type="text" id="card_number">

你可以用div替换输入行

 <div id="card_number" class="form-control"></div>

【讨论】：

【解决方案4】：

您的前端代码可能在条带元素内嵌套了一些东西。这是不允许的，因为 stripe 会将它自己的 DOM 元素嵌套在 #card-element 中。 #card-element 必须保持为空。

示例：你写这个……

<div class="form-row">
  <div class="col-md-6">
    <label for="card-element">Elements</label>
    <div id="card-element" class="form-control"></div>
  </div>
</div>

但它呈现为：

<div class="form-row">
  <div class="col-md-6">
    <label for="card-element">Elements</label>
    <div id="card-element" class="form-control">
      <div class="__PrivateStripeElement"></div>
    </div>
  </div>
</div>

当加载到页面上时，stripe 会将自己的 div 添加到 #card-element，其中包含一个 iframe 以及许多多行附加代码。

【讨论】：