API FONDYВерсія 1.0

JavaScript API

Модуль ipsp.js дає змогу використовувати сервіс приймання платежів FONDY за допомогою інтеграції Java Script на вашій сторінці.

Для підключення актуальної версії модуля використовуйте такий код:

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

Для виклику платіжної сторінки через JavaScript API, необхідно спочатку відправити запит server-to-server на адресу https://pay.fondy.eu/api/checkout/url/ і у відповідь отримати url платіжної сторінки:

Приклад запиту

{
  "request": {
    "response_url": "https://api.fondy.eu/responsepage/",
    "order_id": "test8037875286",
    "order_desc": "Test payment",
    "currency": "UAH",
    "amount": "100",
    "signature": "07bc309047a56275f8d89ae222e2af0ceb94fe79",
    "merchant_id": "1"
  }
}

Приклад відповіді

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

Детальнішу документацію щодо server-to-server API див. Формування запиту

Отриманий у відповіді url вигляду

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

необхідно підставити в код JavaScript у наступному рядку:

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

див. приклад нижче.

Відкрити документацію

Приклади використання

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__);
 });

Повноекранний режим

$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);
 });

Вбудований у сторінку 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);
 });

Обробка даних чекаута

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

Apple Pay

Для роботи з Apple Pay потрібно додатково додати в JS код конфігурації платіжної сторінки:

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

і div у сторінку вставити

<div id="fondyApplePay"> </div>