javascript - Stripe 输入字段不会显示

Question

我有一个 Laravel 应用程序，它有一个集成了 Stripe 的结账表单。由于某种原因，信用卡输入将不再呈现在页面上。参见这里:https://videogamestore.best/guest-checkout .

以前有，现在没有了。我不确定我改变了什么。公钥和 key 仍然有效，并且我已经编辑了输入的 CSS，以更粗的颜色显示(以防样式影响输入的可见性)。

我确信会出现问题，因为我在控制台中收到此错误:

Uncaught SyntaxError: Unexpected end of input
...... 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();
   }
})();

这是怎么回事？

谢谢

Answer 1

我认为问题在于您的嵌入脚本的 HTML 被不正确地缩小，具体问题是注释没有被删除。

我最终收到了一行，中间是这样的:

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

并且 // 注释标记破坏了 JS 的其余部分。您需要确保代码被正确缩小，或者将脚本移动到跳过缩小的外部资源。