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 name	Parameter type	Default value	Description
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

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

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

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://pay.fondy.eu/api/checkout/token'

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

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

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