Freecharge Payment Gateway-Implementing Indian Payment Gateway Integration in React Native Applications

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.