> 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-3/payment-widget-initialization.md).

# Payment Widget Initialization

Payment is always handled on foloosi's payment screen !

## foloosi-angular

### Install

```bash
npm install --save foloosi-angular
```

### Initialize Payment  Widget

#### Step 1

Add the script below in angular-cli.json.

```jsx
  "scripts": [
    "./node_modules/foloosi-angular/index.js"
  ]
```

#### Step 2

Follow these instructions in your Typescript file to initialize *Foloosi Payment.*

{% code lineNumbers="true" %}

```jsx
//To Declare the Foloosi Payment

declare var Foloosipay: any;

// For Success and Error Handlers. You can get the Payment status in the below function, it may be success or error. 

const foloosiHandler = ( function (e) {
  if (e.data.status == 'success') {
    console.log(e.data.status);
    console.log(e.data);
  }
  if (e.data.status == 'error') {
    console.log(e.data.status);
    console.log(e.data);
  }
});

window.addEventListener('message', foloosiHandler);

//To Initialize the Foloosi Payment

constructor(){
    Foloosipay.init();
}
```

{% endcode %}

### For Popup Payment

If you want to enable payment in \<iframe> which only supports Credit/Debit cards, you need not pass the REDIRECT parameter.

<pre class="language-jsx"><code class="lang-jsx"><strong>Foloosipay.open('REFERENCE_TOKEN','MERCHANT_KEY');
</strong></code></pre>

### For Hosting Method

If you want to enable hosting payment which supports ApplePay and SamsungPay, you need to pass REDIRECT as *true.*

```jsx
Foloosipay.open('REFERENCE_TOKEN','MERCHANT_KEY','REDIRECT');
```

To Close the Foloosi Payment Popup Use,

```jsx
Foloosipay.close();
```

#### Steps to activate Hosting Payment Method (optional) - [click here for details](/payment-methods/hosting-payment-method.md)

Note - It is mandatory to set REDIRECT to *true*

* Add the additional field shown below in the post data of *initialize Api*
* <pre class="language-jsx"><code class="lang-jsx"><strong>// additional Post Data
  </strong>site_return_url : "", //your site return url for get the payment response object
  </code></pre>

#### Steps to Activate saved card payment (optional) - [click here for details](/payment-methods/saved-card-payment-method.md)

* Add the additional field shown below in the post data of *initialize Api*

```jsx
// additional Post Data
customer_unique_identifier : "Unique value",/** MANDATORY FIELD -Customer Unique Reference value should be email/mobile no/uniqueCustomer id from your DB*/
```

### 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