Я использую элементы stripe js https://stripe.com/docs/stripe-js и проблема в том, что элемент сначала загружается, а затем исчезает при оформлении заказа woocommerce

Я пробовал использовать разные темы WordPress:

1. Витрина магазина
2. Лето
3. Открыть магазин
4. Двадцать девятнадцать

Но это не работает.

Вот с чем я столкнулся. Сначала отображается поле

Затем, после завершения работы счетчика и полной загрузки страницы, поле «Номер карты» больше не отображается таким образом

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

Редактировать:

Что я попытался сделать дальше, так это проверить, существует ли элемент там, где пользовательский js монтирует элемент. Но он показывает null.

     (function ($) {
    "use strict";
    $(document).ready(function () {
        // Create a Stripe client.
        var stripe = Stripe('pk_test_51IB3etJxogSn2Fj0hqBSBcCkGH76cUowa9iWK7Xm7gj3O2jdt8FfcIXrHoZGIk4ySL1MyYYp1IxN582FOsjgI1DD00Hr7nvVF1');

// 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',
                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-number` <div>.
        card.mount('#card-number');
// Handle real-time validation errors from the card Element.
        card.on('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);
//     }
//   });
// });

// Submit the form with the token ID.
// function stripeTokenHandler(token) {
//   // Insert the token ID into the form so it gets submitted to the server
//   var form = document.getElementById('payment-form');
//   var hiddenInput = document.createElement('input');
//   hiddenInput.setAttribute('type', 'hidden');
//   hiddenInput.setAttribute('name', 'stripeToken');
//   hiddenInput.setAttribute('value', token.id);
//   form.appendChild(hiddenInput);
//
//   // Submit the form
//   form.submit();
// }
    });
})(this.jQuery);
 

Это код полей оплаты wordpress

 public function payment_fields()
    {

        if ($this->description) {

            echo wpautop(wp_kses_post($this->description));
        }

        echo '<style>
           .StripeElement {
                box-sizing: border-box;
                height: 40px;
                padding: 10px 12px;
                border: 1px solid transparent;
                border-radius: 4px;
                background-color: white;
                box-shadow: 0 1px 3px 0 #e6ebf1;
                -webkit-transition: box-shadow 150ms ease;
                transition: box-shadow 150ms ease;
            }

          .StripeElement--focus {
                box-shadow: 0 1px 3px 0 #cfd7df;
            }

          .StripeElement--invalid {
                border-color: #fa755a;
            }

          .StripeElement--webkit-autofill {
                background-color: #fefde5 !important;
            }

          .StripeElement{
                min-width: 300px;
            }
        </style>';

        echo '<div>
                <label for="card-number">
                  Credit or debit card
                </label>
                <div id="card-number">
                  <!-- A Stripe Element will be inserted here. -->
                </div>
                
            
                <!-- Used to display form errors. -->
                <div id="card-errors" role="alert"></div>
              </div>';

        echo '<div class="clear"></div>';
 }
 

Спасибо!

Я обнаружил, что это был простой вопрос отправки ссылок пользователю на http:// вместо https://

Добавление этого кода в качестве дополнительного HTML-блока исправит это:

 <script type="text/javascript">
if (location.protocol !== 'https:')
{
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}
</script>