API FONDYВерсия 1.0

Проект на GitHub: https://github.com/cloudipsp/checkout-vue

Дизайн платежной страницы можно стилизировать как обычный HTML + CSS

Для этого за основу можно взять уже готовый пример, исходный код которого (HTML/CSS/JavaScript) необходимо разместить на своем сайте:

Базовый пример дизайна. Оплата картой, ApplePay, GooglePay.

 

При этом необходимо подключить JavaScript SDK:

https://pay.fondy.eu/latest/checkout.js

https://pay.fondy.eu/latest/i18n/ru.js

А также стили CSS:

https://pay.fondy.eu/latest/checkout.css

Конфигурация платежной страницы осуществлятся параметрами JavaScript кода:

 

var Options = {
	options: {
		methods: ['card', 'banklinks_eu','wallets'],
		cardIcons: ['mastercard', 'visa', 'mir', 'diners-club', 'american-express'],
		fields: false,
		title: 'my_title',
		link: 'https://shop.com',
		fullScreen: true,
		button: true,
		locales: ['ru', 'en', 'uk'],
		email: true,
		tooltip: true,
		fee: true,
	},
	params: {
		merchant_id: 1396424,
		required_rectoken: 'y',
		currency: 'USD',
		amount: 500,
		order_desc: 'my_order_desc',
		response_url: 'http://shop.com/thankyoupage',
		email: '',
		lang: 'ru'
	},
	messages: {
		ru: {
			card_number: 'Номер карты',
			my_title: 'Назначение платежа',
			my_order_desc: 'Тестовый платеж'
		},
		en: {
			card_number: 'Card number',
			my_title: 'Order description',
			my_order_desc: 'Test order'
		}
	}
}

 

JavaScript конфигурация имеет такую структуру:

{
  options: {},
  regular: {},
  recurring: {},
  params: {},
  messages: {},
  validate: {}
}

 

options - параметры настройки визуальной части платежной страницы

 

Parameter nameParameter typeDefault valueDescription
methods Array [‘card’, ‘banklinks_eu’,’wallets’]

 Набор групп платежных методов, такие как:  карты, интернет-банкинг, Apple Pay, Google Pay, локальные платежные методы, direct debit.

 Поддерживаемые значения: ‘card’ — банковские карты Visa/MasterCard, ‘banklinks_eu’ — интернет-банкинги и локальные платежные методы (iDEAL, Giropay, MyBank, Blick и.д. ), ‘wallets’ — Google и Apple Pay.

 Как выглядит платежная страница с включенным максимальным набором платежных методов можно посмотреть в примере: Пример с расширенным набором платежных методов

fast Array  
cardIcons Array [‘mastercard’, ‘visa’]

 Набор отображаемых логотипов платежных систем.

 Поддерживаемые значения: `mastercard`, `visa`, `mir`, `prostir`, `diners-club`, `american-express`.

fields Boolean false Включает использование дополнительных полей на платежной странице, как показано в Примере с дополнительными параметрами
title String  
link String  
fullScreen Boolean true Определяет, какой вид будет иметь платежная страница — компактный, внутри небольшой области страницы (false) или на всю страницу (true)
button Boolean trueОпределяет, показывать стандартную кнопку оплаты , или использовать собственную. Как использовать собственную кнопку показано в Примере с отправкой формы с платежными данными по собственному событию
locales Array 

 Выбор доступных локализаций платежной страницы.

 Поддерживаемые значения: `ru`, `en`, `uk`, `lv`, `fr`, `cs`, `sk`.

email Boolean false Определяет, запрашивать или нет email плательщика.
tooltip Boolean true 
apiDomain String ‘api.fondy.eu’ 
fee Boolean true Отображает клиентскую комиссию.
css String  Поддерживаемые значения: `bootstrap3`, `bootstrap4`, `foundation6`.

 

regular - включает использование календаря платежей на платежной странице, как показано 
в Примере с календарем платежей и в Примере с календарем платежей 2

 

Parameter nameParameter typeDefault valueDescription
insertBooleanfalse Включает календарь платежей
openBooleanfalse Отобразить и развернуть параметры выбора регулярности и частоты платежей плательщику
hideBooleanfalse Скрыть возможность плательщику изменять параметры календаря
periodArray[‘day’, ‘week’, ‘month’, ‘year’]

 Допустимые параметры регулярности платижа, которые может изменить плательщик

 Поддерживаемые значения: `day`, `week`, `month`, `year`.

 

