Поля формы с полосами, которые не отображаются при первой загрузке - PullRequest
Новая
       30

Поля формы с полосами, которые не отображаются при первой загрузке

0 голосов
/ 13 марта 2019

Я реализовал форму с элементами Stripe в javascript.

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

CB fields dont appear on first load

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

Вот как я называю мои файлы JS: первый API Stripe JS в заголовке: 

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8"/>
    <title> Set Order - Booda </title>
    <link rel = "stylesheet" href = "css/home.css" media = "screen"/>
    <script src = "https://js.stripe.com/v3/"> </script>
</head>
<body>

А внизу страницы мои JS-файлы: 

<script src="js/jquery.js"></script>
<script src="js/order.js"></script>

Вот содержимое файла order.js, который содержит код вызова для отображения формы Stripe. 

function onStripeReady()
{
    var stripe = Stripe('pk_test_rW6PoHny4jfGXix3FUTKDxJw');
    var elements = stripe.elements();
    var style = {
    base: {
        iconColor: '#666ee8',
        color: '#31325f',
        fontWeight: 400,
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4',
        },
        ':-webkit-autofill': {
          color: '#666ee8',
        },
      },
    };

    var cardNumberElement = elements.create('cardNumber', { style: style });
    var cardExpiryElement = elements.create('cardExpiry', { style: style });
    var cardCvcElement = elements.create('cardCvc', { style: style });

    cardNumberElement.mount('#card-number-element');
    cardExpiryElement.mount('#card-expiry-element');
    cardCvcElement.mount('#card-cvc-element');

    //  on submit
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      $(".ld").css("display","table");
          // address_zip: document.getElementById('email').value,
      var options = {
        name: document.getElementById('email').value,
      };
      var token = stripe.createToken(cardNumberElement, options).then(function(result) {
        if(result.error){
            $(".ld").fadeOut(500);
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          stripeTokenHandler(result.token);
        }});
    });
}

//  send token
function stripeTokenHandler(token) {
  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();
  $(".pay-btn").attr("disabled",true);
}

onStripeReady();

Это довольно проблематично, поскольку вынуждает покупателя вручную перезагружать страницу (F5), и большинство из них оставят ее, даже не пытаясь что-либо предпринять.

когда я проверяю запросы с консоли, я вижу, что запрос чередования не выполняется таким образом:

stripe mistake request stripe mistake request2

и когда, с другой стороны, загрузка работает (после выполнения F5 один или два раза), тогда он показывает много запросов (я не знаю, нормально ли, что их так много?)

stripe success form

Есть ли хорошая практика, которую я не уважаю и которая вызывает эту обеспокоенность?

...