Integrate instamojo payment gateway in React Native App

I was looking for a way to integrate instamojo payment gateway into a react native app. obviously my first search was for some npm packages which can do the job for me, i wasn’t able to find any offical npm packages by instamojo for supporting payment in react native app so decided to go with react native webview. it did the job for me , still i’am not sure whether the approach is 100% right or not.
How i did this ?
I used exprees (Node js framework) for the backend services and react native for the front end . basically how it works is we will be sending some needed info such as name , purpose of payment , amount etc to the api endpoint of instamojo , they will process it and return back a json object with a key called longurl , this long url is what we need , if you navigate to the longurl provided you will be greeted with different payment options , we render this longurl inside the webview.
Let’s get in to code
First of all create a test account in instamojo, goto test.instamojo.com and signup, once it’s done go to API & PLUGINS , there you will find private api key and private auth key , we need this later

now if you got to create-a-request section in instamojo you will find the following code snippet (for node js )
var request= require('request');
var headers = { 'X-Api-Key': 'd82016f839e13cd0a79afc0ef5b288b3', 'X-Auth-Token': '3827881f669c11e8dad8a023fd1108c2'}
var payload = {
purpose: 'FIFA 16',
amount: '2500',
phone: '9999999999',
buyer_name: 'John Doe',
redirect_url: 'http://www.example.com/redirect/',
send_email: true,
webhook: 'http://www.example.com/webhook/',
send_sms: true,
email: 'foo@example.com',
allow_repeated_payments: false}
request.post('https://test.instamojo.com/api/1.1/payment-requests/', {form: payload, headers: headers}, function(error, response, body){
if(!error && response.statusCode == 201){
console.log(body);
}
})The X-Api-Key here is our private api key and X-Auth-Token is our private auth token , not all the fields are necessary , you can check the official docs of instamojo for more info . now we will make an api endpoint for our react application , ie we will be sending the info needed for processing payment such as amount, purpose etch from our react app to express backend , once express processes it , it will sen us back the data containing the longurl and we will be loading it in webview ,
Express backend
From this github repo you will get the starter code , its simple just one endpoint which accepts data from our react app , clone / download it , run npm install and use the command nodemon app.js or node app.js to run the server . Don’t forget to change the auth keys (in routes/payment)
Our main page where the logic looks like this (payment.js).
React Native App
In our app we will be having only two screen one to enter the required info and the other which loads the longurl returned by instamojo in a webview.
Clone the below github repo and run the application
In the application we are using react navigation , there are tow screens ,one for entering the details and other to load the url inside a webview , both the views are added into a stacknavigator. The app.js looks like this
inside our src directory we have HomeScreen.js and WebView.js
HomeScreen.js
Webview.js
once the payment is processed we will use the request_id which we get back from instamojo to fetch the details of the transaction . Based on the response you can show your custom layout you want.
Thanks for reading this :)
UPDATE
Now with the initial response itself which instamojo sends back after a successful payment, you can read the status of payment, you can also cross check with the payment_id , if you want to check with a single step look for payment_status query param , if the transaction is success full its value will be Credit.
eg: let the url be : https://example.com/payment/index.html?payment_id=MOJO0c23605N6384851X&payment_status=Credit&payment_request_id=4eaf2275f624a3abd3e98ca00f602a
then let status = url.split(“payment_status=”).pop().split(‘&payment_request_id=’)[0];
the response will be Credit based on our example .
