Cashier Error: Stripe\PaymentMethod instance has invalid ID:

I'm trying to use Laravel Cashier, but getting 'Stripe\Exception\UnexpectedValueException Could not determine which URL to request: Stripe\PaymentMethod instance has invalid ID:' when I try to submit my the form using Stripe.js. I am using Laravel 6.0 and Cashier 10.3. I have created a setupIntent and passed it to the view as required for SCA regulations. But I keep getting the error same error. Can anyone help? Please!

This is my blade file including the JavaScript code.

@extends('layouts.app')

@section('content')
    <div class="bg-gray-100 min-h-screen">
        <div class="wrapper pt-16">
            <h1 class="text-center text-2xl font-semibold text-gray-700 pb-16">Please enter your payment details</h1>

            <form method="POST" action="/charge" id="payment-form">
                {{ csrf_field() }}
                <div class="md:w-1/2 mx-auto">
                    <div class="">
                        <label class="block text-gray-800 text-left text-sm font-bold mb-2" for="card-holder-name">Card holder name</label>
                        <input id="card-holder-name" class="w-full bg-gray-100 border-2 rounded py-2 px-3 mb-8" placeholder="Card holder name" name="name" type="text">
                    </div>
                </div>
                
                <!-- Stripe Elements Placeholder -->
                <div class="md:w-1/2 mx-auto">
                    <label class="block text-gray-800 text-sm font-bold mb-2" for="card-holder-name">Card details</label>
                    <div id="card-element" class="mx-auto border-2 rounded py-3 px-3 mb-8"></div>
                </div>
                
                <div class="md:w-1/2 mx-auto">
                    <button id="card-button" type="submit" class="block bg-dark-green hover:bg-brand-green text-gray-100 w-auto px-8 py-2 ml-auto rounded-full" data-secret="{{ $intent->client_secret }}">
                        Update Payment Method
                    </button>
                </div>
            </form>

            <p class="text-gray-500 font-semibold mt-8 text-center">Don't worry, we won't charge your card yet. We only charge you once you select a repository.</p>
        </div>
    </div>
@endsection

@section('scripts')
<script>
const stripe = Stripe('pk_test_sGr2r0esxZavOedIDt2Q1C6T00cS9XYqAr');

const elements = stripe.elements();
const cardElement = elements.create('card', { hidePostalCode: true });

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('payment-form');

form.addEventListener('submit', function(event) {
    
    stripe.handleCardSetup(clientSecret, cardElement, {
        payment_method_data: {
            billing_details: { 
                name: cardHolderName.value 
            }
        }
    }).then(function(result) {
        console.log(result);
        if (result.error) {
            console.log('error');
        } else {
            console.log(result);
            submitStripePayment(result.setupIntent.payment_method);
        }
    });

    event.preventDefault();
    
})
// cardButton.addEventListener('click', async e => {
    
// });

// var form = document.getElementById('payment-form');
// form.addEventListener('submit', function(event) {
//     event.preventDefault();
// });

function submitStripePayment(paymentMethod) {
    var paymentForm = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');

    //var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'text');
    hiddenInput.setAttribute('name', 'paymentMethod');
    hiddenInput.setAttribute('value', paymentMethod);
    paymentForm.appendChild(hiddenInput);

    paymentForm.submit();
}

</script> 
@endsection

And this is my controller file method:

public function storePayment(Request $request)
    {
        $this->middleware('auth');
        $user = User::find(1);

        $paymentMethod = $request->input('paymentMethod');

        $user->createOrGetStripeCustomer();
        $user->addPaymentMethod($paymentMethod);
        return redirect('/home');
}