Stripe JS 元素在 WooCommerce Checkout 中消失

Question

我正在使用条带 js 元素 https://stripe.com/docs/stripe-js，问题是该元素首先加载，然后在 woocommerce 结帐中消失

我尝试了不同的 wordpress 主题：

1. 店面
2. 莱托
3. 开店
4. 二十九

但它不起作用。

这就是我所面临的。首先它显示字段

然后在微调器结束并且页面完全加载后，“卡号”字段就不再像这样可见了

我尝试搜索，但没有在网络上找到任何有用的信息，因此我们将不胜感激。

编辑：

我进一步尝试的是检查元素是否存在于自定义 js 安装元素的位置。但它显示为空。

    (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>';
 }

谢谢！

Answer 1

我发现将用户发送到 http:// 而不是 https:// 的链接很简单

将此代码添加为额外的 HTML 块将解决此问题：

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