API FONDYVersion 1.0

JavaScript API

The ipsp.js module allows you to use FONDY services via Java Script integrated into your webpage.

Always use latest up-to-date version of our module:

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>

To load the checkout page on the merchant site using JavaScript the API merchant site should first send a server-to-server request to https://pay.fondy.eu/api/checkout/url/.

In response checkout page url will be returned:

Request example

{
  "request": {
    "response_url": "https://example.com/responsepage/",
    "order_id": "test8037875286",
    "order_desc": "Test payment",
    "currency": "EUR",
    "amount": "100",
    "signature": "07bc309047a56275f8d89ae222e2af0ceb94fe79",
    "merchant_id": "1"
  }
}

Response example

{
  "response":{
    "response_status":"success",
    "checkout_url":"https://pay.fondy.eu/checkout?token=afcb21aef707b1fea2565b66bac7dc41d7833390"
  }
}

To get detailed server-to-server API documentation please refer to Request generation

URL from response like this

https:/pay.fondy.eu/checkout?token=afcb21aef707b1fea2565b66bac7dc41d7833390

should be inserted in JavaScript code in next line:

// load checkout url received from server-server api
this.loadUrl(url);

see example below.

Open detailed JavaScript API reference

Usage examples

All-in-one configuration

$ipsp.get('checkout').config({
     'wrapper': '#frameholder' ,
     'ismodal': false ,
     'styles' : {
         'body':{'overflow':'hidden'},
         '.page-section-shopinfo':{display:'none'},
         '.page-section-footer':{display:'none'}
     }
 }).scope(function(){
     // set checkout element target
     this.setCheckoutWrapper('#frameholder');
     // set checkout modal state
     this.setModal(false);
     // set checkout size? use only with setModal(false)
     this.setCheckoutWidth(480);
     this.setCheckoutHeight(450);
     // apply custom styles to checkout page
     this.setCssStyle({
         'body':{'overflow':'hidden'},
         '.page-section-shopinfo':{display:'none'},
         '.page-section-footer':{display:'none'}
     });
     // add action handlers
     this.action('decline',function(data,type){
         console.log(data);
     });
     this.action('message',function(data,type){
         console.log(data);
     });
     this.action('show',function(){
         console.log('show checkout');
     });
     this.action('hide',function(){
         console.log('hide checkout');
     });
     // add resize handler that triggers
     // when checkout page change size
     this.action('resize',function(data,type){
         this.setCheckoutHeight(data.height);
     });
     // load checkout url received from server-server api
     // or from Button Module `$ipsp('button').getUrl()`
     this.loadUrl(checkout_url);
     // bind multiple html elements to open checkout
     this.setElementAttr('data-url');
     this.setClickElement('.product-list .pay-button');
    // handle success response from checkout
    this.unbind('callback').action('callback',function(){
        ...code
    });
    // handle decline response from checkout
    this.action('decline',function(){
        ...code
    });
    // handle all response from checkout api
    this.addCallback(__DEFAULTCALLBACK__);
 });

Full screen mode

$ipsp.get('checkout').config({
     'wrapper':'body',
     'ismodal':true,
     'styles' : {
         'body':{'overflow':'hidden'},
         '.page-section-shopinfo':{display:'none'},
         '.page-section-footer':{display:'none'}
     }
 }).scope(function(){
     this.action('decline',function(data,type){
         console.log(data);
     });
     this.action('message',function(data,type){
         console.log(data);
     });
     this.loadUrl(url);
 });

In-Page Checkout

 $ipsp.get('checkout').config({
     'wrapper': '#frameholder' ,
     'styles' : {
         'body':{'overflow':'hidden'},
         '.page-section-shopinfo':{display:'none'},
         '.page-section-footer':{display:'none'}
     }
 }).scope(function(){
     this.width(480);
     this.height(480);
     this.action('decline',function(data,type){
         console.log(data);
     });
     this.action('message',function(data,type){
         console.log(data);
     });
     this.loadUrl(url);
 });

Handle Checkout Data

 $ipsp.get('checkout').config({
     'wrapper':'#frameholder',
     'styles' : {},
 }).scope(function(){
    this.width(480);
    this.height(480);
    this.addCallback(__DEFAULTCALLBACK__);
    this.loadUrl(url);
 });

Apple Pay

For Apple Pay button please add following code to JS configuration:

$ipsp('checkout').config({
      'mobilepay':{
        'container':'#cApplePay'
    }).scope

and div attribute into web page HTML:

<div id="cApplePay"> </div>