Кнопка оплати

Платіжна кнопка являє собою 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