Resource missing error when adding payment method for subscription

Im using laravel cashier for stripe, im creating a subscription with no card up front and 15 days trial when user registration, im following laravel cashier tutorial to add payment method for user so card can be charged when trial is over but i keep getting error

below is my controller

class BillingController extends Controller {

public function getBilling()
{
    return view('dashboard.billing', [
        'intent' => Auth::user()->createSetupIntent()
    ]);
}

}

this is my view

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-3">
            @include('dashboard.partial.menu')
        </div>
        <div class="col-9">
            <div class="card">
                <div class="card-header">
                    Update Card Info
                </div>
                <div class="card-body">
                    @if(Auth::user()->subscribed() && Auth::user()->subscription('monthly')->onTrial())
                        <h6 class="card-title">Trial ends at: <span class="badge badge-primary">{{$diff = Carbon\Carbon::parse(Auth::user()->subscription('monthly')->trial_ends_at)->diffForHumans()}}</span></h6>
                    @endif
                       <h5>Subscription Details</h5>
                       <p>Monthly Membership - .99 <small>(Renews every month)</small></p>

                        @if (Auth::user()->hasPaymentMethod())
                            <h6>Card on file</h6>
                            <p>{{Auth::user()->card_brand}}: ending in <span class="badge badge-primary">{{Auth::user()->card_last_four}}</span></p>
                        @endif

                        <div class="form-group">
                            <input class="form-control" id="card-holder-name" type="text" placeholder="Cardholder name">
                        </div>
                        <!-- Stripe Elements Placeholder -->
                        <div id="card-element" class="form-control" style='margin-bottom: 1.5em;height: 2.4em; padding-top: .7em;'></div>

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

@endsection @push('scripts')

window.addEventListener('load',function() { const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxx');

    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;

    cardButton.addEventListener('click', async (e) => {
        const { setupIntent, error } = await stripe.handleCardSetup(
        clientSecret, cardElement, {
            payment_method_data: {
                billing_details: { name: cardHolderName.value }
            }
        }
    );

    if (error) {
        console.log(error);
    } else {
        stripePaymentHandler(setupIntent);
    }
});

});

@endpush

and i get this error

Object { type: "invalid_request_error", code: "resource_missing", doc_url: "https://stripe.com/docs/error-codes/resource-missing", message: "No such setupintent: seti_1FjTcII7sKb0v4gBuFe9ZZ5f", param: "intent" }