Платежная кнопка

Платежная кнопка представляет собой HTML код, который можно разместить на любой веб-странице: интернет-сайте, блоге, корзине интернет-магазина.

Для начала работы скопируйте один из примеров ниже и разместите у себя на сайте.

Примеры использования

1. Кнопка оплаты с произвольной суммой
2. Кнопка оплаты с календарем платежей (регулярные платежи)
3. Форма оплаты с дополнительными полями
4. Несколько кнопок оплаты
5. Форма оплаты встроенная в страницу
6. Пример кнопки с использованием JS API

Кнопка оплаты с произвольной суммой

Перед вызовом кнопки следует указать идентификатор получателя средств (setMerchantId=1396424) и валюту платежа (USD).
setResponseUrl() задает адрес страницы куда будет перенаправлен клиент после оплаты.

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId( 1396424);
	button.setAmount('', 'USD');
	button.setHost('pay.fondy.eu');
</script>
<button onclick="location.href=button.getUrl()">Pay an arbitrary amount</button>

Оплатить произвольную сумму

Кнопка оплаты с календарем платежей (регулярные платежи)

Перед вызовом кнопки следует указать идентификатор получателя средств (setMerchantId=1396424) и валюту платежа (USD).
setResponseUrl() задает адрес страницы куда будет перенаправлен клиент после оплаты.

setRecurringState(true) активирует календарь платежей.

addRecurringData() задает следующие свойства регулярного платежа:

start_time — дата первого платежа

end_time — дата последнего платежа

amount — сумма регулярного платежа

period — периодичность платежей (day, month, year)

every — частота платежей

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId(1396424);
	button.setAmount('200', 'USD', true);
	button.setHost('pay.fondy.eu');
	button.setRecurringState(true);
	button.addRecurringData({
		start_time: '2016-10-09',
		end_time: '2018-12-09',
		amount: 200,
		period: 'month',
		every: 1
	});
</script>
<button onclick="location.href=button.getUrl()">Оплатить регулярный платеж (ежемесячный)</button>

Оплатить регулярный платеж (ежемесячный)

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

В данном примере с фиксированной суммой (2.00 USD) показана возможность запросить у клиента ввод дополнительных полей (ФИО, назначение платежа).
addField() добавляет поле на форму оплаты, required делает его обязательным, а readonly запрещает редактировать

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
	var button = $ipsp.get('button');
	button.setMerchantId(1396424);
	button.setAmount(2, 'USD', true);
	button.setResponseUrl('http://example.com/result/');
	button.setHost('pay.fondy.eu');
	button.addField({
		label: 'ФИО',
		name: 'fio',
		required: true
	});
	button.addField({
		label: 'Описание платежа',
		name: 'description',
		value: 'Оплата за товар',
		readonly: true
	});
</script>
<button onclick="location.href=button.getUrl()">Пожертвовать 2 USD</button>

Пожертвовать 2 USD

Несколько кнопок оплаты

Вспомогательная функция настраивает кнопку непосредственно в момент нажатия.

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
function createOrder(amount, order_desc) {
	var button = $ipsp.get('button');
	button.setMerchantId(1396424);
	button.setAmount(amount, 'USD');
	button.setResponseUrl('http://example.com/result/');
	button.setHost('pay.fondy.eu'); 
        button.addField({ label: 'Описание покупки', name: 'order_desc', value: order_desc }); 
        return button.getUrl(); 
} 
</script> 
<button onclick="location.href=createOrder('','Товар №1')">Оплатить произвольную сумму</button> 
<button onclick="location.href=createOrder(20,'Товар №2')">Оплатить $20</button> 
<button onclick="location.href=createOrder(30,'Товар №3')">Оплатить $30</button> 
<button onclick="location.href=createOrder(40,'Товар №4')">Оплатить $40</button>

Оплатить произвольную сумму Оплатить $20 Оплатить $30 Оплатить $40

Форма оплаты встроенная в страницу

<script src="https://pay.fondy.eu/static_common/v1/checkout/ipsp.js"></script>
<script>
function checkoutInit(url) {
	$ipsp('checkout').scope(function() {
		this.setCheckoutWrapper('#checkout_wrapper');
		this.addCallback(__DEFAULTCALLBACK__);
		this.action('show', function(data) {
			$('#checkout_loader').remove();
			$('#checkout').show();
		});
		this.action('hide', function(data) {
			$('#checkout').hide();
		});
		this.action('resize', function(data) {
			$('#checkout_wrapper').width(480).height(data.height);
		});
		this.loadUrl(url);
	});
};
var button = $ipsp.get("button");
button.setMerchantId(1396424);
button.setAmount(10.99, 'USD', true);
button.setHost('pay.fondy.eu');
checkoutInit(button.getUrl());
</script>

<div id="checkout">
	<div id="checkout_wrapper"></div>
</div>

Пример кнопки с использованием JS API

Смотрите пример кода на: jsfiddle.net

Чтобы добавить на платежную страницу любое дополнительное поле, используйте конструкцию

$ipsp('button').addField({
	'label':'Account Id',
	'name' :'account_id',
	'value':'127318273',   //не обязательно, по умолчанию пустое
	'readonly':true|false, //не обязательно, по умолчанию false
	'required':true|false, //не обязательно, по умолчанию false
	'valid':{
		'pattern':'[a-z]+'  //регулярное выражение
	}
});

Таким образом можно передать параметры запроса платежного протокола:

$ipsp('button').addParam('имя_параметра','значение_параметра')

Открыть детальную документацию JS API