Foloosi
Search…
⌃K
Links

Payment Widget Initialization

Payment is always handled on foloosi's payment screen !

react-foloosi-widget

Foloosi Payment Gateway for your Online Business.

Install

npm install --save react-foloosi-widget

Initialize Payment 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>
);
}
}

Props

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)

Support

Visit https://www.foloosi.com for support requests or email to [email protected]

Developed by

Foloosi Technologies Pvt Ltd.

License

Copyrights (c) 2022 Foloosi