Laravel stripe payment form isn't handled just posted

I'm using the default card element from Stripe which can be found hereenter link description here. The form renders and the validation stripe includes works & renders. However, I never get a stripeToken generated so the subscription fails due to;

This customer has no attached payment source

When I die dump my requests the stripeToken is NULL. I think this is because the stripe form handler doesn't work at all for me, the event listener they include doesn't ever fire.

Looks like the form is just posting like a normal form instead of the prevent default JS listener added by stripe.

<form action="" method="post" id="payment-form">
  @csrf
  <input type="hidden" name="plan" value="">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

The Javascript included from the elements example;

<script>

// Create a Stripe client.
var stripe = Stripe('###Removed###');

// 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>

This is my controller, as I mentioned the $request->stripeToken doesn't exist I don't think it ever gets added to the form.

public function create(Request $request)
{

    $plan = Plan::findOrFail($request->get('plan'));

    $user = $request->user();

    $request->user()
        ->newSubscription($plan->name, $plan->stripe_plan)
        ->create($request->stripeToken,[
            'email' => $user->email
        ]);

    return redirect()->route('home')->with('success', 'Your plan subscribed successfully');
}

via Chebli Mohamed