recurring - параметризирует календарь платежей: задает регулярность, частоту, дату старта первого списания, 
дата заверншения, сумму регулярного списания

 

Parameter nameParameter typeDefault valueDescription
everyInteger1 Частота списаний
periodString‘month’

 Регулярность списаний

 Поддерживаемые значения: `day`, `week`, `month`, `year`.

amountInteger100 Сумма регулярных списаний, если отличается от суммы основного платежа
start_timeString 

 Дата первого списания.

 format YYYY-MM-DD

end_timeString 

 Дата завершения списаний.

 format YYYY-MM-DD

 

params - параметры заказа, описанные подробно в основной документации API

 

Parameter nameParameter typeDefault valueDescription
merchant_idInteger1396424 
order_descString  Описание/назначение покупки
amountInteger100 
currencyString  
response_urlString  Адрес страницы мерчанта, на которую будет перенаправлен плательщик после оплаты
langString ‘en’

 Язык платежной страницы. Поддерживаемые значения:

ru — Русский
en — English
uk — Українською
lv — Latviešu
fr — Français
cs — Čeština
sk — Slovenský
ro — Română
es — Español
pl — Polski
it — Italiano

required_rectokenString  Поддерживаемые значения: `Y`, `N`, `y`, `n`.
verificationString  Поддерживаемые значения: `Y`, `N`, `y`, `n`.
verification_typeString  Поддерживаемые значения: `amount`, `code`
emailString  format email
tokenString  
offerBoolean false 
customObject  

 

messages - локализация сообщений и подписей к элементам платежной страницы

 

{
  messages: {
    {en}: {
      {id}: {value},
      ...
    },
    ...
  },
}

 

validate - локализация ошибок валидации полей формы ввода данных

 

{
  validate: {
    {en}: {
      {id}: {value},
      ...
    },
    ...
  },
}

 

Также при помощи данной реализации есть возможность получения JavaScript колбеков с результатом платежа и кодом отказа. В этом случае добавится следующая конструкция:

var app = fondy("#app", Options)
  .$on("success", function(model) {
    console.log("success event handled");
    
    var order_status = model.data.order.order_data.order_status;

    if (order_status == "approved") {
      console.log("Order is approved. Do somethng on approve...");
    } 
  })
  .$on("error", function(model) {    
    console.log("error event handled");
    var order_status = model.data.order.order_data.order_status;
    var response_code = model.data.error.code;
    var response_description = model.data.error.message;
    if (order_status == "declined") {
      console.log(
        "Order is declined. Do somethng on decline... Last response code is: " +
          response_code +
          ", description: " +
          response_description
      );
    } else if (order_status == "processing") {
      console.log(
        "Order is in processing. Last response code is: " +
          response_code +
          ", description: " +
          response_description
      );
    }
    
  });

Пример с получением JavaScript колбеков

 

 

Ниже представлены примеры готовых дизайнов платежных страниц в разной стилизации.

Пример 1

 

 

Пример 2

 

 

Пример с дополнительными параметрами

 

 

Пример с календарем платежей

После первой успешной оплаты на стороне Fondy будет создан календарь с запланированными регулярными платежами. Регулярность и частота задаются в параметрах платежной страницы.

 

 

Пример с календарем платежей 2

 

 

Пример с расширенным набором платежных методов

 

 

Пример с отправкой формы с платежными данными по собственному событию

 

 

Пример с получением JavaScript колбеков

 

 

Пример отдельной кнопки ApplePay/GooglePay

 

 

Пример платежа с заранее созданным ордером

Создаем order на бэкенде:

curl -i -X POST \
 -H "Content-Type:application/json" \
 -d \
'{
  "request": {
    "server_callback_url": "http://myshop/callback/",
    "order_id": "TestOrder_JSSDK_v2",
    "currency": "USD",
    "merchant_id": 1396424,
    "order_desc": "Test payment",
    "lifetime" : 999999
    "amount": 1000,
    "signature": "91ea7da493a8367410fe3d7f877fb5e0ed666490"
  }
}' \
 'https://api.fondy.eu/api/checkout/token'

Получаем токен платежа:

{
  "response":{
    "response_status":"success",
    "token":"b40624e6c97306667a46bc4a9439eefd5c142a4e"
  }
}

 

 

Загружаем платежную страницу, указывая token в качестве параметра.

Хочу принимать платежи со всего мира!