A dependable digital payment gateway has become an integral part of modern-day mobile or web applications, and if you have developed a mobile app specifically for users in Nepal, eSewa would be one of the top choices for digital wallets. eSewa allows users to pay for many services at any time, either through a web-based app or a mobile app.
In this blog post, we will cover detailed steps on how to integrate the eSewa payment gateway into your React Native application and the advantages of using eSewa for your app.
What is eSewa?
eSewa is one way in which customers can make digital payments via an online webpage or a mobile app, while providing businesses with a way to accept payments from customers quickly and securely.
Key features of eSewa include:
- Secure digital wallet payments
- Easy integration for mobile and web applications
- Quick transaction processing
- Large user base in Nepal
- Support for multiple types of payments
By implementing eSewa within your React Native app, you can provide an easy checkout experience for your users.
Benefits of eSewa Payment Integration in React Native
1. Faster Payments
eSewa allows you to process payments very rapidly because you do not have to enter your payment card number for every transaction.
2. Secure Transactions
The eSewa payment gateway has been developed following the highest encryption standards available to ensure that your transactions will be protected and secured.
3. Trusted Payment Method
eSewa is one of the most popular e-wallets in Nepal, which helps establish a sense of trust and confidence in the user making the payment.
4. Seamless Integration
Integrating eSewa within your React Native application is easy, utilizing a web-based payment process.
5. Improved Customer Experience
When you offer an efficient method for customers to process their transactions, your customers will benefit from an improved overall transaction experience, increasing the amount of successful transactions.
Steps to Integrate eSewa Payment in React Native:
Step 1: Install Required Packages
npm install react-native-webview crypto-jsStep 2: Define Payment Data
amount Base amount
tax_amount Tax amount
total_amount Final amount
transaction_uuid Unique order ID
product_code Merchant code
success_url Redirect URL on success
failure_url Redirect URL on failure
signed_field_names Fields used for signature
signature HMAC SHA256 signatureStep 3: Generate HMAC SHA256 Signature
total_amount=100,transaction_uuid=ORDER123456,product_code=EPAYTEST
import CryptoJS from "crypto-js";
const total_amount = "100";
const transaction_uuid = "ORDER123456";
const product_code = "EPAYTEST";
// Sandbox secret key
const secret = "8gBm/:&EnhH.1/q";
// Create exact message string
const message = `total_amount=${total_amount},transaction_uuid=${transaction_uuid},product_code=${product_code}`;
// Generate HMAC SHA256
const hash = CryptoJS.HmacSHA256(message, secret);
// Convert to Base64
const signature = CryptoJS.enc.Base64.stringify(hash);Step 4: Create Auto-Submit HTML Form
const successUrl = "https://google.com";
const failureUrl = "https://google.com";
const htmlContent = `
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="document.forms[0].submit()">
<form method="POST" action="https://rc-epay.esewa.com.np/api/epay/main/v2/form">
<input type="hidden" name="amount" value="${total_amount}" />
<input type="hidden" name="tax_amount" value="0" />
<input type="hidden" name="total_amount" value="${total_amount}" />
<input type="hidden" name="transaction_uuid" value="${transaction_uuid}" />
<input type="hidden" name="product_code" value="${product_code}" />
<input type="hidden" name="product_service_charge" value="0" />
<input type="hidden" name="product_delivery_charge" value="0" />
<input type="hidden" name="success_url" value="${successUrl}" />
<input type="hidden" name="failure_url" value="${failureUrl}" />
<input type="hidden" name="signed_field_names" value="total_amount,transaction_uuid,product_code" />
<input type="hidden" name="signature" value="${signature}" />
</form>
</body>
</html>
`;Step 5: Load WebView
import React from "react";
import { View, Alert, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";
const EntryPoint = () => {
const handleNavigation = (navState) => {
const { url } = navState;
if (url.startsWith(successUrl)) {
Alert.alert("Payment Success ✅");
}
if (url.startsWith(failureUrl)) {
Alert.alert("Payment Failed ❌");
}
};
return (
<View style={{ flex: 1 }}>
<WebView
originWhitelist={["*"]}
source={{ html: htmlContent }}
javaScriptEnabled
domStorageEnabled
mixedContentMode="always"
startInLoadingState
renderLoading={() => (
<ActivityIndicator size="large" style={{ flex: 1 }} />
)}
onNavigationStateChange={handleNavigation}
/>
</View>
);
};
export default EntryPoint;Sandbox & Production URLs
Environment | URL
Sandbox [https://rc-epay.esewa.com.np ](https://rc-epay.esewa.com.np )
Production [https://epay.esewa.com.np ](https://epay.esewa.com.np )
Conclusion
By integrating eSewa payments in your React Native project, you will enable companies to give their users in Nepal a fast, reliable, and safe digital payment option. You’ll create a merchant account and configure the payment settings, use a WebView to launch the Payment Gateway, and verify the transaction via your back-end server.
Learn How to Integrate Stripe Payment in React Native
Through the successful implementation of this integration, it is clear that eSewa has the potential to provide your application with a check-out experience that is improved and increase the trust that users have in you.
Contact us to integrate any other payment gateway in your React Native app.
FAQ
1. What is eSewa payment integration?
eSewa Payment Integration allows a business to accept payments made by eSewa digital wallet users from inside their web or mobile applications.
2. Can I integrate eSewa in a React Native mobile app?
To allow users to make payments using the eSewa service within your app, you can use WebView or redirect users to the eSewa payment gateway.
3. Do I need a merchant account for eSewa integration?
You must have a merchant account with eSewa in order to obtain the necessary credentials to integrate their service.
4. How can I verify an eSewa transaction?
You can verify an eSewa transaction by using the eSewa payment verification API on your server after the transaction has been processed.
5. Is eSewa payment integration secure?
Yes, eSewa uses secure protocols and encryption to protect user data. However, as a best practice, developers should implement their own server-side verification process for added security.
6. Can eSewa handle failed transactions?
Yes, if a transaction fails for any reason, eSewa will redirect the user to the failure URL, where they will be able to handle the error in their app and notify the user of the error.
7. Which countries mainly use eSewa?
The main country where eSewa is utilized is Nepal. E-Sewa is one of the most popular digital wallet services in Nepal.
