react-native-paytm
Version:
A react native wrapper for PayTM
237 lines (203 loc) • 7.38 kB
JavaScript
/*
This is a sample code for reference about how to properly use Paytm with React Native
*/
import React, {Component} from 'react';
import {
ActivityIndicator,
Alert,
DeviceEventEmitter,
Dimensions,
NativeEventEmitter,
NativeModules,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
Button,
View,
} from 'react-native';
import Paytm from 'react-native-paytm';
import * as PaytmConfig from './PaytmConfig';
var {height, width} = Dimensions.get('window');
var paytmEvent = null;
class Addmoney extends Component{
constructor(props){
super(props);
this.state = {
amount: 0,
order_id: '',
processing: false,
payment_text: 'Requesting payment, please wait...'
};
this._setAmount = this._setAmount.bind(this);
this._startPayment = this._startPayment.bind(this);
this._handlePaytmResponse = this._handlePaytmResponse.bind(this);
}
componentDidMount(){
//paytmEvent = new NativeEventEmitter(NativeModules.RNPayTm);
//paytmEvent.addListener('PayTMResponse', this._handlePaytmResponse);
Paytm.addListener(Paytm.Events.PAYTM_RESPONSE, this._handlePaytmResponse);
this.setState({order_id: this.randomString(6)});
}
componentWillUnmount(){
Paytm.removeListener(Paytm.Events.PAYTM_RESPONSE, this._handlePaytmResponse);
}
randomString(len) {
var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return [...Array(len)].reduce(a=>a+p[~~(Math.random()*p.length)],'');
}
_setAmount(much){
this.setState({amount: much});
this._amountTxtBox.setNativeProps({text:much.toString()});
}
_startPayment(){
if(this.state.processing) return;
var amount = parseInt(this.state.amount);
if(amount == 0 || amount == ''){
Alert.alert('Please select or enter a valid amount'); return;
}
if(amount < 10){
Alert.alert('Minimum purchase limit is 10 rupees'); return;
}
if(amount > 1000){
Alert.alert('Maximum purchase limit is 1000 rupees'); return;
}
amount = amount.toString(); //amount must be passed a string else paytm will crash if amount is int type
this.setState({processing: true, payment_text: 'Requesting payment, please wait...'});
var type = 1; //credit
//start transaction, generate request from server
var paytmConfig = PaytmConfig.DEMO;
var body = JSON.stringify({
MID: paytmConfig.MID,
INDUSTRY_TYPE_ID: paytmConfig.INDUSTRYTYPEID,
CHANNEL_ID: paytmConfig.CHANNELID,
WEBSITE: paytmConfig.WEBSITE,
CALLBACK_URL: paytmConfig.CALLBACKURL+this.state.order_id,
MERCHANT_KEY: paytmConfig.MERCHANTKEY,
ORDER_ID: this.state.order_id,
CUST_ID: 'cust_1',
TXN_AMOUNT: '10.0',
EMAIL: 'mksingh.3671@gmail.com',
MOBILE_NO: '8269262610',
});
var url = 'https://www.yourdomain.in/generateChecksum.php';
console.log(url+body)
fetch(url, {
method: 'POST',
headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
body: body
})
.then((response) => response.json())
.then((responseJson) => {
console.log(">>>"+JSON.stringify(responseJson));
var CHECKSUM = responseJson.checksum;
console.log(CHECKSUM);
//28322.54 + 991.29 + 178.43 + 856.18 = 30,348.44
var data = JSON.parse(body);
var details = {
//mode: 'Production',
mode: 'Staging',
MID: paytmConfig.MID,
INDUSTRY_TYPE_ID: paytmConfig.INDUSTRYTYPEID, //Prod
WEBSITE: paytmConfig.WEBSITE, //prod
CHANNEL_ID: paytmConfig.CHANNELID,
TXN_AMOUNT: data.TXN_AMOUNT,
ORDER_ID: data.ORDER_ID,
EMAIL: data.EMAIL,
MOBILE_NO: data.MOBILE_NO,
CUST_ID: data.CUST_ID,
CALLBACK_URL: paytmConfig.CALLBACKURL+data.ORDER_ID,
CHECKSUMHASH: CHECKSUM,
};
Paytm.startPayment(details);
})
.catch((error) => {
console.log(error)
this.setState({processing: false});
Alert.alert('Error', 'Unable to initiate transaction, please try again');
});
}
_handlePaytmResponse(body){
var order_id = this.state.order_id;
this.setState({processing: false, payment_text: ''});
console.log(JSON.stringify(body));
var dada = {
'status': 'Success',
'RESPMSG': 'Txn Success',
'BANKTXNID': '43653641',
'PAYMENTMODE': 'PPI',
'MID': 'DcDZSw87200390845530',
'CHECKSUMHASH': 'EZNfcVrHMsU7Kn9tEU8e5erZo95chFdQUWVku30azc8wEzVfZ2iZXrJE31wjdc4+6Vc/5K7rRbJkXaV+Jy3VSMqk4qMh+4ADfaet+dxgOqo=',
'GATEWAYNAME': 'WALLET',
'CURRENCY': 'INR',
'RESPCODE': '01',
'TXNID': '20200207111212800110168611701269973',
'TXNDATE': '2020-02-07 17:51:39.0',
'TXNAMOUNT': '10.00',
'ORDERID': 'Order_232412',
'BANKNAME': 'WALLET',
'STATUS': 'TXN_SUCCESS',
};
}
render(){
return(
<View style={styles.container}>
<View style={{}}>
<TextInput ref={component=> this._amountTxtBox=component}
style={{height: 50, backgroundColor: '#EDEDED', color: 'black', marginLeft: 0, marginRight:0, marginTop: 20}}
onChangeText={(text) => this.setState({amount: text})}
autoCorrect={false}
placeholder=" Enter Amount"
placeholderTextColor="#727278"
keyboardType="numeric"
/>
<View style={{ marginTop: 20}}>
{(this.state.processing) ? (
<View style={{alignItems:'center', justifyContent: 'center'}}>
<ActivityIndicator
animating={this.state.processing}
style={{height: 80}}
color="black"
size="large"/>
<Text style={{marginTop: 5, fontSize: 15, fontWeight: 'bold'}}>{this.state.payment_text}</Text>
</View>
) :
<Button
style={styles.buttonContainer}
color="#f194ff"
title="Pay via PayTM"
onPress={() => {this._startPayment()}}
>
</Button>
}
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginHorizontal: 16,
},
buttonContainer:{
borderRadius: 5,
backgroundColor: "black",
width: 200,
height: 50,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 10
},
shadowRadius: 10,
shadowOpacity: 0.2,
},
upperText:{
color:"white",
fontSize: 15,
},
});
module.exports = Addmoney;