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

By bswatantra
Published: 2025-04-29
Updated: 2026-10-15
Canonical: https://laranepal.com/blog/how-to-integrate-khalti-payment-gateway-kpg-with-laravel-and-vue-3

# 💳 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](https://docs.khalti.com)  
- [Web Checkout (KPG-2)](https://docs.khalti.com/khalti-epayment/)

---

## 🧠 Step 1: Backend - Initiate Payment Request

### 1. Define Routes

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

```php
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`:

```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' => 'test@gmail.com',
            '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`:

```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:

```env
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`:

```php
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`):

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

### 2. Create `Khalti.vue` Component

```vue
<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](https://docs.khalti.com/) or explore more advanced features like subscription billing and event handling.

---

## 📎 Useful Links

- [Khalti API Docs](https://docs.khalti.com/khalti-epayment/)
- [Khalti Merchant Panel](https://khalti.com/merchant)
- [Laravel Documentation](https://laravel.com/docs)
- [Vue.js 3 Documentation](https://vuejs.org/)