Freecharge Payment Gateway-Implementing Indian Payment Gateway Integration in React Native Applications
Implementing a payment gateway in a React Native application involves several steps, including backend setup, API integration, and frontend implementation. In India, popular payment gateways include Razorpay, Paytm, and CCAvenue, among others. Here’s a general guide on how to integrate a payment gateway into your React Native app using Razorpay as an example:
### Backend Setup
1. **Create an Account**: Sign up for a merchant account with the payment gateway provider (Razorpay in this case).
2. **API Keys**: Once you have an account, obtain your API keys (API key and API secret key) which will be used to authenticate your requests.
3. **Backend Server**: Set up a backend server (Node.js/Express is commonly used with React Native). This server will handle the communication between your app and the payment gateway.
4. **Environment Variables**: Store your API keys and other sensitive information in environment variables, not in your codebase.
### Frontend Implementation
1. **Install Dependencies**: Install the necessary packages for making HTTP requests (like Axios) and any specific package for the payment gateway if available.
“`bash
npm install axios react-native-razorpay
“`
2. **Initialize the Payment Gateway**: Initialize the payment gateway on the frontend using the API key.
“`javascript
import Razorpay from ‘react-native-razorpay’;
const options = {
key: ‘YOUR_RAZORPAY_API_KEY’, // Add your Razorpay API key here
amount: 1000, // Amount in paise (1000 = Rs. 10)
currency: ‘INR’,
name: ‘Your Company Name’,
description: ‘Payment for your order’,
order_id: ‘ORDER_ID’, // This should be generated on your backend
prefill: {
email: ‘[email protected]’,
contact: ‘9191919191’,
},
theme: { color: ‘#F37254’ },
};
Razorpay.init(options)
.then((data) => {
// Handle success
})
.catch((error) => {
// Handle failure
});
“`
3. **Create a Payment Method**: Implement a method to handle the payment process.
“`javascript
const openPaymentGateway = () => {
Razorpay.open(options)
.then((data) => {
// Payment success
console.log(‘Payment Success’, data);
})
.catch((error) => {
// Payment failed
console.log(‘Payment Failed’, error);
});
};
“`
4. **Handle Response**: After the payment is processed, the payment gateway will send a response back to your backend server. You need to handle this response to update the order status.
### Backend Integration
1. **Order Creation**: When a user attempts to make a payment, first create an order on your backend using the payment gateway’s API.
“`javascript
const axios = require(‘axios’);
const createOrder = async (amount, currency, receipt) => {
const response = await axios.post(‘https://api.razorpay.com/v1/orders’, {
amount: amount,
currency: currency,
receipt: receipt,
payment_capture: ‘1’, // auto capture
}, {
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Basic ${Buffer.from(`${process.env.RAZORPAY_API_KEY}:${process.env.RAZORPAY_API_SECRET_KEY}`).toString(‘base64’)}`,
},
});
return response.data;
};
“`
2. **Verify Payment**: After the payment is made, verify the payment on your backend to ensure it’s legitimate.
“`javascript
const verifyPayment = async (paymentId, orderId) => {
const response = await axios.post(‘https://api.razorpay.com/v1/payments/’ + paymentId + ‘/capture’, {
amount: 1000, // This should be the same as the order amount
currency: ‘INR’,
}, {
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Basic ${Buffer.from(`${process.env.RAZORPAY_API_KEY}:${process.env.RAZORPAY_API_SECRET_KEY}`).toString(‘base64’)}`,
},
});
return response.data;
};
“`
### Security and Compliance
– Always ensure that you are following the security guidelines provided by the payment gateway.
– Do not store any sensitive card information on your servers.
– Make sure your app and backend are secure to prevent unauthorized access.
### Testing
Before going live, thoroughly test the payment flow in a test environment provided by the payment gateway.
### Deployment
Once everything is working as expected, deploy your backend and frontend applications to production.
Remember that each payment gateway may have different integration procedures and requirements, so be sure to consult the specific documentation provided by the payment gateway you choose to use.
