Adding Khalti Payments to Your React App: A Developer's Guide
SS
Sandip Sapkota
October 28, 2024 (4w ago)
•
27 min read
Khalti
React
TypeScript
Payment Gateway
E-commerce
Nepal
A step-by-step guide to integrating Khalti payments into your React application.
Hey fellow developers! 👋 I recently tackled integrating Khalti payments into a React app, and I wanted to share my experience with you all. If you're building an e-commerce site in Nepal, you'll probably need to add Khalti as a payment option. Don't worry - it's not as complicated as it might seem!
Let's Get Started with Khalti
First things first - you'll need a merchant account. Head over to Khalti's test admin panel and sign up. This gives you access to their sandbox environment where you can test payments without using real money (your wallet will thank you!). After signing up, you'll get your public and secret keys - keep these handy!
Setting Up Our Project
Let's start by installing our friend Axios - we'll need it for API calls:
Now, we need to set up our Khalti config. Create a new file called khaltiConfig.ts in your src/config folder:
Pretty straightforward, right? We're just setting up our base URL and secret key, and creating a pre-configured Axios instance. When you're ready to go live, just change that baseUrl to https://khalti.com/api/v2. Simple!
Creating a Custom Hook for Payments
Now comes the fun part - let's create a custom hook to handle all our payment logic. I like to call this one useKhalti.ts. First, let's define our types:
And here's our hook implementation:
This hook does all the heavy lifting for us - managing payment state, handling errors, and providing nice loading states. Plus, it'll automatically redirect to Khalti's payment page when needed!
Building the Payment Form
Let's create a simple payment form using our shiny new hook:
Handling the Success Page
After a successful payment, Khalti sends the user back to your return URL with all the payment details. Here's how we handle that:
Pro Tips for Implementation
Here are some things I learned the hard way:
Always Handle Errors Gracefully
Don't Forget the Paisa Conversion
Keep Your Keys Safe
Verify Payments on Your Backend
Testing Made Easy
When testing, use these credentials in the sandbox environment:
Test Khalti IDs: 9800000000, 9800000001, 9800000002, 9800000003, 9800000004, 9800000005
Test MPIN: 1111
Test OTP: 987654
Common Gotchas to Watch Out For
The Paisa Trap: Always remember Khalti wants amounts in paisa, not NPR. ₹100 = 10000 paisa!
Return URL Setup: Make sure your return_url can handle all payment states properly.
Error Handling: Network errors happen - handle them gracefully.
Environment Management: Keep those test and production keys separate!
Running the Project Locally
Since Khalti's sandbox environment only allows localhost:3000 due to CORS restrictions, you'll need to run the project locally:
Clone the repo:
Set up your .env:
Fire it up:
I've created a video demonstration showing the complete payment flow in action, which I'll attach to help you see everything working together.