Skip to content

JavaScript SDK

JavaScript SDK provides customizable card form to be securely embedded into any html-page.

JS SDK

1.Installation

Node If you’re using Npm in your project, you can add ipsp-js-sdk dependency to package.json with following command:

npm i --save ipsp-js-sdk

or add dependency manually:

{
  "dependency": {
    "ipsp-js-sdk":"^1.0"
  }
}

Bower If you’re using Bower in your project, you can run the following command:

bower install ipsp-js-sdk

or add dependency manually:

{
  "dependency": {
    "ipsp-js-sdk":"^1.0"
  }
}

Manual installation If you do not use NodeJS, you can download the latest release. Or clone from GitHub the latest developer version 

git clone git@github.com:cloudipsp/ipsp-js-sdk.git

Quick start 

<script src="https://unpkg.com/ipsp-js-sdk@latest/dist/checkout.min.js"></script>
2. Develop html card form using your own design.

Basic template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
    <script src="https://unpkg.com/ipsp-js-sdk@latest/dist/checkout.min.js"></script>
    <script>
    $checkout('Api').scope(function(){
        this.request('api.checkout.form','request', { Parameters } ).done(function(model){
            model.sendResponse();
            console.log(model.attr('order'));
        }).fail(function(model){
            console.log(model.attr('error'));
        });
    });
    </script>
  </body>
</html>

Basic template example: https://github.com/cloudipsp/ipsp-js-sdk#basic-template

3. Create order using Integration Schema C for JavaScript SDK.

Add parameters required_rectoken=Y and server_callback_url in your request to obtain recurring token (if you are planning recurring payments) in server callback (rectoken parameter).

curl -i -X POST \
-H "Content-Type:application/json" \
-d \
'{
"request": {
"server_callback_url": "http://myshop/callback/",
"order_id": "TestOrder2",
"currency": "USD",
"merchant_id": 1549901,
"order_desc": "Test payment",
"amount": 1000,
"signature": "91ea7da493a8367410fe3d7f877fb5e0ed666490"
}
}' \
'https://pay.flitt.com/api/checkout/token'

Documentation: https://docs.flitt.com/docs/page/3/?la=en#chapter-3-6-c. Save host-to-host token parameter from response.

4. Load host-to-host token from step 3 in your card details form.

{
 "payment_system":"card",
 "token":"host-to-host generated token",
 "card_number":"16/19-digits number",
 "expiry_date":"Supported formats: MM/YY, MM/YYYY, MMYY, MMYYYY",
 "cvv2":"3-digits number"
 }

from card form to payment gateway using JavaScript API $checkout('Api'). Instruction: https://github.com/cloudipsp/ipsp-js-sdk#host-to-host-token

5. Use .on('success') and .on('error') JavaScript callbacks to get result on payment processing.

success – order is approved and amount will be charged error – order is declined and amount will not be charged

model.attr('error.message') will contain localized error message in case of payment decline. Order information on order status and details will be returned in model.data.order.order_data

JavaScript callback example:

console.log('success',JSON.stringify(model.attr("order").order_data));

{
  "response": {
    "rrn": "111111111111",
    "masked_card": "444455XXXXXX1111",
    "sender_cell_phone": "",
    "sender_account": "",
    "currency": "UAH",
    "fee": "",
    "reversal_amount": "0",
    "settlement_amount": "0",
    "actual_amount": "200",
    "response_description": "",
    "sender_email": "test@test.com",
    "order_status": "approved",
    "response_status": "success",
    "order_time": "13.07.2024 01:23:59",
    "actual_currency": "UAH",
    "order_id": "test33694502191",
    "tran_type": "purchase",
    "eci": "5",
    "settlement_date": "",
    "payment_system": "card",
    "approval_code": "123456",
    "merchant_id": 1549901,
    "settlement_currency": "",
    "payment_id": 805243692,
    "card_bin": 444455,
    "response_code": "",
    "card_type": "VISA",
    "amount": "200",
    "signature": "b7884b5c4906956fbac4d20390388d913a78c0b0",
    "product_id": "",
    "merchant_data": "Test merchant data",
    "rectoken": "",
    "rectoken_lifetime": "",
    "verification_status": "",
    "parent_order_id": "",
    "fee_oplata": "0",
    "additional_info": "{\"capture_status\": null, \"capture_amount\": null, \"reservation_data\": \"{}\", \"transaction_id\": 1994930931, \"bank_response_code\": null, \"bank_response_description\": null, \"client_fee\": 0.0, \"settlement_fee\": 0.0, \"bank_name\": null, \"bank_country\": null, \"card_type\": \"VISA\", \"card_product\": \"empty_visa\", \"card_category\": null, \"timeend\": \"13.07.2024 01:24:08\", \"ipaddress_v4\": \"178.54.60.26\", \"payment_method\": \"card\", \"version_3ds\": 1, \"is_test\": true}",
    "response_signature_string": "**********|200|UAH|{\"capture_status\": null, \"capture_amount\": null, \"reservation_data\": \"{}\", \"transaction_id\": 1994930931, \"bank_response_code\": null, \"bank_response_description\": null, \"client_fee\": 0.0, \"settlement_fee\": 0.0, \"bank_name\": null, \"bank_country\": null, \"card_type\": \"VISA\", \"card_product\": \"empty_visa\", \"card_category\": null, \"timeend\": \"13.07.2024 01:24:08\", \"ipaddress_v4\": \"178.54.60.26\", \"payment_method\": \"card\", \"version_3ds\": 1, \"is_**********\": true}|200|123456|444455|VISA|UAH|5|0|444455XXXXXX1111|Test merchant data|1549901|**********33694502191|approved|13.07.2024 01:23:59|805243692|card|success|0|111111111111|**********@**********.com|0|purchase"
  }
}

Example: https://jsfiddle.net/flitt/on8ydsgq/1/

6. Process final response received as server callbacks to server_callback_url.

Format of final response: Response