Stripe - Elements, jQuery modification issue?

Question

I am using the Stripe Elements code for a booking page on a PHP site.

I was having issues with the submit button being pressed twice and the best way I could prevent this was changing some of the code to jQuery.

Since then 5 bookings have been successful but 2 have failed due to "must provide source or customer"

I can't replicate any issues, but it's all started since fixing the submit button and using additional jQuery.

When testing originally I saw this error more because I had used

$form.appendChild(hiddenInput);

Not:

$form.append(hiddenInput);
(function ($) {
    $(function () {
        if ($('input[name="stripe_enabled"]').length > 0) {
            let public_key = $('input[name="stripe_enabled"]').data('stripe');
            var stripe = Stripe(public_key);
            var elements = stripe.elements();

            // Card element.
            var style = {
              base: {
                color: '#32325d',
                lineHeight: '18px',
                fontSmoothing: 'antialiased',
                fontSize: '22px',
                '::placeholder': {
                  color: '#aab7c4'
                }
              },
              invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
              }
            };

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


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


            var $form = $('#booking-form');

             $("#booking-form .submit-booking").one('click', function (event) {  

                   event.preventDefault();
                   console.log('button submitted');
                   event.preventDefault();
                   $('.submit-booking').prop('disabled', true).text('Please wait...');


                    stripe.createToken(card).then(function (result) {

                        if (result.error) {

                            // Inform the customer that there was an error.
                            var errorElement = document.getElementById('card-errors');
                            errorElement.textContent = result.error.message;

                            // show the button again
                            $('.submit-booking').prop('disabled', false).text('Try again');


                        } else {

                            $( "<blockquote><h2>Taking payment please wait...</h2></blockquote>" ).insertBefore( ".submit-booking" );

                            // Send the token to your server.
                            var hiddenInput = document.createElement('input');
                            hiddenInput.setAttribute('type', 'hidden');
                            hiddenInput.setAttribute('name', 'stripeToken');
                            hiddenInput.setAttribute('value', result.token.id);
                            $form.append(hiddenInput);
                            $form.submit();



                        }

                    });



             });




        }
    });

}(jQuery))

Answer 1

Final solution:

  if ($('input[name="stripe_enabled"]').length > 0) {

        let public_key = $('input[name="stripe_enabled"]').data('stripe');
        var stripe = Stripe(public_key);
        var elements = stripe.elements();

        var submitting = false;


        // Custom styling can be passed to options when creating an Element.
              var style = {
                base: {
                  color: '#32325d',
                  lineHeight: '18px',
                  fontSmoothing: 'antialiased',
                  fontSize: '22px',
                  '::placeholder': {
                    color: '#aab7c4'
                  }
                },
                invalid: {
                  color: '#fa755a',
                  iconColor: '#fa755a'
                }
              };

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

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


        card.addEventListener('change', function(event) {
          var displayError = document.getElementById('card-errors');
          if (event.error) {
            displayError.textContent = event.error.message;
          } else {
            displayError.textContent = '';
          }
        });

        // Create a token or display an error when the form is submitted.
        var form = document.getElementById('booking-form');


        form.addEventListener('submit', function(event) {

          event.preventDefault();
          if (submitting == true) {
            // do nothing already submitting
            console.log('submitting prevented as already submitting');
          } else {

            submitting = true;
            console.log('submitting...');
            stripe.createToken(card).then(function(result) {

              if (result.error) {

                // Inform the customer that there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;

                // reset submitting status
                submitting = false;

              } else {

                // Send the token to your server.
                stripeTokenHandler(result.token);

              }

            });

          }

        });


        function stripeTokenHandler(token) {
          // Insert the token ID into the form so it gets submitted to the server
          var form = document.getElementById('booking-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'stripeToken');
          hiddenInput.setAttribute('value', token.id);
          form.appendChild(hiddenInput);

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

  }