条纹输入字段不会显示答案

【问题标题】：Stripe input field won't display条纹输入字段不会显示
【发布时间】：2020-07-06 21:31:28
【问题描述】：

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

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

我确定问题发生是因为我在控制台中收到此错误：

未捕获的语法错误：输入意外结束
......客人结帐：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();
   }
})();

这里发生了什么？

谢谢

【问题讨论】：

您能否分享您的 HTML 表单的相关 sn-p 以展示您如何设置 #card-element？
通常这个错误Uncaught SyntaxError: Unexpected end of input 表明函数末尾缺少} 或})，但我看不到它在哪里丢失。此代码是否与您未显示的其他 javascript 一起存在？

标签： javascript laravel stripe-payments e-commerce

【解决方案1】：

我认为问题在于您的带有嵌入式脚本的 HTML 被不正确地缩小，特别是问题是 cmets 没有被删除。

我最终会收到一条中间有这个的单行：

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

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

【讨论】：