条纹 JS 元素在 WooCommerce Checkout 中消失 [英] Stripe JS element disappering in WooCommerce Checkout

问题描述

我正在使用带状 js 元素

然后在微调器结束并且页面完全加载后，卡号"将显示出来.字段不再像这样可见

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

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

 (function ($) {严格使用"；$(document).ready(function () {//创建一个 Stripe 客户端.var stripe = Stripe('pk_test_51IB3etJxogSn2Fj0hqBSBcCkGH76cUowa9iWK7Xm7gj3O2jdt8FfcIXrHoZGIk4ySL1MyYYp1IxN582FOsjgI1DD00Hr7nvVF1');//创建一个元素的实例.var 元素 = stripe.elements();//创建元素时可以将自定义样式传递给选项.//(请注意，此演示使用的样式集比下面的指南更广泛.)var 样式 = {根据: {颜色:'#32325d'，fontFamily: '"Helvetica Neue", Helvetica, sans-serif',fontSmoothing: '抗锯齿',字体大小:'16px'，'::占位符':{颜色:'#aab7c4'}},无效的: {颜色:'#fa755a'，iconColor: '#fa755a'}};//创建卡片元素的实例.var card = elements.create('card', {style: style});//将 card Element 的一个实例添加到 `card-number` 
 中.card.mount('#card-number');//处理来自卡片元素的实时验证错误.card.on('change', 函数(事件){var displayError = document.getElementById('card-errors');如果(事件.错误){displayError.textContent = event.error.message;} 别的 {displayError.textContent = '';}});//处理表单提交.//var form = document.getElementById('payment-form');//form.addEventListener('submit', function(event) {//event.preventDefault();////stripe.createToken(card).then(function(result) {//如果 (result.error) {////通知用户是否有错误.//var errorElement = document.getElementById('card-errors');//errorElement.textContent = result.error.message;//    } 别的 {////将令牌发送到您的服务器.//stripeTokenHandler(result.token);//}//});//});//提交带有令牌 ID 的表单.//函数 stripeTokenHandler(token) {////将令牌 ID 插入到表单中，以便将其提交给服务器//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);//////提交表单//form.submit();//}});})(this.jQuery);

这是代码 wordpress 付款字段

公共函数payment_fields(){if ($this->description) {echo wpautop(wp_kses_post($this->description));}echo '<style>.StripeElement {box-sizing: 边框框；高度:40px；填充:10px 12px；边框:1px 实心透明；边框半径:4px；背景颜色:白色；框阴影:0 1px 3px 0 #e6ebf1;-webkit-transition: box-shadow 150ms 缓解；过渡:box-shadow 150ms 缓和；}.StripeElement--焦点{框阴影:0 1px 3px 0 #cfd7df;}.StripeElement--无效{边框颜色:#fa755a；}.StripeElement--webkit-autofill {背景颜色:#fefde5 ！重要；}.条纹元素{最小宽度:300px；}</style>';echo '
<label for="card-number">信用卡或借记卡<div id=卡号"><!-- 将在此处插入条纹元素.-->
<!-- 用于显示表单错误.--><div id="card-errors";角色=警报"></div>

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

谢谢！

解决方案

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

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

I am using strip js elements https://stripe.com/docs/stripe-js and the problem is that the element gets load first and then disappears in woocommerce checkout

I tried with different wordpress themes:

1. StoreFront
2. Leto
3. Open Shop
4. Twenty-Nineteen

But it doesnt work.

Here is what i am facing. First it shows the field

Then after the spinner ends and the page completely loads, the "Card Number" field is no more visible like this

I tried to search but didn't find anything useful on the web, So any insights would be appreciated.

Edit:

What i tried further is to check if the element exists where custom js is mounting the element. But it shows 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);

This is the code wordpress payment fields

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

Thanks!

解决方案

I found that it was a simple matter of links sending the user to http:// instead of https://

Add this code as an extra HTML block will fix that:

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

这篇关于条纹 JS 元素在 WooCommerce Checkout 中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！