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

Question

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
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>
{{$plan->title}}
{{-- {{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_51H2OqqLzAo4pwMcyT4h405wpFRAn3FWhvByfvmVnW6tabrIsDoU1dBXJ0UaWexUJeacCJ9uKpb5OBmmA2KaCg4sd00ZZ5tj2q8');
// 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();
}
// });
});

Answer 1

I had this problem tonight. It turned out to be because "stripe_id" in the database was stored as a "" (blank) vs NULL.
In the stripe ManagesCustomer function, it does logic based on !is_null($this->stripe_id) to then assume that this has a stripe id if its an empty string.