Поле ввода полосы не будет отображаться - PullRequest
Новая
       10

Поле ввода полосы не будет отображаться

0 голосов
/ 26 марта 2020

У меня есть приложение Laravel, в котором есть форма оформления заказа с интегрированной Stripe. По какой-то причине данные кредитной карты больше не отображаются на странице. Смотрите здесь: https://videogamestore.best/guest-checkout.

Это было раньше, а теперь нет. Я не уверен, что я изменил. Publi c и секретный ключ все еще действительны, и я отредактировал CSS, чтобы ввод отображался более жирным цветом (на тот случай, если стилизация влияла на видимость ввода).

Я уверен, что проблема возникает, потому что я получаю эту ошибку в консоли:

Uncaught SyntaxError: Неожиданный конец ввода
...... guest-checkout : 4

Итак, я, вероятно, потерял тег ввода, но не могу найти его в коде Stripe: 

(function() {
   // creates a Stripe client
   var stripe = Stripe("{{ config('services.stripe.public') }}");

   // creates an instance of Elements
   var elements = stripe.elements();

   var style = {
      base: {
         color: '#32325d',
         fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
         fontSmoothing: 'antialiased',
         fontSize: '16px',
         '::placeholder': {
            color: '#aab7c4'
         }
      },
      invalid: {
         color: 'red',
         iconColor: 'red'
      }
   };

   // creates an instance of the card Element
   var card = elements.create('card', {
      style: style,
      hidePostalCode: true
   });

   // Add an instance of the card Element into the `card-element` <div>.
   card.mount('#card-element');

   // handles real-time validation errors from the card Element
   card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
         displayError.textContent = event.error.message;
      }
   });

   // handles form submission.
   var form = document.getElementById('payment-form');
   form.addEventListener('submit', function(event) {
      event.preventDefault();

      // disables the submit button to prevent repeated clicks
      document.getElementById('submit-payment').disabled = true;

      stripe.createToken(card).then(function(result) {
         if (result.error) {
            // informs the user if there was an error
            // enables the submit button if validation fails
            document.getElementById('submit-payment').disabled = false;
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
         } else {
            // sends the token to the server
            stripeTokenHandler(result.token);
         }
      });
   });

   // submits the form with the token ID
   function stripeTokenHandler(token) {
      // inserts 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);

      // submits the form
      form.submit();
   }
})();

Что здесь происходит?

Спасибо

1 Ответ

2 голосов
/ 26 марта 2020

Я полагаю, что проблема в том, что ваш HTML со встроенным скриптом неправильно сокращен, в частности, проблема в том, что комментарии не удаляются.

В итоге я получаю одну строку с этим в в середине: 

<script> (function() { // creates ...

, а разметка комментария // нарушает остальную часть JS. Вы должны убедиться, что ваш код правильно минимизирован, или переместить скрипт на внешний ресурс, который пропускает минимизацию.

...