rn-nepal-payment
v0.1.2
Published
React Native component to add nepalese payment like esewa, khalti, etc in your app.
Downloads
5
Maintainers
Keywords
Readme
rn-nepal-payment
React-native wrapper which includes all the major payment solutions in Nepal. This package implements the services in a webview in a Modal.
Installation
npm install --save react-native-webview // if you have not already
npm install rn-nepal-payment
or
yarn add react-native-webview // if you have not already
yarn add rn-nepal-payment
Usage
Esewa
import React from 'react';
import { Button, Text, SafeAreaView } from 'react-native';
import { EsewaSdk } from 'rn-nepal-payment';
const EsewaExample = () => {
const [isVisible, setisVisible] = React.useState(false);
const [response, setResponse] = React.useState('');
const _onPaymentComplete = (response) => {
setResponse(response);
setisVisible(false);
return
}
return (
<SafeAreaView>
<Button
title={'Esewa test'}
onPress={() => setisVisible(true)}
style={{ width: 100, height: 50, backgroundColor: 'red' }}
/>
{response?.token && <Text>{`ref id: ${response.token}`}</Text>}
<EsewaSdk
amt={100} // Amount of product or item or ticket etc
taxAmt={0} // Tax amount on product or item or ticket etc
totalAmt={100} // Total payment amount including tax, service and deliver charge. [i.e tAmt = amt + txAmt + psc + tAmt]
env={'EPAYTEST'} // Merchant code provided by eSewa
testMode={true} // Boolean value for enabling test endpoint and real payment gateway
isVisible={isVisible} // Bool to show modal
onPaymentComplete={_onPaymentComplete} // Callback from connectips Web Sdk
pid={"ee2c3ca1-696b-4cc5-a6be-2c40d929d43"} // A unique ID of product or item or ticket etc
failureURL={`http://merchant.com.np/page/esewa_payment_failed?q=fu`} // Failure URL: a redirect URL of merchant application where customer will be redirected after FAILURE or PENDING transaction
successURL={`http://merchant.com.np/page/esewa_payment_success?q=su`} // Success URL: a redirect URL of merchant application where customer will be redirected after SUCCESSFUL transaction
psc={0} // Product service charge amount
pdc={0} // Product delivery charge amount
signature={`4Ov7pCI1zIOdwtV2BRMUNjz1upIlT/COTxfLhWvVurE=`}
/>
</SafeAreaView>
);
}
export default EsewaExample;
For more information please visit here.
Khalti
import React from 'react';
import { Button, SafeAreaView } from 'react-native';
import { KhaltiSdk } from 'rn-nepal-payment';
const KhaltiExample = () => {
const [isVisible, setIsVisible] = React.useState(false);
const _onPaymentComplete = (data) => {
setIsVisible(false);
const str = data.nativeEvent.data;
const resp = JSON.parse(str);
// console.log({ resp })
if (resp.event === 'CLOSED') {
// handle closed action
} else if (resp.event === 'SUCCESS') {
// console.log({ data: resp.data })
} else if (resp.event === 'ERROR') {
// console.log({ error: resp.data })
}
return;
};
return (
<SafeAreaView style={styles.container}>
<Button title={'Start Khalti'} onPress={() => setIsVisible(true)} />
<KhaltiSdk
isVisible={isVisible}
onPaymentComplete={_onPaymentComplete} // Callback from Khalti Web Sdk
failureURL={`http://merchant.com.np/page/esewa_payment_failed?q=fu`} // Failure URL: a redirect URL of merchant application where customer will be redirected after FAILURE or PENDING transaction
successURL={`http://merchant.com.np/page/esewa_payment_success?q=su`}
uri="https://test-pay.khalti.com/?pidx=bZQLD9wRVWo4CdESSfuSsB"
/>
</SafeAreaView>
);
};
const styles = {
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
};
export default KhaltiExample;
For more information please visit here.
License
MIT