javascript - Stripe: This Element will be mounted to a DOM element that contains child nodes - Stack Overflow

admin管理员组

文章数量:1287512

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 remended in the setup of Stripe Elements.

Ref:

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

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 remended in the setup of Stripe Elements.

Ref: https://stripe./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

Share Improve this question Follow asked Nov 23, 2017 at 11:55 EvolveEvolve 9,2191212 gold badges5555 silver badges6767 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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 remended setup code. The code given has a ment 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>

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.

本文标签： javascriptStripe This Element will be mounted to a DOM element that contains child nodesStack Overflow