Laravel Stripe - Change Payment Method Instance has invalid ID

Issue
So I want the user to be able to change their card details, such as change to Visa card to Mastercard. im getting an issue where it cannot get $paymentMethod in the updateCard method. This doesn't make sense, can you please help me fix this issue?

This method should work because you can sign up without a problem, on a different page I made, the only diffence on this page is I removed the select subscription type.

Data entered
Card number | Expire MM/YY | CVC | postcode
5555555555554444 11 20 333 55555

Error
Could not determine which URL to request: StripePaymentMethod instance has invalid ID:

Frontend code (updateCard.blade.php)

class="panel panel-default credit-card-box">
                    <div class="panel-heading display-table">
                        <div class="row display-tr" >
                            <div class="display-td" >                            
                                <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                            </div>
                        </div>                    
                    </div>
                    <div class="panel-body">
                        <div class="col-md-12">
                            <form action={{ route('card.update') }} method="post" id="paymen-form">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div id="card-element"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button id="card-button" class="btn btn-lg btn-block btn-success btn-order" data-secret="{{ $intent->client_secret }}">Update Card!</button>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <span class="payment-errors" id="card-errors" style="color: red;margin-top:10px;"></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

<script>
    window.ParsleyConfig = {
        errorsWrapper: '<div></div>',
        errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
        errorClass: 'has-error',
        successClass: 'has-success'
    };
</script>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
    var style = {
        base: {
            color: '#32325d',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    const stripe = Stripe('{{ env("STRIPE_KEY") }}', { locale: 'en' }); // Create a Stripe client.
    const elements = stripe.elements(); // Create an instance of Elements.
    const card = elements.create('card', { style: style }); // Create an instance of the card Element.

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

    card.on('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>

Backend code (SubscriptionController.php)

 public function updateCard(Request $request)
    {
        $user = Auth::user();
        $input = $request->all();
        $token =  $request->stripeToken;
        $paymentMethod = $request->paymentMethod;

        try {
            StripeStripe::setApiKey(env('STRIPE_SECRET'));

            // error_log($input);
            // error_log($token);
            // error_log($paymentMethod);
            // dd($request);


            // $user->deletePaymentMethods();
            // $user->addPaymentMethod($paymentMethod);

            
            // $user->updateDefaultPaymentMethod($user->paymentMethods()->first()->id);
            

            $user->updateDefaultPaymentMethod($paymentMethod);

            return back()->with('success', 'Card details have been updated!');
        } catch (Exception $e) {
            return back()->with('success', $e->getMessage());
        }
    }