Stripe :이 요소는 하위 노드가 포함 된 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> 

가를 제거하고 오류없는 콘솔을 즐길 : 주어진 코드는 카드 요소에 주석이 있습니다.