Stripe Input Field Won't Display

I have a Laravel app that has a checkout form with Stripe integrated. For some reason, the credit card input will no longer render on the page. See here: https://videogamestore.best/guest-checkout.

It was there before and now it's not. I'm not sure what I've changed. The public and secret key are still valid and I've edited the CSS for the input to display in bolder colours (just in case the styling was affecting the visibility of the input).

I'm sure the problem occurs because I get this error in the console:

Uncaught SyntaxError: Unexpected end of input
...... guest-checkout:4

So, I've probably misplaced an input tag but I can't find it in the Stripe code:

(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();
   }
})();

What's going on here?

Thanks

I believe the problem is that your HTML with embedded script is being improperly minified, specifically the issue is that the comments are not being removed.

I end up receiving a single line with this in the middle:

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

and that // comment markup is breaking the rest of the JS. You need to ensure your code is properly minified, or move the script to an external resource which skips minification.