💳 How to Integrate Khalti Payment Gateway (KPG) with Laravel and Vue 3

A step-by-step guide to integrating the Khalti Payment Gateway (KPG) using Laravel for backend and Vue 3 for frontend applications.

✅ Prerequisites

Make sure you have the following installed and set up:

• PHP 8.3+
• Composer
• Laravel 11/12
• Vue.js 3
• Postman (for API testing)
• A modern text editor (VS Code recommended)

📚 Official Khalti Docs

• Khalti Developer Documentation
• Web Checkout (KPG-2)

🧠 Step 1: Backend - Initiate Payment Request

1. Define Routes

In routes/api.php, define the payment routes:

use App\Http\Controllers\PaymentController;
 
Route::controller(PaymentController::class)->group(function () {
    Route::post('/initiate-payment', 'initiatePayment');
    Route::get('/verify-payment', 'verifyPayment');
});

2. Implement initiatePayment Method

In app/Http/Controllers/PaymentController.php:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
 
public function initiatePayment(Request $request)
{
    $payload = [
        'return_url' => url('/api/verify-payment'),
        'website_url' => config('payment.khalti.website_url'),
        'amount' => 4000 * 100, // amount in paisa
        'purchase_order_id' => 1,
        'purchase_order_name' => 'Test Order',
        'customer_info' => [
            'name' => 'Test Customer',
            'email' => '[email protected]',
            'phone' => 9800000001
        ]
    ];
 
    $response = Http::withHeaders([
        'Authorization' => 'key ' . config('payment.khalti.secret_key'),
        'Accept' => 'application/json',
    ])->post(config('payment.khalti.base_url') . '/api/v2/epayment/initiate/', $payload)->throw();
 
    return $response->json();
}

3. Create Payment Config

In config/payment.php:

return [
    'khalti' => [
        'website_url' => env('KHALTI_WEBSITE_URL'),
        'base_url' => env('KHALTI_BASE_URL'),
        'secret_key' => env('KHALTI_SECRET_KEY'),
        'redirect' => env('FRONTEND_REDIRECT_URL'),
    ]
];

4. Set Environment Variables

In your .env file:

KHALTI_WEBSITE_URL=${APP_URL}
KHALTI_BASE_URL=https://dev.khalti.com
KHALTI_SECRET_KEY=your_test_secret_key
FRONTEND_REDIRECT_URL=http://localhost:5173

📌 Tip: Run php artisan config:cache after updating your .env.

🔁 Step 2: Backend - Payment Verification

Add this method to PaymentController:

public function verifyPayment(Request $request)
{
    $response = Http::withHeaders([
        'Authorization' => 'key ' . config('payment.khalti.secret_key'),
        'Accept' => 'application/json',
    ])->post(config('payment.khalti.base_url') . '/api/v2/epayment/lookup/', [
        'pidx' => $request->pidx
    ])->throw();
 
    if ($response->successful()) {
        return redirect(config('payment.khalti.redirect') . '/payment/success');
    }
 
    return redirect(config('payment.khalti.redirect') . '/payment/failed');
}

🖥️ Step 3: Frontend - Vue 3 Integration

1. Add Route

Inside your frontend router (e.g., src/router/index.js or routes.js):

{
    path: '/payment/khalti',
    name: 'KhaltiPayment',
    component: () => import('src/pages/payment/Khalti.vue')
}

2. Create Khalti.vue Component

<script setup>
import axios from 'axios';
 
const initiatePayment = () => {
    axios.post('http://localhost:8000/api/initiate-payment')
        .then(response => {
            const { payment_url } = response?.data?.data;
            window.location.href = payment_url; // Redirects to Khalti
        })
        .catch(error => {
            console.error(error?.response?.data?.message || 'Payment initiation failed.');
        });
};
</script>
 
<template>
  <div class="payment-page">
    <h1>Khalti Payment Integration</h1>
    <button @click="initiatePayment">Pay with Khalti</button>
  </div>
</template>
 
<style scoped>
.payment-page {
  text-align: center;
  margin-top: 50px;
}
button {
  padding: 10px 20px;
  background-color: #5C2D91;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
</style>

🧪 Testing

• Use Postman to test the /api/initiate-payment endpoint.
• Upon redirection, Khalti will call your /api/verify-payment endpoint.
• Redirect will go back to the frontend as configured.

✅ Conclusion

You’ve now successfully implemented Khalti Payment Gateway (KPG) in a Laravel + Vue 3 stack! With Khalti’s secure API and straightforward integration, you can accept payments with ease in your web apps.

Need help or stuck? Join Khalti’s Developer Community or explore more advanced features like subscription billing and event handling.

📎 Useful Links

• Khalti API Docs
• Khalti Merchant Panel
• Laravel Documentation
• Vue.js 3 Documentation