> For the complete documentation index, see [llms.txt](https://docs.foloosi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foloosi.com/client-side-integrations/javascript-integration-2/payment-widget-initialization.md).

# Payment Widget Initialization

Payment is always handled on foloosi's payment screen !

## react-foloosi-widget

Foloosi Payment Gateway for your Online Business.

### Install

```bash
npm install --save react-foloosi-widget
```

### Initialize Payment  Widget

Initialize Foloosi Payment as shown below.

```jsx
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 <tech@foloosi.com>.

## Developed by

Foloosi Technologies Pvt Ltd.

## License

Copyrights (c) 2025 Foloosi