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

Viewed 5937

I'm running stripe v3 and it's giving me this warning in the web console.

This Element will be mounted to a DOM element that contains child nodes.
  1. Why does it matter if the element contains "child nodes".
  2. How should this best be resovled to remove the warning and resolve the issue.

My Stripe code is currently the same code recommended in the setup of Stripe Elements.

Ref: 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);
    }
  });
});
4 Answers
  1. It is an issue because the child nodes will be replaced with the Element.

  2. Ensure that the DOM node you're mounting the Element on does not have any child nodes. E.g. in your example, ensure that the card-element div does not have any child nodes.

You mention that you are using the recommended setup code. The code given has a comment in the card-element:

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

Remove that and enjoy an error-free console.

it's too late but might help someone else.

You no need to write

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

you can replace input line with div

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