> 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/sample-integrations.md).

# Sample Integrations

## Sample Integrations

### [Popup payment](/payment-methods/popup-payment-method.md) method sample code

Just paste the code below inside the body tag and enter your valid data to start using Popup Payment Method

<pre class="language-javascript" data-line-numbers><code class="lang-javascript">&#x3C;script type="text/javascript" src="https://www.foloosi.com/js/foloosipay.v2.js">&#x3C;/script>
&#x3C;script>
        // post data for create order id
        data = {
          transaction_amount : YOUR_TRANSACTION_AMOUNT,
          currency : YOUR_CURRENCY_CODE,
          customer_name : OPTIONAL ,/*note : auto render in payment popup*/
          customer_email : OPTIONAL, /*note : auto render in payment popup*/
          customer_mobile : OPTIONAL ,/*note : auto render in payment popup*/
          customer_address : OPTIONAL ,/*note : minimize form fields in card detail page*/
          customer_city : OPTIONAL /*note : minimize form fields in card detail page*/
          description: OPTIONAL ,/*note : product or order information*/
          optional1: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
          optional2: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
          optional3: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
<strong>        }
</strong>	let fetchRes = fetch(
            "https://api.foloosi.com/aggregatorapi/web/initialize-setup",{
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'merchant_key': 'YOUR_MERCHANT_KEY' /** get the merchant key from foloosi panel*/
            },
            body: JSON.stringify(data)
         });

	fetchRes.then(res =>
	  res.json()).then(d => {
  	    console.log(d.data);
            var options = {
                "reference_token" : d.data.reference_token, //which is get from step2
                "merchant_key" : "YOUR_MERCHANT_KEY",/** get the merchant key from foloosi panel*/
            }
            var fp1 = new Foloosipay(options);
            fp1.open();
        })
        foloosiHandler(response, function (e) {
          if(e.data.status == 'success'){
            //responde success code
            //console.log(e.data.status);
            //console.log(e.data.data.transaction_no);
          }
          if(e.data.status == 'error'){
            //responde success code
            //console.log(e.data.status);
            //console.log(e.data.data.payment_status);
          }
          if(e.data.status == 'closed'){
            //Payment Popup Closed
            //console.log(e.data);
          }
        });
&#x3C;/script>
</code></pre>

### [Hosting payment](/payment-methods/hosting-payment-method.md) method sample code

Just paste the code below inside the body tag and enter your valid data to start using Redirect Payment Method

{% code lineNumbers="true" %}

```javascript
<script type="text/javascript" src="https://www.foloosi.com/js/foloosipay.v2.js"></script>
<script>
    //post data for create order id
    data = {
      transaction_amount : YOUR_TRANSACTION_AMOUNT,
      currency : YOUR_CURRENCY_CODE,
      customer_name : OPTIONAL ,/*note : auto render in payment popup*/
      customer_email : OPTIONAL ,/*note : auto render in payment popup*/
      customer_mobile : OPTIONAL ,/*note : auto render in payment popup*/
      customer_address : OPTIONAL ,/*note : minimize form fields in card detail page*/
      customer_city : OPTIONAL ,/*note : minimize form fields in card detail page*/
      description: OPTIONAL ,/*note : product or order information*/
      site_return_url: YOUR_REDIRECTION_URL /*note : you need to pass your redirect url */
      optional1: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
      optional2: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
      optional3: ADDITIONAL FIELD/*note : you can pass additional fields in it. (product or order information)*/
    }
    let fetchRes = fetch(
        "https://api.foloosi.com/aggregatorapi/web/initialize-setup",{
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'merchant_key': 'YOUR_MERCHANT_KEY' /** get the merchant key from foloosi panel*/
        },
        body: JSON.stringify(data)
      });
		
      fetchRes.then(res =>
            res.json()).then(d => {
		console.log(d.data);
                  var options = {
                      "reference_token" : d.data.reference_token, //which is get from step2
                      "merchant_key" : "YOUR_MERCHANT_KEY",/** get the merchant key from foloosi panel*/
                      "redirect" : true
                  }
          var fp1 = new Foloosipay(options);
          fp1.open();
        })
</script>
```

{% endcode %}

**Note,**

**Apple Pay and Samsung pay options are available only for Hosting Payment Method.**&#x20;

&#x20;  **Site must be https with proper SSL certificate.**

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