Unrecognized request URL (GET: /v1/customers/). If you are trying to list objects, remove the trailing slash

Please if anyone has any idea why I keep getting this error when I submitted the stripe subscription form should please help, this error got me stuck for a while now, just trying to create a subscription from the pricing page or subscription plan page, I have the plans stored in my database in a model called Plan. so what I want is for users to select a pricing plan monthly or yearly and it will take them to the payment page where they can make payment and activate a subscription. I am using Laravel Cashier with stripe.

Full error message Unrecognized request URL (GET: /v1/customers/). If you are trying to list objects, remove the trailing slash. If you are trying to retrieve an object, make sure you passed a valid (non-empty) identifier in your code. Please see https://stripe.com/docs or we can help at https://support.stripe.com/.

The Plans Model 

     public function up()
      {
    Schema::create('plans', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->string('identifier')->unique;
        $table->string('stripe_id')->unique;
        $table->timestamps();
    });
   }

The Route

Route::group(['namespace' => 'Subscriptions'], function() {
Route::get('plans', 'SubscriptionPlanController@index')->name('plans');
Route::get('/payments', 'PaymentsController@index')->name('payments');
Route::post('/payments', 'PaymentsController@store')->name('payments.store');
});

The Plans page

<div class="container">
   <div class="row justify-content-center">
   <div class="col-md-8">
       <div class="card">
        <div class="card-header">{{ __('Subscription Plans') }}</div>

        <div class="card-body">
            @foreach($plans as $plan)
                <div>
                    <a href="{{ route('payments', ['plan' => $plan->identifier]) }}">{{$plan->title}}</a>
                    {{-- {{dd($plan->stripe_id)}} --}}
                </div>
            @endforeach
            </div>
         </div>
      </div>
    </div>
  </div>
This is The Form

<form action="{{ route('payments.store')}}" method="POST" id="payment-form">
@csrf
 <div class="form-content">


<input type="hidden" name="plan" id="subscription-plan" value="{{ request('plan') }}">

<div class="field">
  <input type="text" autocorrect="off" spellcheck="false" id="card-holder-name" maxlength="25" />
  <span class="focus-bar"></span>
  <label for="cardholder">Card holder (Name on card)</label>
</div>
    
    <div  class="field mb-5" id="card-element">
    <!-- Stripe Elements Placeholder -->
    </div>

   <button id="card-button" type="submit" data-secret="{{ $intent->client_secret }}"> 
   <span>Pay</span></button></div>
    </form>



 This is the PaymentsController

    public function index()
  {


   $user = auth()->user();

     $data = [
    'intent' => $user->createSetupIntent(),

  ];

return view('subscriptions.payments')->with($data);
 }

     public function store(Request $request)
 {


$user = auth()->user();

$paymentMethod = $request->payment_method;

$plan = Plans::where('identifier', $request->plan)
    ->orWhere('identifier', 'basic_product')
    ->first();

$request->user()->newSubscription('default', $plan->stripe_id)->create($paymentMethod);


return response(['status' => 'success']);
 }

This is the JavaScript

     / / Create a Stripe client.
           const stripe = Stripe('pk_test_51H2OqqLzAo4pwMcyT4h405wpFRAn3FWhvByfvmVnW6tabrIsDoU1dBXJ0UaWexUJeacCJ9uKpb 
      5OBmmA2KaCg4sd00ZZ5tj2q8');

        // Create an instance of Elements.
         const 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.)
     
         // const cardElement = elements.create('card', {style: style});
     
    

          / / Create an instance of the card Element.
          const cardElement = elements.create('card');

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

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

           const plan = document.getElementById('subscription-plan').value;


         // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', async (e) => {
         e.preventDefault();
       
          cardButton.disabled = true
           const { setupIntent, error } = await stripe.confirmCardSetup(
            cardButton.dataset.secret, {
                payment_method: {
                    card: cardElement,
                    billing_details: {
                        name: cardHolderName.value
                    }
                 }
              }
         
             );
           
                if (error) {
                // Display "error.message" to the user...
                } else {
              
            
               var paymentMethod  = setupIntent.payment_method;

        

                var form = document.getElementById('payment-form');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'payment_method');
                hiddenInput.setAttribute('value', paymentMethod);
                form.appendChild(hiddenInput);

                // Submit the form
                form.submit();

  
                 }