Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Randy_Johnson's avatar

Stripe Form not returning to Controller

Hi, I am attempting to set up a stripe payment system, I have it where I am receiving a 200 OK from the token, my only problem now is that the page is not returning to the controller.

Please help.

<form id="payment-form" action="/user/payment/stripe" method="POST">
            <div id="card-element">
               <!-- Elements will create input elements here -->
            </div>
            <!-- We'll put the error messages in this element -->
            <div id="card-errors" role="alert"></div>
            <button id="submit" type="submit" class="btn btn-primary btn-lg btn-block mt-3">Pay</button>
         </form>
<script>
   // Create a Stripe client.
   var stripe = Stripe('xxxx xxxx xxxx xxxx xxxx);
   
   // Create an instance of Elements.
   var elements = stripe.elements();
   
   // Custom styling can be passed to options when creating an Element.
   // (Note that this demo uses a wider set of styles than the guide below.)
   var style = {
   base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::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-element');
   
   // Handle 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;
   } else {
      displayError.textContent = '';
   }
   });
   
   // Handle form submission.
   var form = document.getElementById('payment-form');
   form.addEventListener('submit', function(event) {
   event.preventDefault();
   
   stripe.createToken(card).then(function(result) {
      if (result.error) {
         // Inform the user if there was an error.
         var errorElement = document.getElementById('card-errors');
         errorElement.textContent = result.error.message;
      } else {
         // Send the token to your server.
         stripeTokenHandler(result.token);
      }
   });
   });
   
   // Submit the form with the token ID.
   function stripeTokenHandler(token) {
      // Insert 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);
   
      // Submit the form
      form.submit();
   }
</script>
0 likes
1 reply
Randy_Johnson's avatar
Randy_Johnson
OP
Best Answer
Level 8

I have managed to do what I needed, the form was missing an @csrf tag.

Please or to participate in this conversation.