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

lara28580's avatar

Stripe submit Form through js

Hey I want to integrate Stripe subscription in to my app. I set everything like in the laravel docs but I get problems to submit the form via js. No errors thrown but I dont get the attributes in my $request variable.

I extended my js a little bit to add the stripe paymentMethod but it doesn't get submitted. So I am not able to access the paymentMethod attribute in controller to create a new subscription.

My js

  <script src="https://js.stripe.com/v3/"></script>

  <script>
    const key = '{{ env('STRIPE_KEY') }}';
    const stripe = Stripe(key);
    const elements = stripe.elements();
    const cardElement = elements.create('card');

    cardElement.mount('#card-element');

    const cardHolderName = document.getElementById('card-holder-name');
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;

var form = document.getElementById('subscription-form');
  form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const { setupIntent, error } = await stripe.handleCardSetup(
          clientSecret, cardElement, {
              payment_method_data: {
                  billing_details: { name: cardHolderName.value }
              }
          }
      );
      if (error) {
          // Display "error.message" to the user...
          console.log('test');
          console.log(error);
      } else {
          // The card has been verified successfully...
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'payment_method');
          hiddenInput.setAttribute('value', setupIntent.payment_method);
          form.appendChild(hiddenInput);
          // Submit the form
          form.submit();
      }
</script>

and my Form

<form id="subscription-form" action="{{ url('settings/subscription') }}" method="post" >
        @csrf
        <select name="plan">
          <option value="small">Small 9.90EUR</option>
        </select>
        <input id="card-holder-name" type="text">

        <!-- Stripe Elements Placeholder -->
        <div id="card-element"></div>

        <button id="card-button" data-secret="{{ $intent->client_secret }}">
            Update Payment Method
        </button>
      </form>

Maybe someone knows what to do.

best

0 likes
2 replies
lara28580's avatar

What I found out for now is that something is wrong with this code:

var form = document.getElementById('subscription-form');
  form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const { setupIntent, error } = await stripe.handleCardSetup(
          clientSecret, cardElement, {
              payment_method_data: {
                  billing_details: { name: cardHolderName.value }
              }
          }
      );
      if (error) {
          // Display "error.message" to the user...
          console.log('test');
          console.log(error);
      } else {
          // The card has been verified successfully...
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type', 'hidden');
          hiddenInput.setAttribute('name', 'payment_method');
          hiddenInput.setAttribute('value', setupIntent.payment_method);
          form.appendChild(hiddenInput);
          // Submit the form
          form.submit();
      }

The big problem is the hidden input gets not added through js to the form. When I add the hidden input manually everything works fine. The code is from the docs so it normally should work. Maybe someone could please help.

best

lara28580's avatar

It seems like I dont get any response from stripe, because the setupIntent variable is not set....someone has encountered a similar problem? Really don't know what to do anymore....

Please or to participate in this conversation.