pray3m / freelanceX

Freelance Marketplace with Next.js, Tailwind CSS, Node.js, Prisma & MongoDB | Project I : 4th Semester BCA
https://freelancex.vercel.app
7 stars 2 forks source link

Integrate Payment Gateways like Esewa, Khalti #1

Open pray3m opened 9 months ago

pray3m commented 9 months ago

Currently, only stripe is supported. Add more options during the checkout by implementing khalti or esewa nepali payment gateways.

Mustkeem324 commented 7 hours ago

To add Khalti or eSewa Nepali payment gateways during checkout alongside Stripe, you'll need to integrate their APIs into your application. Here's a high-level plan:


Steps to Implement Khalti or eSewa Payment Gateways

  1. Research API Documentation

    • Visit the official documentation for Khalti or eSewa to understand their payment integration process.
  2. Backend Integration

    • Set up the API keys provided by the payment gateways during registration.
    • Implement an API endpoint to handle payment requests and validate responses from the payment gateway.
  3. Frontend Integration

    • Add buttons for Khalti or eSewa on your checkout page.
    • Use their provided SDKs or APIs to generate payment tokens.
  4. Webhook Handling

    • Configure webhooks to receive real-time payment status updates.
    • Ensure the backend securely verifies transactions using the gateway's secret key or token.
  5. Test the Payment Flow

    • Use the testing environment provided by the gateways to simulate transactions.
    • Verify successful payments, failures, and edge cases.
  6. Update Checkout UI

    • Display the new payment options with proper branding (Khalti/eSewa logos).
    • Allow users to switch between payment methods seamlessly.
  7. Deploy and Monitor

    • Deploy the updated code and monitor transactions to ensure everything works smoothly in production.

Example Code for Khalti Integration

Frontend Button (React/JavaScript)

const onKhaltiPayment = () => {
    const config = {
        publicKey: "YOUR_KHALTI_PUBLIC_KEY",
        productIdentity: "1234567890",
        productName: "Your Product Name",
        productUrl: "http://yourwebsite.com",
        eventHandler: {
            onSuccess(payload) {
                console.log("Payment successful", payload);
                // Send payload to backend for verification
            },
            onError(error) {
                console.error("Payment failed", error);
            },
        },
    };
    const checkout = new KhaltiCheckout(config);
    checkout.show({ amount: 1000 }); // Amount in paisa
};

Backend Verification (Node.js Example)

const axios = require('axios');

app.post('/verify-payment', async (req, res) => {
    const { token, amount } = req.body;

    try {
        const response = await axios.post(
            'https://khalti.com/api/v2/payment/verify/',
            {
                token: token,
                amount: amount,
            },
            {
                headers: {
                    Authorization: `Key YOUR_KHALTI_SECRET_KEY`,
                },
            }
        );
        res.json({ success: true, data: response.data });
    } catch (error) {
        res.status(400).json({ success: false, error: error.response.data });
    }
});

Once integrated, you'll offer users more localized and convenient payment options, improving their checkout experience.