Comment on page
Payment Widget Initialization
Payment is always handled on foloosi's payment screen !
Foloosi Payment Gateway for your Online Business.
npm install --save react-foloosi-widget
Initialize Foloosi Payment as shown below.
import {Foloosi} from 'react-foloosi-widget';
class App extends Component {
state = {
foloosiOpen: false,
reference_token:'YOUR_REFERENCE_TOKEN',
merchant_key:'YOUR_MERCHANT_KEY'
redirect: false | true // If you need to enable hosting payment set value as true,
};
foloosiHandler(e){
if(e.data.status == 'success'){
console.log(e.data);
console.log(e.data.data.transaction_no);
}
if(e.data.status == 'error'){
console.log(e.data);
console.log(e.data.data.payment_status);
}
}
componentDidUpdate(){
window.addEventListener('message', this.foloosiHandler);
}
foloosiOpen(){
this.setState({foloosiOpen: true});
}
render() {
return (
<div>
<span onClick={e => this.foloosiOpen(e)}>Foloosi</span>
<Foloosi foloosiOpen={this.state.foloosiOpen} foloosiClose={true} reference_token={this.state.reference_token} merchant_key={this.state.merchant_key} redirect={this.state.redirect}
/>
</div>
);
}
}
These are the default props that work dynamically to open a payment widget and allows the user to make a payment using Credit/Debit Cards.
foloosiOpen- Boolean - Toggles the popup open state (see above example)foloosiClose- Boolean - Enables the popup close option state (see above example)reference_token- String - Sets the Reference Token to reference_token state (This is got from initialize Api)merchant_key- String - Sets your Merchant Key to merchant_key state (This is got from Foloosi Panel)
Foloosi Technologies Pvt Ltd.
Copyrights (c) 2022 Foloosi
Last modified 1yr ago