Laravel cashier stripe key error in spite of using correct key

Hi, I am working on integrating Laravel cashier in my project for a subscription. I am following Laravel docs for this. The procedure is simple, take card details -> create a subscription with 30 days trial. However, I am getting the error that local.ERROR: No such paymentmethod: pm_1GrX9JJBBrYOr00bG1B6PrUj; a similar object exists in test mode, but a live mode key was used to make this request.

I double-checked with the Stripe public test key and its all correct.

Here is my code: Front end:

<div id="card-element" class="cookcardelement"></div>
<div id="card-errors"  role="alert"></div>

<script>
var stripe = Stripe('pk_test_***********ybI4rb3Ur3RK500DRddhuXc'); /*actual chars replaced with * just for this post */
const elements = stripe.elements();
var style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#ccc"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  }
};

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

    cardElement.mount("#card-element");
    cardElement.on('change', showCardError)
async function createpayment(){
  const {paymentMethod, error} = await stripe.createPaymentMethod({
  type: 'card',
  card: cardElement,
  billing_details: {
    name: $('#fname').val(),
  },
});
if(error){
    alert(error);
}
else{
    return paymentMethod.id;
}
}

function proceed(){
 ...
createpayment().then(function(result) {
        var paymentobj = {'paymentmethod':result};
        var plan = {'plan': $('#plan').val()};
        datatosend = Object.assign(paymentobj,plan);
        sendajax(datatosend);
}
   })
        .catch(function() {
            alert('error');
        });  

</script>

Back end where ajax request is made to

public function subscribe(Request $request){
 $user = User::find(16);
        try {
            $subscription = $user->newSubscription('main', $request->plan)
            ->trialDays(10)
            ->create($request->paymentmethod);
        } catch (IncompletePayment $exception) {
            return redirect()->route(
                'cashier.payment',
                [$exception->payment->id, 'redirect' => route('/')]
            );
        }     
        
       
                    return response()->json([
                        'status_code'=>1,
                        'messages'=>'success'
                    ]);  
}

Don't know what's the reason for getting the error :(