Javascript Integration

Step 1
Just copy these HTML snippets and paste it before closing of <body> tag. 
<script type="text/javascript">
 var options = {
 "reference_token" : "REFERENCE_TOKEN", //which is get from step2
 "merchant_key" : "YOUR_MERCHANT_KEY",
 "redirect" : true | false // If you need redirection method, this parameter is must
 }
 var fp1 = new Foloosipay(options);
 </script>
 <script type="text/javascript" src="https://www.foloosi.com/js/foloosipay.v2.js"></script>
Note : Apple Pay option available for Redirection Method
Step 2 - Initialize Payment Setup
Post the following data's in below API link to requesting token for accessing the payment gateway. 
POST API LINK :
 https://api.foloosi.com/aggregatorapi/web/initialize-setup
​
 HEADERS:
 merchant_key : YOUR_MERCHANT_KEY
​
 BODY:
 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*/
 site_return_url: OPTIONAL /*note : if you pass redirect as true in step 1, need to pass this params. */
Note : This params site_return_url used for redirecting to your website after payment done. This redirection comes with Post data like Transaction Status and Transaction ID.
Supported Currencies areas follows : AED, USD, EUR, INR. If you need optional parameters, you can add it your own data option name and values in Body.The above POST request returns the Response like below. In that response, you will get Reference Token. After that you need to assign this Reference token variable globally as mentioned in Step 1.Response 
{
 "message": "Application setup successfully",
 "data": {
 "reference_token":
 "U0sjdGVzdF8kMnkkMTAkM21LRi0xZGliVDhldTV4NHlZSm9tZXZobnZxWTNEVnZmay1MdHNndTNFenNBTDU0clhWYkccVE4jRkxTQVBJNWM3Njk2ZDkwOWIzNxxSVCMkMnkkMTAkQXZ4ay9wdjlpTFlYLzRSZ2FjSkxpZWhHb2o0U0wvTFpZNXAyVjRGOVFycWNQZ2lHQ3VEZ08="
 }
 }
Step 3
Just paste the following code to Open and Close the Payment Widget.
For Open a Widget, refer the code below. fp1.open();
For Close a Widget, refer the code below. fp1.close();
Step 4
When you click place order button our popup will be loaded so you can use test card credentials from test card section to complete the order. 
note: Test card is valid only for test mode
Step 5 (For Success and Error Handlers)
For Success and Error Handlers, you can use the below handler function to get the payment response. 
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);
 }
 });
Note: Site must be https with proper SSL certificate.
To get the Transaction Details
For Transaction Details, you can use the below Get request to get the transaction details. 
GET API LINK: http://api.foloosi.com/v1/api/transaction-detail/YOUR_TRANSACTION_ID
​
HEADERS:
secret_key : YOUR_SECRET_KEY
Note
If you want to fetch customer detail and customer card details along with transaction details change the above API v1 to v2. 
To get the Transaction List
For Transaction List details, you can use the below Get request to get the transaction based on your merchant key. 
GET API LINK: https://api.foloosi.com/v1/api/transaction-list
​
HEADERS:
secret_key : YOUR_SECRET_KEY

Introduction

Next - CLIENT SIDE INTEGRATIONS

React JS

Last modified 2mo ago

Copy link