Stripe：此元素將掛載到包含子節點的 DOM 元素

Question

我正在運行 stripe v3，它在 Web 控制台中給了我這個警告。

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

1. 為什么元素包含“子節點”很重要。
2. 如何最好地解決此問題以消除警告並解決問題。

我的 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);
    }
  });
});

Answer 1

1. 這是一個問題，因為子節點將被替換為元素。

2. 確保您安裝 Element 的 DOM 節點沒有任何子節點。 例如，在您的示例中，確保card-element div 沒有任何子節點。

Answer 2

您提到您正在使用推薦的設置代碼。 給出的代碼在 card-element 中有一個注釋：

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

刪除它並享受無錯誤的控制台。

Answer 3

為時已晚，但可能會幫助其他人。

你不需要寫

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

您可以用 div 替換輸入行

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

Answer 4

您的前端代碼可能在 stripe 元素內嵌套了一些東西。 這是不允許的，因為 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 ，該#card-element包含一個帶有許多行附加代碼的iframe 。