CODEWITHSUNDEEP
javascriptstripe-payments
Evolve
Evolve

Reputation: 9219

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

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

Upvotes: 6

Views: 8095

Answers (4)

Khyati Bhojawala
Khyati Bhojawala

Reputation: 182

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>

Upvotes: 1

Aton Bridges
Aton Bridges

Reputation: 61

Your front-end code is probably nesting something inside the stripe element. This is not allowed because stripe is going to nest it's own DOM elements within #card-element. The #card-element must remain empty.

Example: You write this...

<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>

But it renders to this:

<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>

When loaded on the page, stripe adds their own div to #card-element that contains an iframe with many many lines of additional code.

Upvotes: 0

misterray
misterray

Reputation: 21

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.

Upvotes: 2

Ywain
Ywain

Reputation: 17533

  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.

Upvotes: 4

Related Questions