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

Question

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

Answer 1

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.

Answer 2

Try changing the your callback URL in your function to read as follows:

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

    $curl_post_data=[
        ...
        'CallBackURL'=>'https://89af-196-202-210-53.eu.ngrok.io/api/mpesaresponse',
        ...
    ]
}

Answer 3

if these tunnelling urls prove hard to work with, you can use a public requestbin here which works well with Safaricom's sandbox environment.

Answer 4

To tunnel all request to ngrok you have to specify the following. Rewrite all requests to your domain

ngrok http {localhost}:{port} --host-header=rewrite {localhost}:{port}

This will make sure all requests are re-written to your local domain