ストライプ：この要素は、子ノードを含むDOM要素にマウントされます

Question

私はストライプv3を実行しており、ウェブコンソールでこの警告が表示されます。

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

1. 要素は、「子ノード」が含まれている場合、なぜそれが重要ではありません。
2. 警告を削除して問題を解決するには、この方法を最善の方法で再現する必要があります。

現在、ストライプコードは、ストライプエレメントの設定で推奨されているのと同じコードです。

参考：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. 要素をマウントしているDOMノードに子ノードがないことを確認してください。 など。あなたの例では、card-element divに子ノードがないことを確認してください。

Answer 2

あなたが推奨するセットアップコードを使用していると言います。与えられたコードには、カード要素にコメントがあります。

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

これを削除して、エラーのないコンソールをお楽しみください。