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) 2025 Foloosi