POST /api/mpesa/callbackurl 502 Bad Gateway in ngrok in mpesa integration

I am integrating Mpesa into my Laravel app. I have simulated a transaction where a user can make a payment successfully. After the payment I want the payment details to be stored in the database, through the callback URL. I have made an API route that calls the function which encodes and saves the data in the DB. I am using ngrok to tunnel my localhost to the callback URL. Whenever I execute the function in postman and successfully make the payment, I get an error on ngrok "POST /api/mpesa/callbackurl 502 Bad Gateway". I have researched and found it a server error but I have channeled the localhost well in ngrok..how can I fix this.

here is my stkpush function

public function stkpush(Request $request)
{
    $url='https://sandbox.safaricom.co.ke/mpesa/stkpush/v1/processrequest';

    $curl_post_data=[
        'BusinessShortCode'=>174379,
        'Password'=>$this->lipanampesapassword(),
        'Timestamp'=>Carbon::rawParse('now')->format('YmdHms'),

        'TransactionType'=> "CustomerPayBillOnline",
        'Amount'=>1,
        'PartyA'=>254712345678,
        'PartyB'=>174379,
        'PhoneNumber'=>254712345678,
        'CallBackURL'=>'https://89af-196-202-210-53.eu.ngrok.io/api/mpesa/callbackurl',
        'AccountReference'=>'Waweru Enterprises',
        'TransactionDesc'=>'Paying for Products Bought'
    ];

    $data_string=json_encode($curl_post_data);

    $curl=curl_init();
    curl_setopt($curl,CURLOPT_URL,$url);
    curl_setopt($curl,CURLOPT_HTTPHEADER,array('Content-Type:application/json','Authorization:Bearer '.$this->newaccesstoken()));
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
    curl_setopt($curl,CURLOPT_POST,true);
    curl_setopt($curl,CURLOPT_POSTFIELDS,$data_string);

    $curl_response=curl_exec($curl);
    return $curl_response;
}

the callback url route in the api.php

Route::post('/mpesa/callbackurl', [MpesatransactionController::class,'mpesaresponse'])->name('mpesaresponse');

the mpesa response function

public function mpesaresponse(Request $request)
{
    $response=$request->getContent();

    $transaction=new mpesatransaction;
    $transaction->response=json_encode($response);
    $transaction->save();

}

the ngrok panel

You entered the wrong address on the ngrok terminal. You entered ngrok http 127.0.0.1:8000:80 as from the image uploaded.

The correct syntax should be ngrok http 127.0.0.1:8000 without the :80 port.