Элементы Stipe: этот элемент будет подключен к элементу DOM, который содержит дочерние узлы

Question

У меня есть всплывающее окно, которое позволяет нам принимать платежи через Stripe Elements.Все отлично загружается в первый раз, когда я хочу сделать платеж.Но если я нажму кнопку оплаты и получу ответ об ошибке Stripe, то есть

We are experiencing issues connecting to our payments provider. You have not been charged. Please check your internet connection and try again.

Если я тогда закрою всплывающее окно и попытаюсь снова вызвать форму, я получу это предупреждение в своей консоли:

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

Я не уверен, как убрать это предупреждение.Я не смог найти там ничего, что решило бы мою проблему.Я пытался размонтировать карту, когда закрываю модальное устройство, но оно, похоже, ничего не делает:

this.stripeCard.unmount();

Вот мой код для component.ts:

   setTimeout(() => {
        const elements = ctrl.paymentService.stripe.elements({
            locale: "auto"
        });

        /**Card Element*/
        ctrl.stripeCard = elements.create("card", {
            // setting styles here
        })

        ctrl.stripeCard.mount('#credit-card-form');

        let errorElement = document.getElementById('card-errors');
        errorElement.textContent = "";

        // show any error messagaes associated with the card element
        ctrl.stripeCard.addEventListener('change', function (event: any) {
            let displayError = document.getElementById('card-errors');
            if (event.error) {
                ctrl.cardValid = false;
                ctrl.cd.detectChanges();
                displayError.textContent = event.error.message;
            } else {
                ctrl.cardValid = true;
                ctrl.cd.detectChanges();
                displayError.textContent = "";
            }
        });

        // Create a token or display an error when the form is submitted.
        let form = document.getElementById('payment-form');
        (<any>form).addEventListener('submit', function (event: any) {
            event.preventDefault();
            ctrl.paymentService.stripe.createToken(ctrl.stripeCard).then(function (result: any) {
                if (result.error) {
                    ctrl.submittingCharge = false;
                    ctrl.chargeCompleted = false;
                    ctrl.cd.detectChanges();
                    // Inform the customer that there was an error.
                    let errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server.
                    stripeTokenHandler(result.token);

                    console.log(ctrl.customer);
                    ctrl.submittingCharge = false;
                    ctrl.chargeCompleted = true;
                    ctrl.cd.detectChanges();
                }
            });
        });
    }, 0);

Вотмой HTML-код:

<form id="payment-form" method="post" action="#" class="form">
       // other name, email, address input elements here
        <fieldset>
           <div class="row">
              <div id="credit-card-form"></div>
           </div>
        </fieldset>
        <button *ngIf="!submittingCharge" [disabled]="!purchaseValidation.valid || !cardValid" type="submit" class="btn btn-primary btn-block mt-2 py-3 cursor-pointer">Charge
                                {{payment | currency: 'USD' : 'symbol'}}</button>
</form>

Любая помощь приветствуется!Спасибо